@necrolab/dashboard 0.4.39 → 0.4.41

package/src/views/Login.vue

@@ -1,11 +1,11 @@
 <template>
-    <div class="flex flex-col justify-center mt-20" v-once>
-        <div class="mx-auto flex w-auto rounded-xl mb-8">
-            <img src="@/assets/img/logo_trans.png" class="h-14 mr-4 z-30 object-cover" alt="Logo: Necro" />
-        </div>
-        <h2 class="text-3xl text-white text-center font-bold mb-4">Login</h2>
+    <div class="login-container" v-once>
+        <div class="login-card">
+            <div class="flex justify-center mb-8">
+                <img src="@/assets/img/logo_trans.png" class="h-16 object-cover" alt="Logo: Necro" />
+            </div>
+            <h2 class="text-l text-white text-center font-bold mb-6">Please login to proceed</h2>
 
-        <div class="login">
             <LoginForm />
         </div>
     </div>
@@ -14,14 +14,136 @@
 import LoginForm from "@/components/Auth/LoginForm.vue";
 </script>
 <style lang="scss" scoped>
-.login {
-    //   @apply m-auto;
-    @media (min-width: 900px) {
-        width: 400px;
-        @apply m-auto;
+.login-container {
+    @apply flex flex-col items-center justify-center min-h-screen px-4;
+    padding-top: 5vh;
+    padding-bottom: 20vh;
+
+    // Portrait mobile devices
+    @media (max-width: 480px) and (orientation: portrait) {
+        padding-top: 7vh;
+        padding-bottom: 10vh;
+        @apply px-4;
     }
-    @media (max-width: 899px) {
+
+    // Landscape mobile devices
+    @media (max-width: 896px) and (orientation: landscape) and (max-height: 500px) {
+        padding-top: 5vh;
+        padding-bottom: 5vh;
         @apply px-6;
     }
+
+    // Tablets portrait
+    @media (min-width: 481px) and (max-width: 768px) and (orientation: portrait) {
+        padding-top: 8vh;
+        padding-bottom: 15vh;
+        @apply px-8;
+    }
+
+    // Tablets landscape
+    @media (min-width: 481px) and (max-width: 1024px) and (orientation: landscape) {
+        padding-top: 4vh;
+        padding-bottom: 10vh;
+        @apply px-12;
+    }
+
+    // Desktop
+    @media (min-width: 1025px) {
+        padding-top: 8vh;
+        padding-bottom: 22vh;
+    }
+
+    // Very short screens (landscape phones, short laptops)
+    @media (max-height: 600px) {
+        padding-top: 3vh;
+        padding-bottom: 3vh;
+    }
+
+    // Very tall screens
+    @media (min-height: 900px) {
+        padding-top: 10vh;
+        padding-bottom: 30vh;
+    }
+}
+
+.login-card {
+    @apply bg-dark-400 border border-dark-650 rounded-lg shadow-xl;
+    backdrop-filter: blur(10px);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+    width: 100%;
+    max-width: 420px;
+    padding: 2rem;
+
+    // Small mobile devices
+    @media (max-width: 380px) {
+        max-width: 340px;
+        padding: 1.5rem;
+        @apply rounded-md;
+    }
+
+    // Large mobile devices
+    @media (min-width: 381px) and (max-width: 480px) {
+        max-width: 380px;
+        padding: 1.75rem;
+    }
+
+    // Tablets and up
+    @media (min-width: 481px) {
+        max-width: 420px;
+        padding: 2rem;
+    }
+
+    // Landscape mobile - make card more compact
+    @media (max-height: 500px) and (orientation: landscape) {
+        padding: 1.25rem;
+
+        h2 {
+            @apply text-xl mb-4;
+        }
+
+        .flex.justify-center {
+            @apply mb-4;
+
+            img {
+                @apply h-12;
+            }
+        }
+    }
+
+    // Very small screens (iPhone SE, etc.)
+    @media (max-width: 320px) {
+        max-width: 300px;
+        padding: 1.25rem;
+
+        h2 {
+            @apply text-lg;
+        }
+
+        img {
+            @apply h-12;
+        }
+    }
+}
+
+// Logo responsive sizing
+.login-card img {
+    @media (max-width: 480px) {
+        @apply h-14;
+    }
+
+    @media (max-height: 500px) and (orientation: landscape) {
+        @apply h-10;
+    }
+}
+
+// Title responsive sizing
+.login-card h2 {
+    @media (max-width: 480px) {
+        @apply text-xl mb-4;
+    }
+
+    @media (max-height: 500px) and (orientation: landscape) {
+        @apply text-lg mb-3;
+    }
 }
 </style>

package/tailwind.config.js

@@ -67,7 +67,7 @@ export default {
                 900: "#111827"
             },
             accent: {
-                blue: "#5d7cc0",
+                blue: "#6b7a9a",
                 purple: "#b794c0", 
                 pink: "#d16d9e",
                 orange: "#d4976e",

package/vite.config.js

@@ -7,6 +7,7 @@ const pkg = JSON.parse(readFileSync("./package.json", "utf-8"));
 
 // https://vitejs.dev/config/
 export default defineConfig({
+    cacheDir: './node_modules/.vite',
     build: {
         rollupOptions: {
             output: {
@@ -66,6 +67,31 @@ export default defineConfig({
         watch: {
             usePolling: false,
             interval: 1000
+        },
+        proxy: {
+            "/api": {
+                target: "http://localhost:8081",
+                changeOrigin: true,
+                secure: false,
+                configure: (proxy) => {
+                    proxy.on("error", (err, req, res) => {
+                        res.writeHead(503, {
+                            "Content-Type": "application/json"
+                        });
+                        res.end(JSON.stringify({ error: "Backend starting up, please wait..." }));
+                    });
+                }
+            },
+            "/ws": {
+                target: "ws://localhost:8081",
+                ws: true,
+                changeOrigin: true,
+                configure: (proxy) => {
+                    proxy.on("error", () => {
+                        // Silently handle WebSocket connection errors
+                    });
+                }
+            }
         }
     }
 });