From 5a5981b865a64a4313002c42109d8c4286c043fa Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Sat, 14 May 2022 17:10:15 +0200 Subject: [PATCH] Align the mobile main menu to the right See https://www.woltlab.com/community/thread/295627-mobil-men%C3%BC-links/ --- ts/WoltLabSuite/Core/Ui/Page/Menu/Container.ts | 10 +--------- ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts | 4 ++-- ts/WoltLabSuite/Core/Ui/Page/Menu/User.ts | 4 ++-- .../js/WoltLabSuite/Core/Ui/Page/Menu/Container.js | 4 +--- .../files/js/WoltLabSuite/Core/Ui/Page/Menu/Main.js | 2 +- .../files/js/WoltLabSuite/Core/Ui/Page/Menu/User.js | 2 +- wcfsetup/install/files/style/ui/pageMenu.scss | 5 +---- 7 files changed, 9 insertions(+), 22 deletions(-) diff --git a/ts/WoltLabSuite/Core/Ui/Page/Menu/Container.ts b/ts/WoltLabSuite/Core/Ui/Page/Menu/Container.ts index 083b1025e5..530e6154dc 100644 --- a/ts/WoltLabSuite/Core/Ui/Page/Menu/Container.ts +++ b/ts/WoltLabSuite/Core/Ui/Page/Menu/Container.ts @@ -14,21 +14,14 @@ import { pageOverlayClose, pageOverlayOpen, scrollDisable, scrollEnable } from " import UiCloseOverlay from "../../CloseOverlay"; import DomUtil from "../../../Dom/Util"; -export const enum Orientation { - Left = "left", - Right = "right", -} - export class PageMenuContainer { private readonly container = document.createElement("div"); private readonly content = document.createElement("div"); private focusTrap?: FocusTrap = undefined; - private readonly orientation: Orientation; private readonly provider: PageMenuProvider; - constructor(provider: PageMenuProvider, orientation: Orientation) { + constructor(provider: PageMenuProvider) { this.provider = provider; - this.orientation = orientation; // Set the container to be initially hidden, otherwise the detection in // `toggle()` incorrectly assumes the container to be visible on first click. @@ -92,7 +85,6 @@ export class PageMenuContainer { } this.container.classList.add("pageMenuContainer"); - this.container.dataset.orientation = this.orientation; this.container.hidden = true; this.container.addEventListener("click", (event) => { if (event.target === this.container) { diff --git a/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts b/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts index ab527a741f..1a429f9c13 100644 --- a/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts +++ b/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts @@ -7,7 +7,7 @@ * @module WoltLabSuite/Core/Ui/Page/Menu/Main */ -import PageMenuContainer, { Orientation } from "./Container"; +import PageMenuContainer from "./Container"; import { PageMenuProvider } from "./Provider"; import * as Language from "../../../Language"; import DomUtil from "../../../Dom/Util"; @@ -25,7 +25,7 @@ export class PageMenuMain implements PageMenuProvider { this.mainMenu = document.querySelector(".mainMenu")!; this.menuItemProvider = menuItemProvider; - this.container = new PageMenuContainer(this, Orientation.Left); + this.container = new PageMenuContainer(this); this.callbackOpen = (event) => { event.preventDefault(); diff --git a/ts/WoltLabSuite/Core/Ui/Page/Menu/User.ts b/ts/WoltLabSuite/Core/Ui/Page/Menu/User.ts index 54bd4fc41d..b7eea34c18 100644 --- a/ts/WoltLabSuite/Core/Ui/Page/Menu/User.ts +++ b/ts/WoltLabSuite/Core/Ui/Page/Menu/User.ts @@ -8,7 +8,7 @@ * @woltlabExcludeBundle tiny */ -import PageMenuContainer, { Orientation } from "./Container"; +import PageMenuContainer from "./Container"; import { PageMenuProvider } from "./Provider"; import * as Language from "../../../Language"; import { getUserMenuProviders } from "../../User/Menu/Manager"; @@ -54,7 +54,7 @@ export class PageMenuUser implements PageMenuProvider { constructor() { this.userMenu = document.querySelector(".userPanel")!; - this.container = new PageMenuContainer(this, Orientation.Right); + this.container = new PageMenuContainer(this); const isReady = new Promise((resolve) => { if (document.readyState === "complete") { diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Container.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Container.js index bd9f902be0..bf76e9f6b1 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Container.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Container.js @@ -14,12 +14,11 @@ define(["require", "exports", "tslib", "focus-trap", "../../Screen", "../../Clos CloseOverlay_1 = tslib_1.__importDefault(CloseOverlay_1); Util_1 = tslib_1.__importDefault(Util_1); class PageMenuContainer { - constructor(provider, orientation) { + constructor(provider) { this.container = document.createElement("div"); this.content = document.createElement("div"); this.focusTrap = undefined; this.provider = provider; - this.orientation = orientation; // Set the container to be initially hidden, otherwise the detection in // `toggle()` incorrectly assumes the container to be visible on first click. this.container.hidden = true; @@ -67,7 +66,6 @@ define(["require", "exports", "tslib", "focus-trap", "../../Screen", "../../Clos return; } this.container.classList.add("pageMenuContainer"); - this.container.dataset.orientation = this.orientation; this.container.hidden = true; this.container.addEventListener("click", (event) => { if (event.target === this.container) { diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main.js index af3458708e..4ebc31ecac 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main.js @@ -17,7 +17,7 @@ define(["require", "exports", "tslib", "./Container", "../../../Language", "../. constructor(menuItemProvider) { this.mainMenu = document.querySelector(".mainMenu"); this.menuItemProvider = menuItemProvider; - this.container = new Container_1.default(this, "left" /* Left */); + this.container = new Container_1.default(this); this.callbackOpen = (event) => { event.preventDefault(); event.stopPropagation(); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/User.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/User.js index 186f53a152..eebb1bb4c5 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/User.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/User.js @@ -24,7 +24,7 @@ define(["require", "exports", "tslib", "./Container", "../../../Language", "../. this.tabPanels = new Map(); this.tabs = []; this.userMenu = document.querySelector(".userPanel"); - this.container = new Container_1.default(this, "right" /* Right */); + this.container = new Container_1.default(this); const isReady = new Promise((resolve) => { if (document.readyState === "complete") { resolve(); diff --git a/wcfsetup/install/files/style/ui/pageMenu.scss b/wcfsetup/install/files/style/ui/pageMenu.scss index 6e56a0d455..5f68e6f0e6 100644 --- a/wcfsetup/install/files/style/ui/pageMenu.scss +++ b/wcfsetup/install/files/style/ui/pageMenu.scss @@ -269,12 +269,9 @@ width: 400px; } - .pageMenuContainer[data-orientation="right"] .pageMenuContent { - margin-left: auto; - } - .pageMenuContent { box-shadow: 0 0 20px rgba(0, 0, 0, 0.19), 0 0 6px rgb(0, 0, 0, 0.23); + margin-left: auto; width: 400px; } } -- 2.20.1