Commit Graph

35 Commits

Author SHA1 Message Date
chapoi
099bffe37a
UX: Increase spacing mobile menus (#27554)
* UX: increase sidebar row height on mobile

* UX: increase quick access panel row height
2024-06-21 17:05:19 +02:00
Kris
10dce46886
UX: remove sidebar background color (#21775) 2023-06-06 09:24:56 -04:00
Kris
2aae8d6092
UX: increase sidebar font-size (#21704) 2023-05-24 11:00:20 -04:00
Keegan George
2ebe7db3c6
DEV: .quick-access-profile no longer exists (#21663) 2023-05-20 17:47:04 +10:00
Alan Guo Xiang Tan
4ec9a947dc
UX: Improve display of short site description in header dropdown (#21628) 2023-05-18 10:16:21 +08:00
Krzysztof Kotlarek
5b6604f5a7
FEATURE: sidebar for narrow desktop screen (#19160)
When desktop screen is narrow like < 1100px, sidebar should behave similarly to mobile version.
2022-11-25 15:33:26 +11:00
Kris
f90a8438e9
UX: force sidebar to occupy full height (#19035) 2022-11-15 09:37:00 -05:00
chapoi
899ed039b7
FIX: typo (#18566) 2022-10-12 16:50:02 +02:00
chapoi
d507151508
UX: add more spacing to tab btns (#18506) 2022-10-06 23:53:06 +02: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
ea27079ffa
FIX: Sidebar scroll fade on older iOS (#18299)
* DEV: Use explicit transparent color rather than keyword
* DEV: Use variable for dark mode
* DEV: Add mobile style
2022-09-21 09:03:40 +10:00
Alan Guo Xiang Tan
b18f1fefda
UX: Remove height CSS preventing sidebar touch scrolling on mobile (#18257) 2022-09-15 17:17:08 +08:00
Alan Guo Xiang Tan
2583d21aa7
UX: Improve styling of sidebar on mobile (#18246)
* Make sidebar footer is sticky
* Ensure that only the sidebar sections is scrollable
2022-09-15 11:35:33 +08:00
Alan Guo Xiang Tan
48da481871
UX: Increase sidebar fontsize on mobile (#18100)
Font size was first increased in 9909d001c5 but regressed in
7a05a9d411
2022-08-29 10:27:58 +08:00
Kris
3068df4cea
UX: sidebar styling, spacing consistency, etc (#18059) 2022-08-24 09:33:15 +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
Osama Sayegh
fac04f3e73
DEV: Introduce a basic version of the new notifications menu behind a feature flag (#17492) 2022-07-19 10:35:02 +08:00
Kris
c9419b51a3
UX: prevent user menu overflow on tiny screens (#15964) 2022-02-15 20:13:11 -05:00
Jeff Wong
f12551afd3
PERF: Animate request animation frame (#13337)
* PERF: requestanimationframe for better performance on pan events
* PERF: temporarily remove items on animate
2021-06-09 04:26:52 -10:00
Jeff Wong
7c12ca89cb
Update menu swipe (#13277)
* DEV: replace swipe events to use translate rather than left/right

translate is better for animations. also use native css animations for opening
and closing.

* a11y: respect prefers reduced motion on mobile timeline

* DEV: reduce jquery usage

* DEV: add tests for menu swipe events

test is run in 50% zoom/transform which means offsets and x of touch events need to be halved

Refactor test window to use a transform rather than non-standard zoom property

Co-authored-by: Penar Musaraj <pmusaraj@gmail.com>
2021-06-07 12:31:16 -07:00
Kris
2fb1eaa868
UX: more consistent mobile spacing (#13297) 2021-06-07 13:22:28 -04:00
Kris
c3f6eb17a5
UX: On very short screens switch quick-access-profile to 2-columns (#12120) 2021-02-18 18:47:37 -05:00
Roman Rizzi
48f06e56f2
A11Y: Improve the quick access menu accessibility. (#11757)
- The icon for the “view all” controls in the panels have no accessible alternative.
- Because the “Log Out” and "Do Not Disturb" elements in the preferences tab are an <a> element without an href attribute, it is not keyboard focusable and therefore not keyboard focusable. Use a button element instead.
2021-01-20 14:50:36 -03:00
Penar Musaraj
fb2e24a77a
UX: Fix unreachable buttons on menus in Safari iOS (#11458)
Safari overlays its own nav at the bottom 10% or so of the screen. This
makes buttons in that area virtually unclickable, so to ensure buttons
there are reachable, we need to add enough bottom padding to menu panels.
2020-12-10 08:11:58 -05:00
Penar Musaraj
d90b852cd0
UX: bottom padding for menu panel on iOS notch devices (#11270) 2020-11-17 15:42:03 -05:00
Kris
630ec7b49c Enable hamburger menu scrolling on mobile, follow-up to 1972364 2020-08-15 20:31:22 -04:00
Penar Musaraj
c937afc75e
FEATURE: automatic dark mode (#10341)
A first step to adding automatic dark mode color scheme switching. Adds a new SCSS file at `color_definitions.scss` that serves to output all SCSS color variables as CSS custom properties. And replaces all SCSS color variables with the new CSS custom properties throughout the stylesheets. 

This is an alpha feature at this point, can only be enabled via console using the `default_dark_mode_color_scheme_id` site setting.
2020-08-03 22:57:10 -04:00
Penar Musaraj
c2abf88a61
UX: Adjustments to topic admin menu on mobile (#9945) 2020-06-01 09:39:38 -04:00
Joffrey JAFFEUX
31d1468922
UX: reworks various menus to homogenize them (#9905)
- bookmark modal menu
- topic-footer-mobile-dropdown
- post-admin-menu
- topic-admin-menu
- quick-access menus
- toolbar-popup-menu
2020-05-29 08:05:21 +02:00
Kris
39dde33cbb UX: Larger tap areas for profile panel in user menu on mobile devices 2020-03-23 13:25:33 -04:00
Jeff Wong
d2569f8e77 make linter happy 2018-12-11 09:41:40 -08:00
Jeff Wong
71d8807fec
Full height swipe-able menus (#6566)
* Feature: Full height swipe enabled menus

support pan events on iphone
2018-12-11 09:15:20 -08:00
Kris
b731d5d9b5 Removing unneeded and duplicate styles 2018-02-23 21:43:05 -05:00
Robin Ward
4a6f617f4d UX: Long category names pushed badges to a new line in the hamburger 2015-09-02 15:42:20 -04:00
Robin Ward
5457684975 Split hamburger-menu out into menu-panel 2015-08-26 16:29:10 -04:00