Commit Graph

30 Commits

Author SHA1 Message Date
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