feat: add responsive layout with media queries for mobile and tablet breakpoints

Implement responsive design adjustments across admin, auth, base, feed, gists, landing, messages, news, notifications, post, profile, projects, and services CSS files with collapsible sidebar, touch-friendly navigation, and reordered content sections for screen widths below 768px and 480px. Add hamburger menu toggle, mobile overlay panel, and back button for messages view in Application.js.
2026-05-15 23:34:45 +00:00
parent e304119d76
commit 1b4a60619e
16 changed files with 715 additions and 4 deletions
@@ -8,6 +8,8 @@ class Application {
        this.initMessageSearch();
        this.initNotificationDismiss();
        this.initProfileEdit();
+        this.initMobileNav();
+        this.initMessagesResponsive();

        this.initFormDisable();
        this.initContentRenderer();
@@ -25,6 +27,89 @@ class Application {
        this.initAttachmentManagers();
    }

+    initMessagesResponsive() {
+        const list = document.querySelector(".messages-list");
+        const main = document.querySelector(".messages-main");
+        const backBtn = document.getElementById("messages-back-btn");
+        if (!list || !main) return;
+
+        const isMobile = () => window.innerWidth <= 768;
+
+        if (isMobile()) {
+            if (window.location.search.includes("with_uid=")) {
+                list.classList.add("hide");
+                main.classList.remove("hide");
+            } else {
+                list.classList.remove("hide");
+                main.classList.add("hide");
+            }
+        }
+
+        if (backBtn) {
+            backBtn.addEventListener("click", () => {
+                if (!isMobile()) return;
+                list.classList.remove("hide");
+                main.classList.add("hide");
+                window.history.replaceState(null, "", "/messages");
+            });
+        }
+
+        list.querySelectorAll(".conversation-item").forEach((item) => {
+            item.addEventListener("click", (e) => {
+                if (!isMobile()) return;
+                list.classList.add("hide");
+                main.classList.remove("hide");
+            });
+        });
+
+        const mq = window.matchMedia("(max-width: 768px)");
+        mq.addEventListener("change", () => {
+            if (!isMobile()) {
+                list.classList.remove("hide");
+                main.classList.remove("hide");
+            }
+        });
+    }
+
+    initMobileNav() {
+        const btn = document.getElementById("hamburger-btn");
+        const panel = document.getElementById("mobile-panel");
+        const overlay = document.getElementById("mobile-overlay");
+        if (!btn || !panel || !overlay) return;
+
+        const close = () => {
+            panel.classList.remove("open");
+            overlay.style.display = "none";
+            btn.innerHTML = "\u2630";
+        };
+
+        const open = () => {
+            panel.classList.add("open");
+            overlay.style.display = "block";
+            btn.innerHTML = "\u2715";
+        };
+
+        btn.addEventListener("click", () => {
+            if (panel.classList.contains("open")) {
+                close();
+            } else {
+                open();
+            }
+        });
+
+        overlay.addEventListener("click", close);
+
+        panel.querySelectorAll("a").forEach((link) => {
+            link.addEventListener("click", close);
+        });
+
+        document.addEventListener("keydown", (e) => {
+            if (e.key === "Escape" && panel.classList.contains("open")) {
+                close();
+            }
+        });
+    }
+
    loadCSS(href) {
        if (document.querySelector(`link[href="${href}"]`)) {
            return;