[TikiWiki-commits] [Git][tikiwiki/tiki][29.x] [ENH] Tiki-menu.js: Add mobile dropdown positioning for better viewport handling

Baraka Kinywa pushed to branch 29.x at Tiki Wiki CMS Groupware / Tiki


Commits:
56b6f376 by UshindiG at 2025-12-02T14:33:58+02:00
[ENH] Tiki-menu.js: Add mobile dropdown positioning for better viewport handling
---
* [ENH] Tiki-menu.js: Add mobile dropdown positioning for better viewport handling
---
* [ENH] tiki-js: Add mobile dropdown positioning for better viewport handling

See merge request tikiwiki/tiki!9145

(cherry picked from commit 218872dc361f3931be037be85451c58ab55fcbdc)

See merge request tikiwiki/tiki!9166

- - - - -


2 changed files:

- src/js/jquery-tiki/tiki-menu.js
- templates/modules/mod-quickadmin.tpl


Changes:

=====================================
src/js/jquery-tiki/tiki-menu.js
=====================================
@@ -27,4 +27,60 @@ $(function () {
         }
     });
 });
+
+/* Mobile dropdown positioning */
+(function ($) {
+    $(function () {
+        function positionDropdownMobile($menu, $toggle) {
+            if (window.innerWidth > 576) return;
+            if (!$menu.length || !$toggle.length) return;
+
+            var wasHidden = false;
+            if (!$menu.is(":visible")) {
+                wasHidden = true;
+                $menu.addClass("show");
+            }
+
+            var rect = $toggle[0].getBoundingClientRect();
+            var viewportW = window.innerWidth;
+            var viewportH = window.innerHeight;
+
+            var menuMaxW = Math.min(viewportW - 16, Math.max(200, $menu.outerWidth()));
+            $menu.css({ position: "fixed", "box-sizing": "border-box", width: menuMaxW + "px" });
+
+            var menuH = Math.min($menu.outerHeight(), viewportH - 16);
+            $menu.css("max-height", menuH + "px");
+
+            var topBelow = rect.bottom + 8;
+            var topAbove = rect.top - menuH - 8;
+            var top = topBelow + menuH <= viewportH - 8 ? topBelow : Math.max(8, topAbove);
+
+            var left = Math.round(rect.left + (rect.width - menuMaxW) / 2);
+            left = Math.max(8, Math.min(left, viewportW - menuMaxW - 8));
+
+            $menu.css({ top: top + "px", left: left + "px", right: "auto", transform: "none", zIndex: 1060 });
+
+            if (wasHidden) {
+                $menu.removeClass("show");
+            }
+        }
+
+        $(document).on("shown.bs.dropdown", "#quickadmin .dropdown, .siteloginbar_popup", function () {
+            var $root = $(this);
+            var $toggle = $root.find('[data-bs-toggle="dropdown"]').first();
+            var $menu = $root.find(".dropdown-menu").first();
+            positionDropdownMobile($menu, $toggle);
+            $(window).on("resize._dropdownPos", function () {
+                positionDropdownMobile($menu, $toggle);
+            });
+        });
+
+        $(document).on("hidden.bs.dropdown", "#quickadmin .dropdown, .siteloginbar_popup", function () {
+            var $menu = $(this).find(".dropdown-menu").first();
+            $menu.css({ position: "", top: "", left: "", right: "", width: "", maxHeight: "", transform: "", zIndex: "" });
+            $(window).off("resize._dropdownPos");
+        });
+    });
+})(jQuery);
+
 // end of src/js/tiki-menu.js


=====================================
templates/modules/mod-quickadmin.tpl
=====================================
@@ -2,7 +2,7 @@
     {if $tiki_p_admin == "y"}
         <div id="quickadmin" class="nav justify-content-end flex-nowrap">
             {if $only_shortcuts neq 'y'}
-                <div class="nav-item prefs-history-dropdown">
+                <div class="nav-item dropdown prefs-history-dropdown">
                     {if ! $js}<ul><li>{/if}
                     <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" data-display="dynamic" data-flip="true" href="#" role="button">
                         {icon name="history"}



View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/56b6f376187d3cac4e0ca7da0793c327fbee544d

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/56b6f376187d3cac4e0ca7da0793c327fbee544d
You're receiving this email because of your account on gitlab.com.

_______________________________________________
TikiWiki-cvs mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs