Commit Graph

18 Commits

Author SHA1 Message Date
Kris e30df22716
A11Y: Improve the accessibility of sidebar content (#19131) 2022-11-22 05:32:43 +08:00
Joffrey JAFFEUX 2d518b2895
UX: ensures we don't focus invisible button in sidebar (#18502)
Prior to this fix pressing tab multiple times in the sidebar, you would end up focusing invisible "sidebar-section-header-button". This change ensures the button will become visible when tabbing even if not hovering this section.

The `background: transparent change` is to avoid a flashing background due to different transition timing on the collapsable button.
2022-10-06 14:35:06 +02:00
Alan Guo Xiang Tan ec1851b1dc
DEV: Fix lint (#18412) 2022-09-29 14:44:23 +08:00
Alan Guo Xiang Tan 4c2525adc6
UX: Correct padding and height for sidebar section message (#18410)
Follow-up to f1cbc23f1e
2022-09-29 14:06:28 +08:00
Alan Guo Xiang Tan f1cbc23f1e
UX: Add icons to all section links in Sidebar (#18378)
This commit introduces an icon to all links in the sidebar. If an icon has not been configured, we will fall back to a generic "link" icon. As part of this commit, we also standardised the size of each prefix to 20px by 20px and set a fix margin. This is to allow sufficient space for text prefixes and image prefixes to be displayed. 

Tests have been intentionally left out for now as I don't feel like asserting for the icons will bring much value at this point. Time shall prove me wrong.

Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2022-09-29 12:28:01 +08:00
Keegan George a446be1069
UX: Fix cut-off accents in sidebar headings (#18349) 2022-09-23 17:18:58 -07:00
Kris 3f303d263e
minor sidebar description styling for anons (#18332) 2022-09-22 13:05:32 -04:00
Kris e9e6ab688c
improve sidebar header sub-hovers (#18083) 2022-08-25 09:14:55 +08:00
Kris 14770ed208
remove margin from sidebar sections (#18082) 2022-08-24 15:45:46 -04:00
Kris ba4a4d3297
UX: more apparent focus styles for sidebar headers (#18078) 2022-08-24 14:13:26 -04:00
Kris 3068df4cea
UX: sidebar styling, spacing consistency, etc (#18059) 2022-08-24 09:33:15 +08:00
Alan Guo Xiang Tan d390805e40
UX: Remove sidebar section header background highlight on focus (#18043) 2022-08-23 15:42:25 +08:00
Alan Guo Xiang Tan 2d1e50911b DEV: Use button for sidebar section header
Buttons can be focused and action triggered via the enter key compared
to a span.
2022-08-19 10:21:36 +08:00
Alan Guo Xiang Tan 5990842dd9 UX: Revamp styling of sidebar
The following changes are made in this commit:

1. Move caret icon in sidebar section header to the right.
1. Each row in sidebar takes the full width which enables us to do a
full width highlight on hover and when sidebar link is active.
1. Ensure each row in Sidebar is of the same height.

Internal refs: /t/70546, /t/72196, /t/71820
2022-08-18 16:14:49 +08:00
Kris 126266863d
UX: sidebar transition and styling adjustments (#17678) 2022-07-26 23:16:34 -04:00
Alan Guo Xiang Tan cf5e59928e
UX: Only hide section header icons when sidebar is pinned on Desktop (#17604) 2022-07-22 14:27:46 +08:00
Alan Guo Xiang Tan 99073338de
FEATURE: Replace hamburger dropdown with Sidebar when undock (#17600)
When the experimental Sidebar is enabled, the hamburger drop down is replaced by a sidebar drop down. A user is given the ability to dock and undock the sidebar depending on their personal preference.

Do also note that the experimental sidebar is well, considered experimental at this point so I do not intend for the features here to be perfect. What I aim to do here is to ship the changes fast so that it can be used internally by the team to provide feedback. Custom links added by plugins and dark mode toggle has not been implemented as part of this commit as I aim to tackle it in another commit.

Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2022-07-22 13:06:47 +08:00
Alan Guo Xiang Tan 086fb6d6cf
DEV: Refactor sidebar components to prepare for integration into hamburger dropdown (#17566) 2022-07-19 14:37:07 +08:00