* feat(seo): shift h1 tag from logo to discussion title
Many times have we seen opponents of using h2 as the discussion title. Although
my own SEO knowledge is limited, I have seen the importance of structuring pages
according to the content you wish to prioritize. If we only take that into consideration
there is zero reason for the app-wide identical logo to take precedence over any
other heading.
This change makes the logo a standard (visually identical) element, and
makes the discussion hero title a h1.
* feat(seo): rewrite remainder of hero titles and subtitles
* add yiq calculator util
* use the new contast util to differentiate light/dark tags
* fix: invert logic
* feat: add tag-dark and tag-light less config
* fix: convert 3 chars hex to 6 chars hex
* fix: rename import
* fix: clarify util name
* fix: rename function
* fix: invert less variables when dark mode is enabled
* fix: TagTiles contrast
* refactor: simplify logic with a unique variable
* refactor: simplify logic with a unique variable
* feat: add text color variables not depending on the dark/light mode
* refactor: use isDark rather than getContrast
* refactor: change getContrast to isDark with for a more direct approach
* fix: adjust snippet description
* refactor: change getContrast to isDark with for a more direct approach
* fix: adjust snippet description
* fix: TagHero contrast
* fix: DiscussionHero contrast
* fix: newDiscussion contrast
* fix(newDiscussion): restore less rule when tag is not colored
* fix: TagTiles description
* fix: TagTiles last posted
* chore: change `var` to `let`
* refactor: keep it for backwards compatibility
* refactor: keep it for backwards compatibility
* Apply suggestions from code review
* fix: missed this when I was resolving
* fix: remove dist files from pull request
* Revert "Resolved merge conflict"
This reverts commit c7f0d14aa8f2a18a5a0ae7530284e51d7aedd811, reversing
changes made to 6753dfc2af6a125f503724aed129bfd98fa06df5.
* fix: missed this when I was resolving
* fix
* Update isDark.ts
* chore: flexible contrast color fixing
* refactor(isDark): clarify the doc block
* fix(isDark): increase the yiq threshold
* typo
* fix: preserve design coloring through light and dark modes
Co-authored-by: David Wheatley <david@davwheat.dev>
Co-authored-by: Sami Mazouz <sychocouldy@gmail.com>
* add yiq calculator util
* fix: convert 3 chars hex to 6 chars hex
* fix: clarify util name
* feat: add text color variables not depending on the dark/light mode
* refactor: change getContrast to isDark with for a more direct approach
* fix: adjust snippet description
* chore: change `var` to `let`
Co-authored-by: David Wheatley <david@davwheat.dev>
* feat: increase margin between notifications list control icons
This feels cleaner, and reduces the chances of a misclick.
Co-authored-by: Sami Mazouz <sychocouldy@gmail.com>
* chore: merge media queries
* chore: change discussion page skeleton to grid layout
* chore: use grid areas instead of order
Signed-off-by: Sami Mazouz <sychocouldy@gmail.com>
* Add delete all notifications option
* chore: `DELETE /api/notifications` as per conventions
* test: can delete all notifications
Co-authored-by: Sami Mazouz <ilyasmazouz@gmail.com>
* Feature: Stackable modals
* Processed feedback
* fix: use position in modal stack rather than key for modal number
* fix: use correct base z-index
* chore: simplify `className` to `class`
* chore: add `key` attribute to ModalManager element
* fix: backdrop flashing as modals are stacked/unstacked
* chore: simplify modal close process
* docs: add TS overload to indicate deprecated modal opening syntax
Require explicit values for `attrs` and `stackModal` from Flarum 2.0, beginning deprecation from now.
* feat: use stackable modal for forgot password modal above sign in
* chore: explicitly check if modal is open before trying to focus trap
* fix(a11y): add missing `aria-hidden` on main content when modal open
* fix(a11y): add missing `aria-modal` on modal
* chore: remove test code
* chore: remove dead CSS
* chore: remove overload
* fix: lock page scrolling when modal is open
* fix: strange scrolling behaviour
* chore: convert to JSX
* fix: event listener memory leak
* chore: remove unneeded optional chaining
* fix: incorrect return types
* chore: rewrite backdrop system - use one backdrop for all modals
* docs: typos in comment block
* fix: show backdrop directly below top-most modal
Co-authored-by: Sami Mazouz <sychocouldy@gmail.com>
* chore: format
* fix: use an invisible backdrop for each modal to exit
Signed-off-by: Sami Mazouz <ilyasmazouz@gmail.com>
* chore: remove debugging code
Signed-off-by: Sami Mazouz <ilyasmazouz@gmail.com>
* chore: remove forgotten debug code
Co-authored-by: David Wheatley <david@davwheat.dev>
Co-authored-by: Sami Mazouz <sychocouldy@gmail.com>
* Remove color validation in basics admin page & add color indicator
* Create ColorInput common component
* Revert 'formGroupAttrs' addition
* Rename component CSS classes
* Fix input type in ColorInput from AdminPage#buildSettingComponent
* Rename component to ColorPreviewInput, remove aliases in admin & export in compat
* Remove leftovers from rebase on master
* feat: add global type definition for a vnode element tag
* fix(a11y): add aria roles to color input
* chore: use new type
* chore: format
Co-authored-by: David Wheatley <hi@davwheat.dev>
* Add focus trap util
* Add focus trap to Modals
Fixes#2663
* Split tab press into `onTab` handler
* Remove deprecated code
* Use requestAnimationFrame instead of setTimeout
* Reduce code duplication
* Implement focus trap in nav drawer
Fixes#2665
* Hide drawer when window is resized to be bigger
Fixes issue where focus trap would remain on the drawer when it is
just the app header, if the drawer was opened then the window was
made larger.
* Simplify conditional function calls
* Fix modal focus trap
* Remove debug code
* Simplify resize handler conditional statements
* Add info about reasoning of resize handler
* Prefer native JS methods over jQuery
* Update conditional function call to handle `undefined`
* Expose screen sizes as CSS custom properties
* Use `window.matchMedia` rather than resize handler
* Fix spelling error
Co-authored-by: David Sevilla Martin <me@datitisev.me>
* Remove breaking change
Co-authored-by: David Sevilla Martin <me@datitisev.me>
* Add class to remove all UA styles from a button
* Improve classList utilisation
* Simplify JSX
* Use classlist instead of concatenation
* Fix reply count focusable when not acting as a button
* Add SR only class
* Add new reply count translations
* Use cleaner translations
* Remove unused import
* Add missing new line
* Delete Accessibility.less
* Use existing `.visually-hidden` class
* Format
* Fix locale formatting
Whether it's due to corrupted content, missing tags, caching issues, or other assorted reasons, post content can't be rendered. Currently, this results in an exception that crashes the entire forum and is hard to debug. Instead, we should log the error and show an indicator message that rendering has failed.
Co-authored-by: Sami Mazouz <sychocouldy@gmail.com>
Co-authored-by: David Wheatley <hi@davwheat.dev>
* refactor: Avatar classes refactor
* refactor: Badge classes refactor
* chore: Remove commented dead code
* chore: Remove SignUpModal dead CSS code
Flarum seem to have had some kind of user display in the sign up modal
on successful sign up, which no longer exists.
https://github.com/flarum/core/blob/v0.1.0-beta/js/forum/src/components/SignUpModal.js#L111
* chore: Deprecate unneeded vendor mixins
* chore: Normalize property values format
Co-authored-by: David Wheatley <hi@davwheat.dev>
* chore: Remove @-webkit-keyframes
* chore: Combine animation properties
* chore: Avoid `all` for transition
* chore: translate3d is no longer necessary for hardware acceleration
* fix: Lost cursor pointer to normalize update
* chore: Use CSS variables for more things
* chore: Remove unecessary overspecification
Co-authored-by: David Wheatley <hi@davwheat.dev>
* Add extra feature to a11y focusring mixin
* Add visually hidden CSS class and mixin
* Visually hide checkboxes (keep in focus/a11y tree)
* Place checkbox focus ring around display element
* Improve mobile checkbox/switch accessibility
* Start of conversion to CSS variables
* Use variable for Badge colors
* Use variable for avatar bg
* Use variable for user card bg
* Use css variables for hero
* Use css variables for buttons
* Use css variables for sidenav links
* Cleaner style attr
Co-authored-by: David Wheatley <hi@davwheat.dev>
