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

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

@ -126,9 +126,14 @@
.btn {
display: flex;
padding: 0.857em;
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 {
color: var(--primary-medium);
@ -140,6 +145,11 @@
right: 6px;
top: 6px;
font-size: var(--font-down-3);
@media screen and (max-height: 400px) {
// helps with 400% zoom level
right: 0;
top: 0;
}
}
&.active {

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

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