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

Revamp notifications stylesheet #2822

Merged
merged 11 commits into from
May 2, 2021
Merged

Conversation

davwheat
Copy link
Member

Fixes #2813. Progresses flarum/issue-archive#355.

Changes proposed in this pull request:

  • Fixes layout shift caused by tick button being added to layout DOM on hover.
  • Fixes styles not being applied on focus.
  • Add missing focus outlines.
  • Rewrite styles to use Less nesting, Grid and Flexbox
  • Use classList util (clsx) instead of string interpolation

This should really have been multiple PRs... I got a little carried away.

Reviewers should focus on:

Anything I've missed or should be changed? It's a pretty big rewrite so I wouldn't be surprised! I tried to add some comments to the styles too to help the review process (and me if I ever wonder what on earth I was doing).

Screenshot

image

Confirmed

  • Frontend changes: tested on a local Flarum installation.

@davwheat davwheat added type/bug type/cleanup type/accessibility Issues relating to accessibility (keyboard navigation, screenreaders, text contrast, etc.) labels Apr 29, 2021
@davwheat davwheat self-assigned this Apr 29, 2021
@davwheat davwheat merged commit 3ca035f into master May 2, 2021
@davwheat davwheat deleted the dw/2813-fix-notification-tick branch May 2, 2021 16:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type/accessibility Issues relating to accessibility (keyboard navigation, screenreaders, text contrast, etc.) type/bug type/cleanup
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Keep tick in layout DOM in notifications to prevent layout shift
3 participants