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;
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);

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

@@ -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 @@
</div>
</div>
<section class="hero">
<div class="hero-grid">
<div class="hero-card">
<span class="eyebrow">Operations Console</span>
<h1>Anfragen Dashboard</h1>
<p>Steuert Onboarding- und Offboarding-Prozesse an einem Ort. Die Oberfläche priorisiert jetzt Kennzahlen, Aktivität und direkte Aktionen in der Vorgangsliste.</p>
<div class="hero-pills">
<span class="hero-pill">Onboarding + Offboarding</span>
<span class="hero-pill">PDFs + Live-Protokolle</span>
<span class="hero-pill">Suche + Bulk-Aktionen</span>
</div>
</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>
<section class="top-stack">
<section class="hero">
<div class="hero-grid">
<div class="hero-card">
<span class="eyebrow">Operations Console</span>
<h1>Anfragen Dashboard</h1>
<p>Steuert Onboarding- und Offboarding-Prozesse an einem Ort. Die Oberfläche priorisiert Kennzahlen, Aktivität und direkte Aktionen in der Vorgangsliste.</p>
<div class="hero-pills">
<span class="hero-pill">Onboarding + Offboarding</span>
<span class="hero-pill">PDFs + Live-Protokolle</span>
<span class="hero-pill">Suche + Bulk-Aktionen</span>
</div>
<span class="eyebrow">14 Tage</span>
</div>
<div class="chart" aria-label="Aktivitätsverlauf der letzten 14 Tage">
{% for point in chart_points %}
<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>
<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>
{% endfor %}
</div>
</article>
</div>
</section>
<span class="eyebrow">14 Tage</span>
</div>
<div class="chart" aria-label="Aktivitätsverlauf der letzten 14 Tage">
{% for point in chart_points %}
<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 %}
{% for message in messages %}
<div class="flash {{ message.tags }}">{{ message }}</div>
{% endfor %}
{% endif %}
<section class="metrics-grid">
<section class="metrics-grid">
<article class="stat-card">
<div class="stat-head">
<div>
@@ -949,6 +957,13 @@
<div class="stat-foot">Zeitraum des visuellen Aktivitätsverlaufs in dieser Übersicht.</div>
</article>
</section>
</section>
{% if messages %}
{% for message in messages %}
<div class="flash {{ message.tags }}">{{ message }}</div>
{% endfor %}
{% endif %}
<section class="content-grid">
<section class="table-card">