IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-26 02:40:53 -06:00
Code Issues Packages Projects Releases Wiki Activity

A11Y: improve notification panel layout for high zoom levels (#27848)

Browse Source
This commit is contained in:
Kris 2024-07-10 15:50:34 -04:00 committed by GitHub
parent 7439fc73b1
commit 39187d9814
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 25 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/assets/javascripts/discourse/app/components/glimmer-site-header.gjs
View File

@ -56,6 +56,10 @@ export default class GlimmerSiteHeader extends Component {
return !this.sidebarEnabled || this.site.narrowDesktopView; return !this.sidebarEnabled || this.site.narrowDesktopView;
} }
get slideInMode() {
return this.site.mobileView || this.site.narrowDesktopView;
}
get leftMenuClass() { get leftMenuClass() {
if (isDocumentRTL()) { if (isDocumentRTL()) {
return "user-menu"; return "user-menu";
@ -182,14 +186,11 @@ export default class GlimmerSiteHeader extends Component {
const menuPanels = document.querySelectorAll(".menu-panel"); const menuPanels = document.querySelectorAll(".menu-panel");
if (menuPanels.length === 0) { if (menuPanels.length === 0) {
this._animate = this.site.mobileView || this.site.narrowDesktopView; this._animate = this.slideInMode;
return; return;
} }
let viewMode = let viewMode = this.slideInMode ? "slide-in" : "drop-down";
this.site.mobileView || this.site.narrowDesktopView
? "slide-in"
: "drop-down";
menuPanels.forEach((panel) => { menuPanels.forEach((panel) => {
if (menuPanelContainsClass(panel)) { if (menuPanelContainsClass(panel)) {
@ -208,7 +209,7 @@ export default class GlimmerSiteHeader extends Component {
let finalPosition = PANEL_WIDTH; let finalPosition = PANEL_WIDTH;
this._swipeMenuOrigin = "right"; this._swipeMenuOrigin = "right";
if ( if (
(this.site.mobileView || this.site.narrowDesktopView) && this.slideInMode &&
panel.parentElement.classList.contains(this.leftMenuClass) panel.parentElement.classList.contains(this.leftMenuClass)
) { ) {
this._swipeMenuOrigin = "left"; this._swipeMenuOrigin = "left";
@ -418,7 +419,7 @@ export default class GlimmerSiteHeader extends Component {
<template> <template>
<div <div
class={{concatClass class={{concatClass
(if this.site.desktopView "drop-down-mode") (unless this.slideInMode "drop-down-mode")
"d-header-wrap" "d-header-wrap"
}} }}
{{didInsert this.setupHeader}} {{didInsert this.setupHeader}}

14
app/assets/stylesheets/common/base/menu-panel.scss
View File

@ -126,9 +126,14 @@
.btn { .btn {
display: flex; display: flex;
padding: 0.857em;
position: relative; position: relative;
border-radius: 0px; border-radius: 0;
padding: 0.857em;
@media screen and (max-height: 400px) {
// helps with 400% zoom level
font-size: var(--font-down-1);
padding: 0.5em 0.875em;
}
.d-icon { .d-icon {
color: var(--primary-medium); color: var(--primary-medium);
@ -140,6 +145,11 @@
right: 6px; right: 6px;
top: 6px; top: 6px;
font-size: var(--font-down-3); font-size: var(--font-down-3);
@media screen and (max-height: 400px) {
// helps with 400% zoom level
right: 0;
top: 0;
}
} }
&.active { &.active {

7
app/assets/stylesheets/desktop/menu-panel.scss
View File

@ -3,8 +3,11 @@
width: unset; width: unset;
} }
.panel-body { &.drop-down {
max-height: calc(100vh - 100px); .panel-body {
max-height: calc(100vh - var(--header-offset));
max-width: calc(100vw - 2em);
}
} }
} }