Update the position of the search bar and drop-down menus on window resize

See https://www.woltlab.com/community/thread/308171-ausrichtung-der-men%C3%BCpunkte-bei-%C3%A4nderung-der-fenstergr%C3%B6%C3%9Fe/

diff --git a/ts/WoltLabSuite/Core/Ui/Dropdown/Simple.ts b/ts/WoltLabSuite/Core/Ui/Dropdown/Simple.ts
index 77fab99ff3e7002b474d6ab6fba6e42bbd8a252b..14358aa69d453c3b7bb087929ff7b514f937fc73 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Dropdown/Simple.ts
+++ b/ts/WoltLabSuite/Core/Ui/Dropdown/Simple.ts
@@ -77,6 +77,19 @@ function onScroll() {
   });
 }
 
+/**
+ * Recalculates drop-down positions on page resize.
+ */
+function onWindowResize() {
+  _dropdowns.forEach((dropdown, containerId) => {
+    if (!dropdown.classList.contains("dropdownOpen")) {
+      return;
+    }
+
+    UiDropdownSimple.setAlignment(dropdown, _menus.get(containerId)!);
+  });
+}
+
 /**
  * Notifies callbacks on status change.
  */
@@ -379,6 +392,7 @@ const UiDropdownSimple = {
     DomChangeListener.add("WoltLabSuite/Core/Ui/Dropdown/Simple", () => UiDropdownSimple.initAll());
 
     document.addEventListener("scroll", onScroll);
+    window.addEventListener("resize", () => onWindowResize(), { passive: true });
 
     // expose on window object for backward compatibility
     window.bc_wcfSimpleDropdown = this;

diff --git a/ts/WoltLabSuite/Core/Ui/Search.ts b/ts/WoltLabSuite/Core/Ui/Search.ts
index 0c705bca0d8b16d6cd2119f537730c1e79bebfd9..92ecc093ea1c6e0ae894d01845bdd18fec7f3142 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Search.ts
+++ b/ts/WoltLabSuite/Core/Ui/Search.ts
@@ -75,6 +75,20 @@ function initSearchBar(): void {
 
     _pageHeaderSearchMobile?.setAttribute("aria-expanded", "false");
   });
+
+  window.addEventListener(
+    "resize",
+    () => {
+      if (_isMobile || !_pageHeader.classList.contains("searchBarOpen")) {
+        return;
+      }
+
+      UiAlignment.set(_pageHeaderSearch, _topMenu, {
+        horizontal: "right",
+      });
+    },
+    { passive: true },
+  );
 }
 
 function initMobileSearch(): void {

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Simple.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Simple.js
index 51dc008c730ef2897c26ddfeac2f68739f44370c..6bf00cfc4ff78e18acdabe2212fbb1ed8f99b05d 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Simple.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Simple.js
@@ -75,6 +75,17 @@ define(["require", "exports", "tslib", "../../CallbackList", "../../Core", "../.
             }
         });
     }
+    /**
+     * Recalculates drop-down positions on page resize.
+     */
+    function onWindowResize() {
+        _dropdowns.forEach((dropdown, containerId) => {
+            if (!dropdown.classList.contains("dropdownOpen")) {
+                return;
+            }
+            UiDropdownSimple.setAlignment(dropdown, _menus.get(containerId));
+        });
+    }
     /**
      * Notifies callbacks on status change.
      */
@@ -322,6 +333,7 @@ define(["require", "exports", "tslib", "../../CallbackList", "../../Core", "../.
             CloseOverlay_1.default.add("WoltLabSuite/Core/Ui/Dropdown/Simple", () => UiDropdownSimple.closeAll());
             Listener_1.default.add("WoltLabSuite/Core/Ui/Dropdown/Simple", () => UiDropdownSimple.initAll());
             document.addEventListener("scroll", onScroll);
+            window.addEventListener("resize", () => onWindowResize(), { passive: true });
             // expose on window object for backward compatibility
             window.bc_wcfSimpleDropdown = this;
         },

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js
index bd561ab55afc42e53be82c8cb5c4c9b05402b884..8e644b5c092072f7719ffb1cf5884b905a4e24e2 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js
@@ -68,6 +68,14 @@ define(["require", "exports", "tslib", "../Event/Handler", "./Alignment", "./Clo
             closeSearch();
             _pageHeaderSearchMobile === null || _pageHeaderSearchMobile === void 0 ? void 0 : _pageHeaderSearchMobile.setAttribute("aria-expanded", "false");
         });
+        window.addEventListener("resize", () => {
+            if (_isMobile || !_pageHeader.classList.contains("searchBarOpen")) {
+                return;
+            }
+            UiAlignment.set(_pageHeaderSearch, _topMenu, {
+                horizontal: "right",
+            });
+        }, { passive: true });
     }
     function initMobileSearch() {
         const searchButton = document.getElementById("pageHeaderSearchMobile");