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.

Sign up for GitHub

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

Jump to bottom

Fix dropdown z-index style #1574

Merged
merged 15 commits into from
May 11, 2023
Merged

Fix dropdown z-index style #1574

merged 15 commits into from
May 11, 2023

Conversation

peterpeterparker
Copy link
Member

@peterpeterparker peterpeterparker commented May 9, 2023 •
edited
Loading

Motivation

We noticed z-index issue on Firefox and Chrome with the dropdown component and generally were looking to change the behavior from an :hover call to action to click.

Changes

  • change behavior to open on click
  • present a backdrop behind dropdown that closes dropdown on click and keypress (for a11y)
  • modify style, notably
    • on hover on trigger outline only
    • animation and background color in trigger once click happened
    • cursor pointer on dropdown link to all space

Notes

Don't know well the CSS here so @meodai feel free to rewite

Screenshots

Enregistrement de l’écran 2023-05-10 à 08 08 19

nmattia
nmattia reviewed May 9, 2023
View reviewed changes
src/frontend/src/styles/main.css Outdated Show resolved Hide resolved
src/frontend/src/styles/main.css Show resolved Hide resolved
src/frontend/src/styles/main.css Outdated Show resolved Hide resolved
nmattia
nmattia reviewed May 11, 2023
View reviewed changes
Copy link
Collaborator

@nmattia nmattia left a comment

Choose a reason for hiding this comment

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

Thanks! just a couple of comments regarding consistency with the rest of the codebase

src/frontend/src/flows/manage/settingsDropdown.ts Outdated Show resolved Hide resolved
@peterpeterparker @nmattia
Update src/frontend/src/flows/manage/settingsDropdown.ts
a678570 
Co-authored-by: Nicolas Mattia <nicolas.mattia@dfinity.org>
nmattia
nmattia approved these changes May 11, 2023
View reviewed changes
Copy link
Collaborator

@nmattia nmattia left a comment

Choose a reason for hiding this comment

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

LGTM

@nmattia nmattia merged commit 8fab20d into main May 11, 2023
@nmattia nmattia deleted the style/fix-dropdown branch May 11, 2023 08:30
@peterpeterparker peterpeterparker mentioned this pull request May 11, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@nmattia nmattia nmattia approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@peterpeterparker @nmattia