@necrolab/dashboard 0.5.14 → 0.5.16

package/src/components/ui/Modal.vue

@@ -1,9 +1,9 @@
 <template>
-    <div class="modal-mask fixed inset-0 z-modal bg-overlay-dark backdrop-blur-xs flex pt-14 scrollable overflow-y-auto" role="dialog" @touchmove.stop>
-        <div class="component-modal mb-8 mobile-portrait:mb-16" ref="target">
+    <div class="modal-mask" role="dialog" aria-modal="true" @touchmove.stop>
+        <div class="modal-content" ref="target">
             <div class="modal-header">
                 <slot name="header" />
-                <button @click="ui.toggleModal()" class="btn-icon border-none hover:bg-dark-400">
+                <button @click="ui.toggleModal()" class="btn-icon border-none hover:bg-dark-400 ml-auto" aria-label="Close modal">
                     <CloseIcon />
                 </button>
             </div>
@@ -54,65 +54,106 @@ onClickOutside(target, (event) => {
     if (event.target.classList.contains("modal-mask")) ui.toggleModal();
 });
 </script>
-<style lang="scss" scoped>
+<style scoped>
 .modal-mask {
-    @apply w-screen duration-300 ease-in-out;
-    align-items: flex-start;
-    justify-content: center;
-    padding: 1rem;
+    @apply fixed left-0 top-0;
+    @apply flex w-screen overflow-y-auto;
+    @apply items-start justify-center;
+    @apply p-4 pt-14;
+    @apply duration-300 ease-in-out;
+    @apply z-modal-mask;
+
+    /* Background with opacity */
+    background-color: rgba(0, 0, 0, 0.85);
+    backdrop-filter: blur(8px);
+
+    /* Height with modern viewport units and fallback */
     height: 100dvh;
-    overflow-y: auto;
+
+    /* Touch handling for mobile */
     -webkit-overflow-scrolling: touch;
     touch-action: pan-y !important;
+}
 
-    @supports not (height: 100dvh) {
-        height: 100vh;
+@supports (height: 100dvh) {
+    .modal-mask {
+        height: 100dvh;
     }
 }
 
-.component-modal {
-    width: 640px;
-    overflow-y: visible;
-    @apply flex flex-col rounded-lg bg-dark-300 px-5 py-5;
+@supports not (height: 100dvh) {
+    .modal-mask {
+        height: 100vh;
+    }
+}
 
-    .modal-header {
-        @apply flex font-bold text-white;
+/* Tablet breakpoint */
+@media (max-width: 810px) {
+    .modal-mask {
+        @apply items-start justify-center;
+        @apply p-4 pt-12;
+        padding-bottom: 15rem !important;
+    }
+}
 
-        button {
-            @apply ml-auto;
-        }
+/* Mobile portrait breakpoint */
+@media (max-width: 480px) and (orientation: portrait) {
+    .modal-mask {
+        padding-bottom: 3rem !important;
     }
+}
 
-    .modal-body {
-        @apply flex flex-col pb-6 md:pb-4;
-        flex: 1;
+.modal-content {
+    @apply flex flex-col rounded-lg;
+    @apply bg-dark-400 px-5 py-5;
+    @apply w-160 mb-80;
+    @apply overflow-y-visible;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8),
+                0 0 0 1px rgba(255, 255, 255, 0.05);
+}
+
+/* Mobile breakpoint for modal-content */
+@media (max-width: 480px) {
+    .modal-content {
+        margin-bottom: 25rem;
     }
 }
 
+/* Tablet breakpoint for modal-content */
 @media (max-width: 810px) {
-    .modal-mask {
-        align-items: flex-start;
-        justify-content: center;
-        padding: 1rem;
-        padding-top: 3rem;
+    .modal-content {
+        width: calc(100vw - 2rem);
+        margin-bottom: 10rem;
     }
+}
 
-    .component-modal {
-        width: calc(100vw - 2rem);
-        margin-bottom: 3rem;
+/* Mobile portrait overrides */
+@media (max-width: 480px) and (orientation: portrait) {
+    .modal-content {
+        margin-bottom: 3rem !important;
+        max-height: none !important;
     }
+}
+
+.modal-header {
+    @apply flex font-bold text-white;
+}
 
+.modal-body {
+    @apply flex flex-col flex-1;
+}
+
+/* Tablet breakpoint for modal-body */
+@media (max-width: 810px) {
     .modal-body {
-        overflow-y: visible;
-        flex: 1;
-        min-height: 0;
+        @apply pb-16 overflow-y-visible min-h-0;
     }
 }
 
-/* iPhone portrait mode - extra spacing for create button */
+/* Mobile portrait breakpoint for modal-body */
 @media (max-width: 480px) and (orientation: portrait) {
-    .component-modal {
-        max-height: none;
+    .modal-body {
+        padding-bottom: 1rem !important;
     }
 }
 </style>

package/src/components/ui/Navbar.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="navbar" :class="{ 'z-max': menuOpen }">
-        <div :class="['component-container ios-wrapper flex items-center relative px-2 sm:px-3 lg:px-4', { 'ios-wrapper': landscapeIos }]">
+    <div class="navbar" :class="{ 'force-z': menuOpen }">
+        <div :class="['component-container ios-wrapper flex items-center relative px-3 lg:px-4', { 'ios-wrapper': landscapeIos }]">
             <router-link to="/">
                 <img src="@/assets/img/logo_trans.png" class="h-6 lg:h-8 mr-4 z-30 object-cover cursor-pointer" alt="Logo: Necro" />
             </router-link>
@@ -31,7 +31,7 @@
                 </li>
             </ul>
 
-            <button class="hidden lg:block ml-auto mr-4 smooth-hover" @click="logout()">
+            <button class="hidden lg:block ml-auto mr-4 smooth-hover" @click="logout()" aria-label="Logout">
                 <LogoutIcon />
             </button>
             <h4 v-if="ui.profile?.name" class="hidden lg:block text-white text-sm font-medium">
@@ -50,7 +50,7 @@
             <div v-else class="h-10 w-10 rounded-full hidden lg:block mx-4 bg-dark-400" />
             <CountryChooser class="hidden lg:block" />
 
-            <button class="flex lg:hidden ml-auto z-30" @click="toggleMenu">
+            <button class="flex lg:hidden ml-auto z-30" @click="toggleMenu" aria-label="Toggle navigation menu" :aria-expanded="menuOpen">
                 <MenuIcon />
             </button>
         </div>
@@ -85,7 +85,7 @@
                 </ul>
                 <CountryChooser class="mx-auto block landscape:hidden mb-auto" />
                 <div class="flex mx-auto items-center landscape:mb-0">
-                    <button class="mr-4" @click="logout()">
+                    <button class="mr-4" @click="logout()" aria-label="Logout">
                         <LogoutIcon />
                     </button>
                     <h4 class="text-white text-sm font-medium mr-4">
@@ -111,15 +111,19 @@
 </template>
 <style lang="scss" scoped>
 .navbar {
-    @apply border-b py-5 fixed w-full bg-dark-300/95 backdrop-blur border-dark-600;
+    @apply border-b py-5 fixed w-full;
     top: 0;
     left: 0;
     z-index: 1000;
+    background: theme('colors.dark.300 / 0.95');
+    backdrop-filter: blur(23px);
+    -webkit-backdrop-filter: blur(23px);
+    border-color: theme('colors.border');
 
     // Consistent padding base
     padding-top: 1.25rem;
     padding-bottom: 1.25rem;
-    
+
     // Only add safe area top padding for portrait notch devices
     @supports (padding-top: env(safe-area-inset-top)) {
         @media (max-device-width: 430px) and (orientation: portrait) {
@@ -135,7 +139,7 @@
         left: 0;
         right: 0;
         height: 100px;
-        background: oklch(0.1822 0 0);
+        background: theme('colors.dark.300');
         backdrop-filter: blur(8px);
         -webkit-backdrop-filter: blur(8px);
         z-index: -1;
@@ -144,27 +148,38 @@
     ul {
         @apply gap-x-4;
 
+        // Global SVG normalization - force all icons to be identical
+        svg {
+            width: 20px !important;
+            height: 20px !important;
+            display: block !important;
+            flex-shrink: 0 !important;
+            box-sizing: border-box !important;
+        }
+
         li a {
-            @apply flex text-white text-sm items-center rounded-lg h-10 border-b-2 border-transparent;
+            @apply flex text-white text-sm items-center rounded-lg;
+            height: 40px;
+            border: 1px solid transparent;
             border-left: 3px solid transparent;
             transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
             position: relative;
 
             svg {
-                @apply mr-2 w-5 h-5;
+                @apply mr-2;
             }
 
             &.router-link-exact-active {
-                border-bottom: 2px solid oklch(0.72 0.15 145);
-                color: oklch(0.72 0.15 145);
-                background: oklch(0.72 0.15 145 / 0.08);
+                border-bottom: 2px solid theme('colors.primary');
+                color: theme('colors.primary');
+                background: theme('colors.primary / 0.08');
                 margin-bottom: -2px;
 
                 // Mobile styling
                 @media (max-width: 1023px) {
-                    border: 2px solid oklch(0.72 0.15 145);
-                    color: oklch(0.72 0.15 145);
-                    background: oklch(0.72 0.15 145 / 0.08);
+                    border: 2px solid theme('colors.primary');
+                    color: theme('colors.primary');
+                    background: theme('colors.primary / 0.08');
                     padding: 0.5rem 0.75rem;
                     border-radius: 0.5rem;
                     margin-bottom: 0;
@@ -175,26 +190,35 @@
         // Desktop mode (lg to xl): icon-only view with perfect centering
         @media (min-width: 1024px) and (max-width: 1279px) {
             li a {
-                @apply w-10 h-10 flex items-center justify-center;
-                padding: 0;
+                width: 40px;
+                height: 40px;
+                padding: 0 !important;
+                display: flex !important;
+                align-items: center !important;
+                justify-content: center !important;
                 position: relative;
 
                 // Hide text completely in icon-only mode
                 span {
-                    display: none;
+                    display: none !important;
                 }
 
                 svg {
-                    @apply m-0 absolute top-1/2 left-1/2;
+                    margin: 0 !important;
+                    padding: 0 !important;
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
                     transform: translate(-50%, -50%);
-                    padding: 0;
                 }
 
                 &.router-link-exact-active {
-                    @apply border-2 w-10 h-10 rounded-lg;
-                    border-color: oklch(0.72 0.15 145);
-                    color: oklch(0.72 0.15 145);
-                    background: oklch(0.72 0.15 145 / 0.08);
+                    border: 2px solid theme('colors.primary') !important;
+                    color: theme('colors.primary') !important;
+                    background: theme('colors.primary / 0.08') !important;
+                    border-radius: 0.5rem !important;
+                    width: 40px !important;
+                    height: 40px !important;
                 }
             }
         }
@@ -202,7 +226,8 @@
         // XL and above: full width with text
         @media (min-width: 1280px) {
             li a {
-                @apply px-4 h-10;
+                @apply px-4;
+                height: 40px;
 
                 svg {
                     @apply mr-2;
@@ -212,6 +237,9 @@
     }
 }
 
+.force-z {
+    z-index: 20000;
+}
 
 .mobile-menu {
     margin-top: 0;
@@ -231,17 +259,17 @@
 
 .version-badge {
     @apply flex items-center gap-x-2 px-3 py-2 rounded-lg border;
-    background: oklch(0.2046 0 0);
-    border-color: oklch(0.2809 0 0);
+    background: theme('colors.bg-elevated');
+    border-color: theme('colors.dark.550');
 
     .version-label {
         @apply text-xs font-medium;
-        color: oklch(0.65 0 0);
+        color: theme('colors.text-muted');
     }
 
     .version-number {
         @apply text-xs font-bold;
-        color: oklch(0.72 0.15 145);
+        color: theme('colors.primary');
     }
 }
 </style>
@@ -263,20 +291,11 @@ import { useUIStore } from "@/stores/ui";
 import router from "@/router/index";
 import CountryChooser from "@/components/ui/controls/CountryChooser.vue";
 import { sendLogout } from "@/stores/requests";
+import { useDeviceDetection } from "@/composables/useDeviceDetection";
 
 const landscapeIos = ref(false);
 
-function isIOS() {
-    if (/iPad|iPhone|iPod/.test(navigator.platform)) {
-        return true;
-    } else {
-        return navigator.maxTouchPoints && navigator.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform);
-    }
-}
-
-function isIpadOS() {
-    return navigator.maxTouchPoints && navigator.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform);
-}
+const { isIOS, isIpadOS } = useDeviceDetection();
 
 window.matchMedia("(orientation: portrait)").addEventListener("change", (e) => {
     if (!e.matches && isIOS() && !isIpadOS()) landscapeIos.value = true;

package/src/components/ui/ReadonlyFieldsSection.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="mt-6 grid grid-cols-12 gap-3 pt-4 border-t border-dark-550">
+        <div v-if="data.tags && data.tags.length > 0" class="col-span-6">
+            <label class="flex items-center mb-2 text-light-200 font-medium">Tags</label>
+            <div class="flex gap-2 flex-wrap">
+                <TagLabel v-for="tag in data.tags" :key="tag" :text="tag" />
+            </div>
+        </div>
+        <div class="col-span-6">
+            <label class="flex items-center mb-2 text-light-200 font-medium">Status</label>
+            <div class="flex items-center gap-3 h-10">
+                <StatusBadge :enabled="data.enabled" size="large" />
+                <span class="text-sm font-medium" :class="data.enabled ? 'text-green-400' : 'text-red-400'">
+                    {{ data.enabled ? 'Enabled' : 'Disabled' }}
+                </span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import StatusBadge from "@/components/ui/StatusBadge.vue";
+import TagLabel from "@/components/Editors/TagLabel.vue";
+
+defineProps({
+    data: {
+        type: Object,
+        required: true
+    }
+});
+</script>