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:
david kiania 2026-06-16 12:29:32 +03:00
parent 1ec25b70be
commit 930a646116

View file

@ -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">