bostame/workdock-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

snapshot: preserve refined dashboard spacing and layout

Browse Source
This commit is contained in:
Md Bayazid Bostame
2026-03-19 16:53:25 +01:00
parent 31b702045f
commit 396bb058ad
2 changed files with 95 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
backend/workflows/templates/workflows/home.html
View File

@@ -114,7 +114,7 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 7px 12px; padding: 6px 10px;
border-radius: 999px; border-radius: 999px;
border: 1px solid rgba(0,0,120,0.12); border: 1px solid rgba(0,0,120,0.12);
background: rgba(0,0,120,0.05); background: rgba(0,0,120,0.05);

173
backend/workflows/templates/workflows/requests_dashboard.html
View File

@@ -84,17 +84,15 @@
} }
.hero { .hero {
padding: 24px; padding: 0;
border-bottom: 1px solid rgba(217, 227, 238, 0.9); border-bottom: 0;
background: background: transparent;
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));
} }
.hero-grid { .hero-grid {
display: grid; display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.8fr); grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.8fr);
gap: 18px; gap: 12px;
align-items: stretch; align-items: stretch;
} }
@@ -111,17 +109,17 @@
} }
.hero-card { .hero-card {
padding: 24px; padding: 14px;
background: background:
radial-gradient(100% 140% at 10% 10%, rgba(31,79,214,0.12), rgba(31,79,214,0)), 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.98), rgba(247,250,255,0.95)); linear-gradient(180deg, rgba(255,255,255,0.99), rgba(248,251,255,0.97));
} }
.eyebrow { .eyebrow {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 7px 12px; padding: 6px 10px;
border-radius: 999px; border-radius: 999px;
border: 1px solid rgba(0,0,120,0.12); border: 1px solid rgba(0,0,120,0.12);
background: rgba(0,0,120,0.05); background: rgba(0,0,120,0.05);
@@ -133,8 +131,8 @@
} }
.hero h1 { .hero h1 {
margin: 14px 0 8px; margin: 8px 0 4px;
font-size: clamp(30px, 5vw, 46px); font-size: clamp(24px, 3.6vw, 34px);
line-height: 1; line-height: 1;
letter-spacing: -0.04em; letter-spacing: -0.04em;
color: var(--brand-blue); color: var(--brand-blue);
@@ -142,14 +140,14 @@
.hero p { .hero p {
margin: 0; margin: 0;
max-width: 720px; max-width: 760px;
color: var(--muted); color: var(--muted);
font-size: 15px; font-size: 13px;
line-height: 1.55; line-height: 1.45;
} }
.hero-pills { .hero-pills {
margin-top: 16px; margin-top: 12px;
display: flex; display: flex;
gap: 8px; gap: 8px;
flex-wrap: wrap; flex-wrap: wrap;
@@ -159,13 +157,16 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
min-height: 34px;
padding: 8px 12px; padding: 8px 12px;
border-radius: 999px; border-radius: 14px;
background: #fff; border: 1px solid rgba(217, 227, 238, 0.96);
border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.96));
color: #294465; color: #294465;
font-size: 12px; 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 { .pulse-card {
@@ -236,17 +237,20 @@
} }
.metrics-grid { .metrics-grid {
padding: 0 24px 0; padding: 0;
display: grid; display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px; gap: 12px;
margin-bottom: 0;
} }
.stat-card { .stat-card {
padding: 18px; padding: 14px;
position: relative; position: relative;
overflow: hidden; 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 { .stat-card::before {
@@ -283,9 +287,9 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 38px; width: 34px;
height: 38px; height: 34px;
border-radius: 14px; border-radius: 12px;
background: rgba(0, 0, 120, 0.06); background: rgba(0, 0, 120, 0.06);
color: var(--brand-blue); color: var(--brand-blue);
font-weight: 800; font-weight: 800;
@@ -307,18 +311,18 @@
} }
.stat-value { .stat-value {
margin-top: 18px; margin-top: 12px;
font-size: clamp(28px, 3vw, 38px); font-size: clamp(24px, 2.6vw, 30px);
font-weight: 900; font-weight: 900;
letter-spacing: -0.05em; letter-spacing: -0.05em;
color: var(--ink); color: var(--ink);
} }
.stat-foot { .stat-foot {
margin-top: 6px; margin-top: 5px;
color: var(--muted); color: var(--muted);
font-size: 13px; font-size: 12px;
line-height: 1.45; line-height: 1.4;
max-width: 220px; max-width: 220px;
} }
@@ -330,6 +334,13 @@
align-items: start; align-items: start;
} }
.top-stack {
padding: 12px 24px 0;
display: grid;
gap: 12px;
}
.top-content-grid { .top-content-grid {
display: grid; display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
@@ -340,8 +351,10 @@
.chart-card, .chart-card,
.controls-card, .controls-card,
.table-card { .table-card {
padding: 18px; padding: 14px;
background: rgba(255,255,255,0.92); 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 { .section-head {
@@ -350,7 +363,7 @@
align-items: flex-end; align-items: flex-end;
gap: 10px; gap: 10px;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 14px; margin-bottom: 10px;
} }
.section-head h2 { .section-head h2 {
@@ -368,10 +381,10 @@
.chart { .chart {
display: grid; display: grid;
grid-template-columns: repeat(14, minmax(0, 1fr)); grid-template-columns: repeat(14, minmax(0, 1fr));
gap: 8px; gap: 6px;
align-items: end; align-items: end;
min-height: 220px; min-height: 180px;
padding-top: 8px; padding-top: 6px;
} }
.chart-col { .chart-col {
@@ -384,7 +397,7 @@
.bar-wrap { .bar-wrap {
width: 100%; width: 100%;
min-height: 160px; min-height: 124px;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
justify-content: center; justify-content: center;
@@ -480,7 +493,7 @@
} }
.table-controls { .table-controls {
padding: 18px 18px 14px; padding: 14px 18px 14px;
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--line);
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,248,255,0.96)); background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,248,255,0.96));
} }
@@ -518,7 +531,7 @@
gap: 14px; gap: 14px;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
padding: 20px 20px 14px; padding: 16px 18px 14px;
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--line);
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,249,255,0.96)); background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,249,255,0.96));
} }
@@ -866,48 +879,43 @@
</div> </div>
</div> </div>
<section class="hero"> <section class="top-stack">
<div class="hero-grid"> <section class="hero">
<div class="hero-card"> <div class="hero-grid">
<span class="eyebrow">Operations Console</span> <div class="hero-card">
<h1>Anfragen Dashboard</h1> <span class="eyebrow">Operations Console</span>
<p>Steuert Onboarding- und Offboarding-Prozesse an einem Ort. Die Oberfläche priorisiert jetzt Kennzahlen, Aktivität und direkte Aktionen in der Vorgangsliste.</p> <h1>Anfragen Dashboard</h1>
<div class="hero-pills"> <p>Steuert Onboarding- und Offboarding-Prozesse an einem Ort. Die Oberfläche priorisiert Kennzahlen, Aktivität und direkte Aktionen in der Vorgangsliste.</p>
<span class="hero-pill">Onboarding + Offboarding</span> <div class="hero-pills">
<span class="hero-pill">PDFs + Live-Protokolle</span> <span class="hero-pill">Onboarding + Offboarding</span>
<span class="hero-pill">Suche + Bulk-Aktionen</span> <span class="hero-pill">PDFs + Live-Protokolle</span>
</div> <span class="hero-pill">Suche + Bulk-Aktionen</span>
</div>
<article class="chart-card activity-card">
<div class="section-head">
<div>
<h2>Aktivitätsverlauf</h2>
<p>Die letzten 14 Tage in einer kompakten Ansicht über alle Onboarding- und Offboarding-Vorgänge.</p>
</div> </div>
<span class="eyebrow">14 Tage</span>
</div> </div>
<div class="chart" aria-label="Aktivitätsverlauf der letzten 14 Tage"> <article class="chart-card activity-card">
{% for point in chart_points %} <div class="section-head">
<div class="chart-col"> <div>
<div class="bar-value">{{ point.total }}</div> <h2>Aktivitätsverlauf</h2>
<div class="bar-wrap"> <p>Die letzten 14 Tage in einer kompakten Ansicht über alle Onboarding- und Offboarding-Vorgänge.</p>
<div class="bar" style="height: {{ point.height }}px"></div>
</div>
<div class="bar-label">{{ point.label }}</div>
</div> </div>
{% endfor %} <span class="eyebrow">14 Tage</span>
</div> </div>
</article> <div class="chart" aria-label="Aktivitätsverlauf der letzten 14 Tage">
</div> {% for point in chart_points %}
</section> <div class="chart-col">
<div class="bar-value">{{ point.total }}</div>
<div class="bar-wrap">
<div class="bar" style="height: {{ point.height }}px"></div>
</div>
<div class="bar-label">{{ point.label }}</div>
</div>
{% endfor %}
</div>
</article>
</div>
</section>
{% if messages %} <section class="metrics-grid">
{% for message in messages %}
<div class="flash {{ message.tags }}">{{ message }}</div>
{% endfor %}
{% endif %}
<section class="metrics-grid">
<article class="stat-card"> <article class="stat-card">
<div class="stat-head"> <div class="stat-head">
<div> <div>
@@ -949,6 +957,13 @@
<div class="stat-foot">Zeitraum des visuellen Aktivitätsverlaufs in dieser Übersicht.</div> <div class="stat-foot">Zeitraum des visuellen Aktivitätsverlaufs in dieser Übersicht.</div>
</article> </article>
</section> </section>
</section>
{% if messages %}
{% for message in messages %}
<div class="flash {{ message.tags }}">{{ message }}</div>
{% endfor %}
{% endif %}
<section class="content-grid"> <section class="content-grid">
<section class="table-card"> <section class="table-card">