refactor(tickets): move cluster/status/window filters beside the KPIs
Fold the filter controls into the INC overview card, right-aligned next to the metric tiles, and remove the standalone filter bar — better visual balance (fills the previously empty right side of the overview row). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
parent
1ec25b70be
commit
930a646116
1 changed files with 35 additions and 26 deletions
|
|
@ -222,6 +222,12 @@
|
||||||
.sla-ok { color: var(--live); }
|
.sla-ok { color: var(--live); }
|
||||||
.sla-unknown { color: var(--muted); }
|
.sla-unknown { color: var(--muted); }
|
||||||
|
|
||||||
|
/* INC overview row: metric tiles (left) + filters (right) on one balanced row */
|
||||||
|
.tk-overview-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; }
|
||||||
|
.tk-overview-metrics { min-width: 0; }
|
||||||
|
.tk-filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-left: auto; }
|
||||||
|
.tk-filters .ff select, .tk-filters .ff input { min-width: 130px; }
|
||||||
|
|
||||||
/* Live vehicle DOM marker (ported from FleetNow) */
|
/* Live vehicle DOM marker (ported from FleetNow) */
|
||||||
.veh-marker { cursor: pointer; will-change: transform; }
|
.veh-marker { cursor: pointer; will-change: transform; }
|
||||||
.veh-inner { position: relative; width: 32px; height: 32px; transform: scale(var(--veh-scale, 1)); transform-origin: center center; }
|
.veh-inner { position: relative; width: 32px; height: 32px; transform: scale(var(--veh-scale, 1)); transform-origin: center center; }
|
||||||
|
|
@ -384,7 +390,14 @@
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="view" id="view-tickets">
|
<section class="view" id="view-tickets">
|
||||||
<div class="filterbar">
|
<main id="tk-main">
|
||||||
|
<div class="card span12">
|
||||||
|
<div class="tk-overview-row">
|
||||||
|
<div class="tk-overview-metrics">
|
||||||
|
<h2>INC overview <span class="count" id="tk-fresh"></span></h2>
|
||||||
|
<div class="metric-row" id="tk-metrics"><div class="empty">Loading…</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="tk-filters">
|
||||||
<div class="ff">
|
<div class="ff">
|
||||||
<label for="tk-cluster">Cluster</label>
|
<label for="tk-cluster">Cluster</label>
|
||||||
<select id="tk-cluster"><option value="">All clusters</option></select>
|
<select id="tk-cluster"><option value="">All clusters</option></select>
|
||||||
|
|
@ -407,11 +420,7 @@
|
||||||
<button class="btn" id="tk-apply" type="button">Apply</button>
|
<button class="btn" id="tk-apply" type="button">Apply</button>
|
||||||
<button class="btn ghost" id="tk-refresh" type="button" title="Reload">↻</button>
|
<button class="btn ghost" id="tk-refresh" type="button" title="Reload">↻</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<main id="tk-main">
|
|
||||||
<div class="card span12">
|
|
||||||
<h2>INC overview <span class="count" id="tk-fresh"></span></h2>
|
|
||||||
<div class="metric-row" id="tk-metrics"><div class="empty">Loading…</div></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card span12">
|
<div class="card span12">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue