Align the mobile main menu to the right

See https://www.woltlab.com/community/thread/295627-mobil-men%C3%BC-links/

diff --git a/ts/WoltLabSuite/Core/Ui/Page/Menu/Container.ts b/ts/WoltLabSuite/Core/Ui/Page/Menu/Container.ts
index 083b1025e50c7088dad38c5449e988a83a4f70f9..530e6154dc646be41cd50fd438dfa7ca72d149c9 100644 (file)
--- 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 ab527a741fbad794a1abd3ce7d567e79e36e9605..1a429f9c1371e0827e8e8810e5fc4f43fd1577bd 100644 (file)
--- 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 54bd4fc41da92349031a0da8fec7b6ef946ff7d5..b7eea34c1853eb7fdf792361b3545c9475d544b1 100644 (file)
--- 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<void>((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 bd9f902be0a58620dd6e9a803bcb6337c6f97fea..bf76e9f6b15660be362f0e722afbb455ff61d774 100644 (file)
--- 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 af3458708edbcf934f3f9db7d65ccd734d1bfec1..4ebc31ecac93589237261a4ff3d858573b927f89 100644 (file)
--- 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 186f53a1526b292401671e7daa28f08061d6f10f..eebb1bb4c532a65565d0a3f11e1cb8696bed0cec 100644 (file)
--- 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 6e56a0d4554145b00518560dc0681abf68ff0759..5f68e6f0e69fe81af5a3a7c9f75d5c46e20831fb 100644 (file)
--- 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;
        }
 }