From 65d46d925d71da2a854c2401db855a5d2fe57ed2 Mon Sep 17 00:00:00 2001
From: bigserver <git@seemsleg.it>
Date: Thu, 9 Apr 2026 08:31:02 +0200
Subject: [PATCH] Dashboard-Design stabilisiert und modernisiert

closes #28
---
 app/modules/dashboard/list.php | 108 ++++++++++++++++++++++-----------
 1 file changed, 74 insertions(+), 34 deletions(-)

diff --git a/app/modules/dashboard/list.php b/app/modules/dashboard/list.php
index f26ac56..ab38b81 100644
--- a/app/modules/dashboard/list.php
+++ b/app/modules/dashboard/list.php
@@ -1018,30 +1018,54 @@ foreach ($rackLinksByKey as $entry) {
 </script>
 
 <style>
+.dashboard {
+    max-width: 1400px;
+    margin: 0 auto;
+    display: grid;
+    gap: 18px;
+}
+
+.dashboard > h1,
+.dashboard > h2 {
+    margin: 0;
+    color: #1f2d44;
+}
+
 .stats-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 20px;
-    margin: 20px 0;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 14px;
+    margin: 0;
 }
 
 .dashboard-modules {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
     gap: 12px;
-    margin: 12px 0 20px;
+    margin: 0;
 }
 
 .dashboard-tile {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-    border: 1px solid #d7d7d7;
-    border-radius: 8px;
-    padding: 12px;
+    display: grid;
+    grid-template-columns: 34px 1fr;
+    gap: 12px;
+    align-items: start;
+    border: 1px solid #dbe4f3;
+    border-radius: 12px;
+    padding: 14px;
     text-decoration: none;
-    color: #222;
+    color: #1c2940;
     background: #fff;
+    box-shadow: 0 8px 24px rgba(18, 43, 79, 0.08);
+    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
+}
+
+.dashboard-tile:hover,
+.dashboard-tile:focus-visible {
+    transform: translateY(-2px);
+    border-color: #9bb7df;
+    box-shadow: 0 14px 32px rgba(18, 43, 79, 0.16);
+    outline: none;
 }
 
 .dashboard-icon {
@@ -1064,67 +1088,79 @@ foreach ($rackLinksByKey as $entry) {
 
 .dashboard-content p {
     margin: 0;
-    font-size: 0.85rem;
-    color: #444;
+    font-size: 0.9rem;
+    color: #4c5e7b;
+    line-height: 1.35;
 }
 
 .dashboard-inline-status {
-    margin: 6px 0;
-    color: #333;
+    margin: 0;
+    color: #2c3f5f;
+    font-size: 0.95rem;
+    padding: 10px 12px;
+    border-radius: 10px;
+    background: #f4f8ff;
+    border: 1px solid #d7e4f7;
 }
 
 .stat-card {
-    border: 1px solid #ddd;
-    padding: 20px;
-    border-radius: 8px;
+    border: 1px solid #d9e4f4;
+    padding: 20px 18px;
+    border-radius: 12px;
     text-align: center;
-    background: #f9f9f9;
+    background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
+    box-shadow: 0 10px 28px rgba(17, 42, 77, 0.08);
 }
 
 .stat-card h3 {
-    font-size: 2.5em;
+    font-size: 2.3rem;
     margin: 0;
-    color: #333;
+    color: #23395b;
 }
 
 .stat-card p {
-    margin: 10px 0;
-    color: #666;
+    margin: 10px 0 8px;
+    color: #4a5c7a;
 }
 
 .stat-card a {
     display: inline-block;
-    margin-top: 10px;
+    margin-top: 6px;
     padding: 8px 12px;
-    background: #007bff;
+    background: #1464c9;
     color: white;
     text-decoration: none;
-    border-radius: 4px;
+    border-radius: 8px;
 }
 
 .recent-devices {
     width: 100%;
     border-collapse: collapse;
+    background: #ffffff;
+    border-radius: 12px;
+    overflow: hidden;
+    border: 1px solid #dbe4f3;
 }
 
 .recent-devices th,
 .recent-devices td {
     padding: 10px;
     text-align: left;
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid #e6edf8;
 }
 
 .recent-devices th {
-    background: #f0f0f0;
+    background: #f1f6fe;
 }
 
 .topology-wall {
-    margin: 18px 0 26px;
+    margin: 0;
     border: 1px solid #d6e1f0;
-    border-radius: 10px;
-    background: #fff;
-    padding: 14px;
+    border-radius: 14px;
+    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
+    padding: 16px;
     position: relative;
+    box-shadow: 0 14px 34px rgba(14, 40, 74, 0.12);
 }
 
 .topology-wall__header {
@@ -1144,7 +1180,7 @@ foreach ($rackLinksByKey as $entry) {
 }
 
 .topology-wall__hint {
-    margin: 8px 0 10px;
+    margin: 8px 0 12px;
     color: #445067;
 }
 
@@ -1305,6 +1341,10 @@ foreach ($rackLinksByKey as $entry) {
 }
 
 @media (max-width: 900px) {
+    .dashboard {
+        gap: 14px;
+    }
+
     #dashboard-topology-svg {
         height: 360px;
     }