Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: new accordion design for storage page #157

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Conversation

hetd54
Copy link
Contributor

@hetd54 hetd54 commented Dec 6, 2024

https://qa-ccv-brown-edu--pr157-accordion-design-z5c51sjs.web.app/storage

Feedback from team: "One suggestion stood out: not everybody is figuring out that the arrows (bullets) used in 'Brown Storage Options' are actually dropdowns to get more information. Can we change them to 'Chevron up/down' icons OR '+/— in a circle' icon preceding the text?"

I made the entire storage-option its own separate box that is hoverable with a pointer -- do we think this new design effectively addresses their issue?

Copy link

github-actions bot commented Dec 6, 2024

Visit the preview URL for this PR (updated for commit d1f8584):

https://qa-ccv-brown-edu--pr157-accordion-design-lgd6i10v.web.app

(expires Thu, 26 Dec 2024 18:11:16 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: 2def302adddb44a0a1eb29d07c5f8ac902277e8a

@hetd54 hetd54 self-assigned this Dec 6, 2024
@s-bessey
Copy link

s-bessey commented Dec 9, 2024

@hetd54 hmm... it still looks a bit more like a bulleted list (now with arrow bullets) than a drop-down. I wonder if something like this (screencap stolen from tailwind) makes more sense?
image

Copy link
Contributor

@eldu eldu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great! Seems like there is also an animation when the accordion opens? It's kind of weird, but it's fine!!!!

Comment on lines +12 to +15
<span v-if="expanded === false" class="icon">
<i class="mdi mdi-plus mdi-24px" />
</span>
<span v-else class="icon">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is nitpicky and just style, but there aren't that many. I'd rather it be

if truthy.... else ....

rather than if falsey .... else ....

just to simplify logical and relational operators

no worries though!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants