Moved the page menu item counter to the text

diff --git a/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts b/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts
index 793b8015b4b6126e85b8d3d1d4a7b64be1330428..ab527a741fbad794a1abd3ce7d567e79e36e9605 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts
+++ b/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts
@@ -179,6 +179,15 @@ export class PageMenuMain implements PageMenuProvider {
         link.setAttribute("aria-current", "page");
       }
 
+      if (menuItem.counter > 0) {
+        const counter = document.createElement("span");
+        counter.classList.add("pageMenuMainItemCounter", "badge", "badgeUpdate");
+        counter.setAttribute("aria-hidden", "true");
+        counter.textContent = menuItem.counter.toString();
+
+        link.append(counter);
+      }
+
       listItem.append(link);
     } else {
       const label = document.createElement("a");
@@ -198,16 +207,6 @@ export class PageMenuMain implements PageMenuProvider {
       listItem.append(label);
     }
 
-    if (menuItem.counter > 0) {
-      const counter = document.createElement("span");
-      counter.classList.add("pageMenuMainItemCounter", "badge", "badgeUpdate");
-      counter.setAttribute("aria-hidden", "true");
-      counter.textContent = menuItem.counter.toString();
-
-      listItem.classList.add("pageMenuMainItemOutstandingItems");
-      listItem.append(counter);
-    }
-
     if (menuItem.children.length) {
       listItem.classList.add("pageMenuMainItemExpandable");
 

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 ef0a16cf43540d5ffd22ce61ed1c45687e03a649..af3458708edbcf934f3f9db7d65ccd734d1bfec1 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
@@ -136,6 +136,13 @@ define(["require", "exports", "tslib", "./Container", "../../../Language", "../.
                 if (menuItem.active) {
                     link.setAttribute("aria-current", "page");
                 }
+                if (menuItem.counter > 0) {
+                    const counter = document.createElement("span");
+                    counter.classList.add("pageMenuMainItemCounter", "badge", "badgeUpdate");
+                    counter.setAttribute("aria-hidden", "true");
+                    counter.textContent = menuItem.counter.toString();
+                    link.append(counter);
+                }
                 listItem.append(link);
             }
             else {
@@ -152,14 +159,6 @@ define(["require", "exports", "tslib", "./Container", "../../../Language", "../.
                 label.setAttribute("aria-hidden", "true");
                 listItem.append(label);
             }
-            if (menuItem.counter > 0) {
-                const counter = document.createElement("span");
-                counter.classList.add("pageMenuMainItemCounter", "badge", "badgeUpdate");
-                counter.setAttribute("aria-hidden", "true");
-                counter.textContent = menuItem.counter.toString();
-                listItem.classList.add("pageMenuMainItemOutstandingItems");
-                listItem.append(counter);
-            }
             if (menuItem.children.length) {
                 listItem.classList.add("pageMenuMainItemExpandable");
                 const menuId = Util_1.default.getUniqueId();

diff --git a/wcfsetup/install/files/style/ui/pageMenu.scss b/wcfsetup/install/files/style/ui/pageMenu.scss
index f8e90c33e5651cd90aa9f8d43d5394d3e907f0e3..6e56a0d4554145b00518560dc0681abf68ff0759 100644 (file)
--- a/wcfsetup/install/files/style/ui/pageMenu.scss
+++ b/wcfsetup/install/files/style/ui/pageMenu.scss
@@ -68,27 +68,11 @@
        position: relative;
 }
 
-.pageMenuMainItemOutstandingItems {
-       grid-template-areas: "item counter";
-       grid-template-columns: auto min-content;
-
-       &:not(.pageMenuMainItemExpandable) {
-               padding-right: 10px;
-       }
-}
-
 .pageMenuMainItemExpandable {
        grid-template-areas:
                "item button"
                "list list";
        grid-template-columns: auto 44px;
-
-       &.pageMenuMainItemOutstandingItems {
-               grid-template-areas:
-                       "item counter button"
-                       "list list    list";
-               grid-template-columns: auto min-content 44px;
-       }
 }
 
 .pageMenuMainItemLabel,
@@ -111,7 +95,9 @@
 
 .pageMenuMainItemCounter {
        align-self: center;
+       border-radius: 4px;
        grid-area: counter;
+       margin-left: 8px;
        white-space: nowrap;
 }