troy-grunt/netwatch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dashboard-Design stabilisiert und modernisiert

Browse Source 
closes #28
This commit is contained in:
bigserver
2026-04-09 08:31:02 +02:00
parent a0b97d403e
commit 65d46d925d
1 changed files with 74 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
app/modules/dashboard/list.php
View File

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