updates on the dispatch analysis page design updates
This commit is contained in:
@@ -9513,6 +9513,58 @@
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
/* ─── Auto-refresh indicator (analysis section).
|
||||
A pill that sits next to the manual refresh button, telling the
|
||||
operator the panel is polling and at what cadence. The dot pulses
|
||||
green when idle, amber while a refresh is in flight. ─────────── */
|
||||
.dispatch-container .da-detail-actions {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.dispatch-container .da-live-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
color: #166534;
|
||||
background: #ecfdf5;
|
||||
border: 1px solid #a7f3d0;
|
||||
padding: 4px 9px 4px 8px;
|
||||
border-radius: 999px;
|
||||
user-select: none;
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
}
|
||||
|
||||
.dispatch-container .da-live-tag.is-active {
|
||||
color: #92400e;
|
||||
background: #fffbeb;
|
||||
border-color: #fde68a;
|
||||
}
|
||||
|
||||
.dispatch-container .da-live-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: #10b981;
|
||||
box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18);
|
||||
animation: da-live-pulse 1.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.dispatch-container .da-live-tag.is-active .da-live-dot {
|
||||
background: #f59e0b;
|
||||
box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.22);
|
||||
animation: da-live-pulse 0.9s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes da-live-pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.4; transform: scale(0.85); }
|
||||
}
|
||||
|
||||
.dispatch-container .da-metric-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
@@ -9872,6 +9924,227 @@
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* Clickable chip variant — used for the "last position" GPS chip that
|
||||
opens the in-app Leaflet position modal. Keeps the same shell as
|
||||
.da-chip but reads as a link on hover. Also serves as a button reset
|
||||
for the <button> element used as the trigger. */
|
||||
.dispatch-container .da-chip.da-chip-link {
|
||||
text-decoration: none;
|
||||
color: #1d4ed8;
|
||||
border-color: #bfdbfe;
|
||||
background: #eff6ff;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
|
||||
}
|
||||
|
||||
.dispatch-container .da-chip.da-chip-link:hover {
|
||||
background: #dbeafe;
|
||||
border-color: #93c5fd;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
.dispatch-container .da-chip.da-chip-link:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.dispatch-container .da-chip.da-chip-link:focus-visible {
|
||||
outline: 2px solid #3b82f6;
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
/* ───────────────────────────────────────────────────────────────────────
|
||||
Rider last-position modal (Analysis section).
|
||||
Top-level overlay: backdrop + centered card holding a Leaflet map.
|
||||
Visual language matches the rest of the analysis surface
|
||||
(gradient header strip, neutral chrome, brand purple accent).
|
||||
─────────────────────────────────────────────────────────────────── */
|
||||
.dispatch-container .da-pos-modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(15, 23, 42, 0.55);
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2000;
|
||||
padding: 24px;
|
||||
animation: da-pos-fade 0.18s ease;
|
||||
}
|
||||
|
||||
@keyframes da-pos-fade {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.dispatch-container .da-pos-modal-card {
|
||||
width: min(720px, 100%);
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
box-shadow:
|
||||
0 24px 60px rgba(15, 23, 42, 0.28),
|
||||
0 8px 24px rgba(15, 23, 42, 0.12);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e2e8f0;
|
||||
animation: da-pos-rise 0.22s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
@keyframes da-pos-rise {
|
||||
from { opacity: 0; transform: translateY(12px) scale(0.98); }
|
||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||
}
|
||||
|
||||
.dispatch-container .da-pos-modal-head {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 14px 18px;
|
||||
background: linear-gradient(135deg, #66258208 0%, #9255AB14 100%);
|
||||
border-bottom: 1px solid #eef2f6;
|
||||
}
|
||||
|
||||
.dispatch-container .da-pos-modal-title-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.dispatch-container .da-pos-modal-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 12px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.dispatch-container .da-pos-modal-title {
|
||||
font-size: 15.5px;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.dispatch-container .da-pos-modal-sub {
|
||||
margin-top: 2px;
|
||||
font-size: 11.5px;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.dispatch-container .da-pos-modal-actions {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.dispatch-container .da-pos-modal-close {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #e2e8f0;
|
||||
background: #ffffff;
|
||||
color: #475569;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
|
||||
}
|
||||
|
||||
.dispatch-container .da-pos-modal-close:hover {
|
||||
background: #fef2f2;
|
||||
border-color: #fecaca;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.dispatch-container .da-pos-modal-close:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
/* Leaflet requires a concrete pixel height on its container — a flex
|
||||
`1 1 auto` with `min-height` collapses to 0 inside this card on some
|
||||
layouts, leaving the tile pane blank. Pin a fixed height so the map
|
||||
always has something to draw against. */
|
||||
.dispatch-container .da-pos-modal-map {
|
||||
flex: 0 0 auto;
|
||||
height: 420px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background: #e2e8f0;
|
||||
}
|
||||
|
||||
.dispatch-container .da-pos-modal-map .leaflet-container {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
background: #e2e8f0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dispatch-container .da-pos-modal-foot {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 12px 18px;
|
||||
background: #f8fafc;
|
||||
border-top: 1px solid #eef2f6;
|
||||
}
|
||||
|
||||
.dispatch-container .da-pos-modal-coord {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12.5px;
|
||||
color: #334155;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.dispatch-container .da-pos-modal-coord strong {
|
||||
color: #0f172a;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.dispatch-container .da-pos-modal-sep {
|
||||
margin: 0 8px;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
.dispatch-container .da-pos-modal-copy {
|
||||
font-family: inherit;
|
||||
font-size: 11.5px;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
background: #662582;
|
||||
border: 1px solid #662582;
|
||||
padding: 6px 14px;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, border-color 0.15s, transform 0.1s;
|
||||
}
|
||||
|
||||
.dispatch-container .da-pos-modal-copy:hover {
|
||||
background: #4D1C61;
|
||||
border-color: #4D1C61;
|
||||
}
|
||||
|
||||
.dispatch-container .da-pos-modal-copy:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
/* ---- Substitution opportunities ---- */
|
||||
.dispatch-container .da-sub-list {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user