Layout fixad

2025-06-13 10:41:00 +02:00
parent f71be26ae4
commit 6a43435950
4 changed files with 200 additions and 90 deletions
--- a/Aberwyn/Properties/launchSettings.json
+++ b/Aberwyn/Properties/launchSettings.json
@@ -14,7 +14,7 @@
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
-      "applicationUrl": "https://localhost:7290;http://localhost:5290"
+      "applicationUrl": "https://localhost:7290;http://localhost:5290;http://0.0.0.0:5000"
    },
  "IIS Express": {
    "commandName": "IISExpress",
--- a/Aberwyn/Views/Shared/_Layout.cshtml
+++ b/Aberwyn/Views/Shared/_Layout.cshtml
@@ -50,9 +50,9 @@
    @if (User.IsInRole("Chef"))
    {
        <li class="dropdown">
-            <button class="dropdown-toggle" type="button" tabindex="0">
+            <a href="#" class="dropdown-toggle" role="button" tabindex="0">
                <i class="fas fa-list"></i> Kök <i class="fas fa-caret-down"></i>
-            </button>
+            </a>
            <ul class="dropdown-menu">
                <li><a asp-controller="FoodMenu" asp-action="Veckomeny">Planera Veckomeny</a></li>
                <li><a asp-controller="FoodMenu" asp-action="PizzaAdmin">Pizza Admin</a></li>
@@ -63,9 +63,9 @@
    @if (User.IsInRole("Admin"))
    {
        <li class="dropdown">
-            <button class="dropdown-toggle" type="button" tabindex="0">
+            <a href="#" class="dropdown-toggle" role="button" tabindex="0">
                <i class="fas fa-cog"></i> Admin <i class="fas fa-caret-down"></i>
-            </button>
+            </a>
            <ul class="dropdown-menu">
                <li><a asp-controller="Admin" asp-action="Index">Adminpanel</a></li>
                <li><a asp-controller="Admin" asp-action="Todo">Todo</a></li>
@@ -84,48 +84,8 @@
            @RenderSection("Scripts", required: false)
        </main>
    </div>
-
+    <div id="global-dropdown-container" style="position: relative; z-index: 10000;"></div>
    <script src="~/js/site.js" asp-append-version="true"></script>
-<script>
-document.addEventListener("DOMContentLoaded", () => {
-    const dropdowns = document.querySelectorAll(".dropdown");
-
-    dropdowns.forEach(dropdown => {
-        const toggle = dropdown.querySelector(".dropdown-toggle");
-        const menu = dropdown.querySelector(".dropdown-menu");
-
-        toggle.addEventListener("click", e => {
-            e.preventDefault();
-            e.stopPropagation();
-            const isOpen = dropdown.classList.contains("open");
-
-            // Stäng alla andra först
-            document.querySelectorAll(".dropdown.open").forEach(d => {
-                if (d !== dropdown) d.classList.remove("open");
-            });
-
-            dropdown.classList.toggle("open", !isOpen);
-
-            if (!isOpen) {
-                const rect = toggle.getBoundingClientRect();
-                menu.style.position = "fixed";
-                menu.style.top = rect.bottom + "px";
-                menu.style.left = rect.left + "px";
-                menu.style.zIndex = 3000;
-            } else {
-                menu.style.top = "";
-                menu.style.left = "";
-            }
-        });
-    });
-
-    // Klick utanför stänger alla dropdowns
-    document.addEventListener("click", () => {
-        document.querySelectorAll(".dropdown.open").forEach(d => d.classList.remove("open"));
-    });
-});
-</script>
-

 </body>
 </html>
--- a/Aberwyn/wwwroot/css/site.css
+++ b/Aberwyn/wwwroot/css/site.css
@@ -1,5 +1,5 @@
 /* ==========================================================================
-   HEADER <20> LEWEL DESIGN (utan meny)
+   HEADER LEWEL DESIGN (utan meny)
   ========================================================================== */
 .top-bar {
    display: flex;
@@ -151,21 +151,17 @@ body {
    flex-grow: 1;
    background-color: #223344;
    width: 100%; /* force full width */
-    max-width: unset; 
-    position: relative; 
+    max-width: unset;
+    position: relative;
    z-index: 0;
+    overflow: visible !important;
 }

-
-
-
-
-
 .main-panel {
    flex: 1;
    background: linear-gradient(to bottom right, #f9fafb, #e2e8f0);
    border-radius: 0 0 10px 10px;
-    overflow: hidden;
+    overflow: visible;
    padding: 0px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
@@ -175,6 +171,8 @@ body {
    font-size: 16px;
    line-height: 1.7;
    margin-top: 0;
+    position: static !important;
+    z-index: auto !important;
 }

 /* ==========================================================================
@@ -227,47 +225,38 @@ body {
    top: 54px;
    left: 0;
    right: 0;
-    z-index: 2000; /* Högt nog för att ligga över allt annat */
+    z-index: 1000;
    background-color: #f3f4f6;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    padding: 5px 8px;
    font-size: 13px;
-    overflow-x: auto; /* behåll för horisontell scroll */
-    overflow-y: visible; /* tillåt dropdown att spilla ut */
+    overflow-x: auto;
+    overflow-y: visible;
+    overflow: visible !important;
+    -webkit-overflow-scrolling: touch;
 }

-
-
-
@media (min-width: 769px) {
-    .main-nav {
-        position: sticky;
-        top: 54px;
-        left: 0;
-        right: 0;
-        z-index: 1001;
-    }
-
-    .main-panel {
-        margin-top: 0px; /* justera beroende på hur hög nav-baren är */
+    .nav-list-horizontal {
+        overflow: visible;
    }
 }
-
-
 .nav-list-horizontal {
    display: flex;
    flex-wrap: nowrap;
-    gap: 5px 0px 0px 0px;
-    margin: 5px 0px 0px 0px;
+    gap: 5px;
+    margin: 5px 0 0 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
-    /* Viktigt: ta bort all overflow här */
-    overflow: visible;
    position: relative;
    z-index: 1;
+    overflow-y: visible;
+    -webkit-overflow-scrolling: touch;
 }
-
+    .nav-list-horizontal > li {
+        position: relative;
+    }
    .nav-list-horizontal li a {
        text-decoration: none;
        color: #1F2C3C;
@@ -288,15 +277,8 @@ body {
 /* ==========================================================================
   RESPONSIVT
   ========================================================================== */
-@media (max-width: 768px) {
-    .page-content {
-        flex-direction: column;
-    }

-    .sidebar {
-        width: 100%;
-    }
-}
+

 /* ==========================================================================
   Dropdown
@@ -323,6 +305,7 @@ body {
    height: 100%; /* viktigt för vertikal alignment */
    user-select: none;
    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
 }

    .dropdown-toggle:hover {
@@ -333,7 +316,7 @@ body {
    position: absolute;
    top: 100%;
    left: 0;
-    transform: translateY(4px); /* lite spacing nedåt */
+    transform: translateY(4px);
    background-color: #ffffff;
    border: 1px solid #ccc;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
@@ -341,14 +324,12 @@ body {
    display: none;
    flex-direction: column;
    min-width: 180px;
-    z-index: 3000;
+    z-index: 1001;
    padding: 4px 0;
    font-size: 14px;
    max-width: 90vw;
-    overflow-wrap: break-word;
 }

-
 .dropdown.open .dropdown-menu {
    display: flex;
 }
@@ -368,3 +349,83 @@ body {
        background-color: #f0f0f0;
    }

+
+
+@media (max-width: 768px) {
+    html, body {
+        overflow-x: hidden;
+        overscroll-behavior-x: contain;
+    }
+
+    .main-panel {
+        position: relative !important;
+        z-index: 1 !important;
+    }
+
+    .main-nav {
+        position: sticky;
+        top: 0;
+        z-index: 1000;
+        overflow-x: auto;
+        overflow-y: visible;
+        -webkit-overflow-scrolling: touch;
+        background-color: #f3f4f6;
+        padding: 5px 8px;
+        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+    }
+
+    .nav-list-horizontal {
+        display: flex;
+        overflow-x: auto;
+        overflow-y: hidden;
+        white-space: nowrap;
+        -webkit-overflow-scrolling: touch;
+        padding: 0;
+        margin: 0;
+        gap: 5px;
+        list-style: none;
+    }
+
+    .dropdown-menu {
+        position: fixed !important;
+        right: 12px;
+        background-color: #ffffff;
+        border: 1px solid #ccc;
+        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
+        border-radius: 8px;
+        display: none;
+        flex-direction: column;
+        padding: 4px 0;
+        font-size: 14px;
+        z-index: 99999;
+        width: max-content;
+        max-width: 90vw;
+        min-width: 160px; /* valfritt, för att undvika att det blir för smalt */
+    }
+
+    .dropdown.open .dropdown-menu {
+        display: flex !important;
+    }
+
+    .dropdown,
+    .auth-menu,
+    .auth-links {
+        position: relative;
+        z-index: 99998;
+    }
+
+    .dropdown-menu li {
+        list-style: none;
+    }
+
+        .dropdown-menu li a {
+            padding: 8px 12px;
+            color: #1F2C3C;
+            text-decoration: none;
+            font-size: 13px;
+        }
+
+            .dropdown-menu li a:hover {
+                background-color: #f0f0f0;
+            }
+}
--- a/Aberwyn/wwwroot/js/site.js
+++ b/Aberwyn/wwwroot/js/site.js
@@ -13,6 +13,95 @@ if ('serviceWorker' in navigator) {
            });
    });
 }
+document.addEventListener("DOMContentLoaded", () => {
+    const dropdowns = document.querySelectorAll(".dropdown");
+    const globalContainer = document.getElementById("global-dropdown-container");
+
+    dropdowns.forEach((dropdown, index) => {
+        const toggle = dropdown.querySelector(".dropdown-toggle");
+        const menu = dropdown.querySelector(".dropdown-menu");
+
+        if (!toggle || !menu) return;
+
+        let originalParent = dropdown;
+
+        toggle.addEventListener("click", e => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            const isOpen = dropdown.classList.contains("open");
+
+            // Stäng andra
+            document.querySelectorAll(".dropdown.open").forEach(d => {
+                d.classList.remove("open");
+                const m = d.querySelector(".dropdown-menu");
+                if (m && d !== dropdown) {
+                    d.appendChild(m);
+                    resetStyles(m);
+                }
+            });
+
+            dropdown.classList.toggle("open", !isOpen);
+
+            if (!isOpen && window.innerWidth <= 768) {
+                const rect = toggle.getBoundingClientRect();
+                const scrollTop = window.scrollY || document.documentElement.scrollTop;
+                const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+
+                let top = rect.bottom + scrollTop - 20;
+                let left = rect.left + scrollLeft;
+                const vw = window.innerWidth;
+                const mw = menu.offsetWidth;
+
+                if (left + mw > vw) {
+                    left = vw - mw - 10;
+                }
+                if (left < 10) left = 10;
+
+                // Flytta till global container
+                globalContainer.appendChild(menu);
+
+                Object.assign(menu.style, {
+                    position: "fixed",
+                    top: `${top}px`,
+                    left: `${left}px`,
+                    zIndex: "99999",
+                    display: "flex"
+                });
+            } else {
+                // Återställ till original
+                originalParent.appendChild(menu);
+                resetStyles(menu);
+            }
+        });
+    });
+
+    document.addEventListener("click", () => {
+        document.querySelectorAll(".dropdown.open").forEach(d => {
+            d.classList.remove("open");
+            const m = d.querySelector(".dropdown-menu");
+            if (m) {
+                d.appendChild(m);
+                resetStyles(m);
+            }
+        });
+
+        // Töm extra container
+        if (globalContainer) globalContainer.innerHTML = '';
+    });
+
+    function resetStyles(menu) {
+        Object.assign(menu.style, {
+            position: "",
+            top: "",
+            left: "",
+            zIndex: "",
+            display: ""
+        });
+    }
+});
+
+

 async function subscribeToPush() {
    const registration = await navigator.serviceWorker.ready;