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

Adding accordion for dropdown children #430

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

Conversation

gkovats
Copy link
Collaborator

@gkovats gkovats commented Nov 17, 2024

Attempt to address the sub groups in dropdowns. Things to call out

  • I used BEM style class names, maybe a departure from previous standard. Let me know if you want this changed / we're trying to keep class names to a minimum
  • made the whole dropdown limit to 80% vertical heigh and scrollable, since dropdowns taller than the screen are kinda awful
  • added mild animation for expand / collapse

image

Copy link

netlify bot commented Nov 17, 2024

Deploy Preview for tsml-ui ready!

Name Link
🔨 Latest commit b5cae88
🔍 Latest deploy log https://app.netlify.com/sites/tsml-ui/deploys/6770477afbfbfd00083201c6
😎 Deploy Preview https://deploy-preview-430--tsml-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@joshreisner
Copy link
Contributor

definitely seems like a good start, thanks! works well with many levels of nesting: https://deploy-preview-430--tsml-ui.netlify.app/tests/timezones.html?region=usa-new-york-manhattan-greenwich-village

noticed a few places where it seems like it could use some design polish:

  • when a nested row is selected, the highlight does not go edge-to-edge

  • looks like it's no longer shading on hover

  • the other menus now have a lot of white space (before vs after), might be nice to try to keep the numbers flush right (as far as they'll go?) also maybe we need an internal border between items?

before after

also some like very minor and subjective CSS notes - i'm happy to tweak some

  • feel like the triangles should be bigger, and animate when clicked, and respond somehow on hover, maybe by getting darker?

  • the triangle gets lost in dark mode

Screenshot 2024-11-17 at 5 19 50 PM
  • also not sure why "San Jose" is wrapping in that case, i wonder if we could make the dropdowns go 100% wide when on mobile?

@gkovats
Copy link
Collaborator Author

gkovats commented Dec 28, 2024

@joshreisner Another round.

  • highlight is full width
  • addressed the dark mode discrepancy
  • made the triangle a smidge bigger. Really just reusing the other triangles for consistency, but can go with a chevron or something else
    image

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.

2 participants