From 396bb058ade39da7725844a4e1ed1a0727ac96c3 Mon Sep 17 00:00:00 2001 From: Md Bayazid Bostame Date: Thu, 19 Mar 2026 16:53:25 +0100 Subject: [PATCH] snapshot: preserve refined dashboard spacing and layout --- .../workflows/templates/workflows/home.html | 2 +- .../workflows/requests_dashboard.html | 173 ++++++++++-------- 2 files changed, 95 insertions(+), 80 deletions(-) diff --git a/backend/workflows/templates/workflows/home.html b/backend/workflows/templates/workflows/home.html index dc0715b..314c30c 100644 --- a/backend/workflows/templates/workflows/home.html +++ b/backend/workflows/templates/workflows/home.html @@ -114,7 +114,7 @@ display: inline-flex; align-items: center; gap: 8px; - padding: 7px 12px; + padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(0,0,120,0.12); background: rgba(0,0,120,0.05); diff --git a/backend/workflows/templates/workflows/requests_dashboard.html b/backend/workflows/templates/workflows/requests_dashboard.html index f23c206..d0ec08e 100644 --- a/backend/workflows/templates/workflows/requests_dashboard.html +++ b/backend/workflows/templates/workflows/requests_dashboard.html @@ -84,17 +84,15 @@ } .hero { - padding: 24px; - border-bottom: 1px solid rgba(217, 227, 238, 0.9); - background: - linear-gradient(135deg, rgba(0, 0, 120, 0.08), rgba(0, 0, 120, 0) 44%), - linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,250,255,0.92)); + padding: 0; + border-bottom: 0; + background: transparent; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.8fr); - gap: 18px; + gap: 12px; align-items: stretch; } @@ -111,17 +109,17 @@ } .hero-card { - padding: 24px; + padding: 14px; background: - radial-gradient(100% 140% at 10% 10%, rgba(31,79,214,0.12), rgba(31,79,214,0)), - linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,255,0.95)); + radial-gradient(100% 140% at 10% 10%, rgba(31,79,214,0.10), rgba(31,79,214,0)), + linear-gradient(180deg, rgba(255,255,255,0.99), rgba(248,251,255,0.97)); } .eyebrow { display: inline-flex; align-items: center; gap: 8px; - padding: 7px 12px; + padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(0,0,120,0.12); background: rgba(0,0,120,0.05); @@ -133,8 +131,8 @@ } .hero h1 { - margin: 14px 0 8px; - font-size: clamp(30px, 5vw, 46px); + margin: 8px 0 4px; + font-size: clamp(24px, 3.6vw, 34px); line-height: 1; letter-spacing: -0.04em; color: var(--brand-blue); @@ -142,14 +140,14 @@ .hero p { margin: 0; - max-width: 720px; + max-width: 760px; color: var(--muted); - font-size: 15px; - line-height: 1.55; + font-size: 13px; + line-height: 1.45; } .hero-pills { - margin-top: 16px; + margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; @@ -159,13 +157,16 @@ display: inline-flex; align-items: center; gap: 6px; + min-height: 34px; padding: 8px 12px; - border-radius: 999px; - background: #fff; - border: 1px solid var(--line); + border-radius: 14px; + border: 1px solid rgba(217, 227, 238, 0.96); + background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.96)); color: #294465; font-size: 12px; - font-weight: 700; + font-weight: 800; + line-height: 1; + box-shadow: inset 0 1px 0 rgba(255,255,255,0.94); } .pulse-card { @@ -236,17 +237,20 @@ } .metrics-grid { - padding: 0 24px 0; + padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: 14px; + gap: 12px; + margin-bottom: 0; } .stat-card { - padding: 18px; + padding: 14px; position: relative; overflow: hidden; - min-height: 132px; + min-height: 110px; + border-radius: 18px; + box-shadow: 0 10px 24px rgba(18, 33, 56, 0.04), inset 0 1px 0 rgba(255,255,255,0.92); } .stat-card::before { @@ -283,9 +287,9 @@ display: inline-flex; align-items: center; justify-content: center; - width: 38px; - height: 38px; - border-radius: 14px; + width: 34px; + height: 34px; + border-radius: 12px; background: rgba(0, 0, 120, 0.06); color: var(--brand-blue); font-weight: 800; @@ -307,18 +311,18 @@ } .stat-value { - margin-top: 18px; - font-size: clamp(28px, 3vw, 38px); + margin-top: 12px; + font-size: clamp(24px, 2.6vw, 30px); font-weight: 900; letter-spacing: -0.05em; color: var(--ink); } .stat-foot { - margin-top: 6px; + margin-top: 5px; color: var(--muted); - font-size: 13px; - line-height: 1.45; + font-size: 12px; + line-height: 1.4; max-width: 220px; } @@ -330,6 +334,13 @@ align-items: start; } + .top-stack { + padding: 12px 24px 0; + display: grid; + gap: 12px; + } + + .top-content-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); @@ -340,8 +351,10 @@ .chart-card, .controls-card, .table-card { - padding: 18px; - background: rgba(255,255,255,0.92); + padding: 14px; + background: rgba(255,255,255,0.94); + border-radius: 22px; + box-shadow: 0 12px 28px rgba(18, 33, 56, 0.045), inset 0 1px 0 rgba(255,255,255,0.92); } .section-head { @@ -350,7 +363,7 @@ align-items: flex-end; gap: 10px; flex-wrap: wrap; - margin-bottom: 14px; + margin-bottom: 10px; } .section-head h2 { @@ -368,10 +381,10 @@ .chart { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); - gap: 8px; + gap: 6px; align-items: end; - min-height: 220px; - padding-top: 8px; + min-height: 180px; + padding-top: 6px; } .chart-col { @@ -384,7 +397,7 @@ .bar-wrap { width: 100%; - min-height: 160px; + min-height: 124px; display: flex; align-items: flex-end; justify-content: center; @@ -480,7 +493,7 @@ } .table-controls { - padding: 18px 18px 14px; + padding: 14px 18px 14px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,248,255,0.96)); } @@ -518,7 +531,7 @@ gap: 14px; align-items: center; flex-wrap: wrap; - padding: 20px 20px 14px; + padding: 16px 18px 14px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,249,255,0.96)); } @@ -866,48 +879,43 @@ -
-
-
- Operations Console -

Anfragen Dashboard

-

Steuert Onboarding- und Offboarding-Prozesse an einem Ort. Die Oberfläche priorisiert jetzt Kennzahlen, Aktivität und direkte Aktionen in der Vorgangsliste.

-
- Onboarding + Offboarding - PDFs + Live-Protokolle - Suche + Bulk-Aktionen -
-
-
-
-
-

Aktivitätsverlauf

-

Die letzten 14 Tage in einer kompakten Ansicht über alle Onboarding- und Offboarding-Vorgänge.

+
+
+
+
+ Operations Console +

Anfragen Dashboard

+

Steuert Onboarding- und Offboarding-Prozesse an einem Ort. Die Oberfläche priorisiert Kennzahlen, Aktivität und direkte Aktionen in der Vorgangsliste.

+
+ Onboarding + Offboarding + PDFs + Live-Protokolle + Suche + Bulk-Aktionen
- 14 Tage
-
- {% for point in chart_points %} -
-
{{ point.total }}
-
-
-
-
{{ point.label }}
+
+
+
+

Aktivitätsverlauf

+

Die letzten 14 Tage in einer kompakten Ansicht über alle Onboarding- und Offboarding-Vorgänge.

- {% endfor %} -
-
-
-
+ 14 Tage +
+
+ {% for point in chart_points %} +
+
{{ point.total }}
+
+
+
+
{{ point.label }}
+
+ {% endfor %} +
+
+
+
- {% if messages %} - {% for message in messages %} -
{{ message }}
- {% endfor %} - {% endif %} - -
+
@@ -949,6 +957,13 @@
Zeitraum des visuellen Aktivitätsverlaufs in dieser Übersicht.
+
+ + {% if messages %} + {% for message in messages %} +
{{ message }}
+ {% endfor %} + {% endif %}