Doormile/Doormilexpress_console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates on the design and added the riders route page

Browse Source
This commit is contained in:
dharaneesh-r
2026-06-01 15:16:45 +05:30
parent 73b82877b8
commit e662154916
6 changed files with 562 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
src/pages/nearle/dispatch/Dispatch.css
View File

@@ -3786,7 +3786,7 @@
background: rgba(15, 23, 42, 0.02);
border: 1px solid rgba(15, 23, 42, 0.06);
border-radius: 12px;
padding: 10px 14px;
padding: 18px 18px;
gap: 16px;
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.02);
}
@@ -3840,16 +3840,11 @@
position: relative;
}
/* Planned track overrides to align vertically centered since there are no ticks */
.dispatch-container .compare-timeline-track.is-planned .compare-step {
gap: 0;
padding: 0;
height: 32px;
}
/* Planned track now also carries a time tick under the circle, so it uses the
same column layout as the actual row (circle stacked above the tick). */
.dispatch-container .compare-timeline-track.is-planned .compare-step-spacer {
margin-bottom: 0;
align-self: center;
margin-bottom: 22px;
/* Centers spacer dynamically relative to the 32px circle (matches actual). */
}
/* Actual track overrides for the spacer alignment */
@@ -6848,7 +6843,7 @@
}
.dispatch-container .compare-timeline-container {
padding: 6px 10px;
padding: 12px 12px;
gap: 12px;
border-radius: 8px;
}
@@ -6894,14 +6889,10 @@
background: rgba(99, 102, 241, 0.5);
}
/* Planned track overrides to align vertically centered since there are no ticks */
.dispatch-container .compare-timeline-track.is-planned .compare-step {
height: 24px;
}
/* Planned track now also carries a time tick under the circle, so the spacer
aligns the same way as the actual row (mirrors the 24px circle center). */
.dispatch-container .compare-timeline-track.is-planned .compare-step-spacer {
margin-bottom: 0;
align-self: center;
margin-bottom: 14px;
}
/* Actual track overrides for the spacer alignment */
@@ -7098,7 +7089,7 @@
}
.dispatch-container .compare-timeline-container {
padding: 6px 10px;
padding: 12px 12px;
gap: 12px;
border-radius: 8px;
}
@@ -7124,14 +7115,10 @@
padding-bottom: 2px;
}
/* Planned track overrides to align vertically centered since there are no ticks */
.dispatch-container .compare-timeline-track.is-planned .compare-step {
height: 24px;
}
/* Planned track now also carries a time tick under the circle, so the spacer
aligns the same way as the actual row (mirrors the 24px circle center). */
.dispatch-container .compare-timeline-track.is-planned .compare-step-spacer {
margin-bottom: 0;
align-self: center;
margin-bottom: 14px;
}
/* Actual track overrides for the spacer alignment */
@@ -7312,6 +7299,8 @@
gap: 12px;
padding: 12px;
background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
transition: grid-template-columns 0.32s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.dispatch-container #body.compare-mode #sidebar,
@@ -7319,6 +7308,89 @@
display: none !important;
}
/* Collapsed-data-panel state — drop the right column entirely so the map
claims the full body width. The panel itself is masked via overflow on
the body grid; the peek tab below stays visible to re-open. */
.dispatch-container #body.compare-mode.compare-data-collapsed {
grid-template-columns: minmax(0, 1fr) 0;
gap: 0;
}
.dispatch-container #body.compare-mode.compare-data-collapsed .compare-data-panel {
opacity: 0;
pointer-events: none;
transform: translateX(20px);
}
.dispatch-container .compare-data-panel {
transition: opacity 0.24s ease, transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Peek tab for the right-side compare data panel — vertical pill mirroring
the left sidebar's toggle, but anchored to the panel's left edge. Tracks
the panel by sitting at right:0 when expanded (so it hugs the panel's
outside-left edge) and snaps flush to the viewport's right side when
collapsed. */
.dispatch-container .compare-data-toggle-tab {
position: absolute;
top: 50%;
/* Anchor flush against the panel's outside-left edge. Panel max width is
440px (see compare-mode grid-template-columns above) plus the 12px grid
gap; transform: translate(50%, …) re-centres the 22-wide pill on that
boundary so half of it sits on the panel side and half on the map side
— same visual treatment as the left sidebar's peek tab. */
right: calc(440px + 12px);
transform: translate(50%, -50%);
width: 22px;
height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid var(--border, rgba(15, 23, 42, 0.12));
border-radius: 10px;
background: #fff;
color: var(--text, #0f172a);
font-size: 18px;
line-height: 1;
cursor: pointer;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12),
0 1px 3px rgba(15, 23, 42, 0.06);
z-index: 1200;
transition: right 0.32s cubic-bezier(0.4, 0, 0.2, 1),
background 0.18s ease,
color 0.18s ease,
transform 0.18s ease,
box-shadow 0.18s ease;
}
.dispatch-container .compare-data-toggle-tab:hover {
background: linear-gradient(135deg, #6366f1, #3b82f6);
color: #fff;
transform: translate(50%, -50%) scale(1.06);
box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35);
}
.dispatch-container .compare-data-toggle-tab:focus-visible {
outline: 2px solid var(--accent, #3b82f6);
outline-offset: 2px;
}
.dispatch-container .compare-data-toggle-tab.is-collapsed {
right: 0;
transform: translate(0, -50%);
border-radius: 10px 0 0 10px;
border-right: none;
}
.dispatch-container .compare-data-toggle-tab.is-collapsed:hover {
transform: translate(0, -50%) scale(1.06);
}
.dispatch-container .compare-data-toggle-tab svg {
display: block;
}
/* Header strip — sits above the unified map (row 1, col 1) and
carries the rider title, the step timeline + load progress, and
the layer legend. The Sync toggle was removed when the second
@@ -7973,6 +8045,12 @@
grid-row: 3;
max-height: 50vh;
}
/* Single-column layout stacks the panel BELOW the map, so the
side-anchored peek tab no longer makes geometric sense — hide it. */
.dispatch-container .compare-data-toggle-tab {
display: none;
}
}
/* Hide filter chrome when Compare takes over the screen — view-mode
@@ -9062,46 +9140,53 @@
}
/* ============================================================
Top-level Live / Analysis tabs (standalone Dispatch only)
Top-level Live / Analysis tabs (pinned inside header, left of profit)
============================================================ */
.dispatch-container #dispatch-top-tabs {
display: flex;
gap: 6px;
padding: 8px 12px 0 12px;
border-bottom: 1px solid var(--border);
background: var(--bg);
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0;
background: transparent;
flex-shrink: 0;
}
.dispatch-container #dispatch-top-tabs.dtt-inline {
margin-right: 4px;
}
.dispatch-container .dtt-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border: none;
background: transparent;
font-size: 13px;
font-weight: 600;
padding: 6px 12px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--bg);
font-size: 12px;
font-weight: 700;
color: var(--text-muted);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 0.15s, border-color 0.15s;
line-height: 1;
transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.dispatch-container .dtt-tab:hover {
color: var(--text);
background: var(--bg-sub);
}
.dispatch-container .dtt-tab.active {
color: var(--accent);
border-bottom-color: var(--accent);
color: #fff;
background: var(--accent);
border-color: var(--accent);
box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25);
}
.dispatch-container .dtt-icon {
display: inline-flex;
align-items: center;
font-size: 15px;
font-size: 14px;
}
/* ============================================================
@@ -9477,6 +9562,19 @@
gap: 8px;
}
.dispatch-container .da-rec.da-rec-empty {
background: #f8fafc;
border: 1px dashed #e2e8f0;
color: #64748b;
}
.dispatch-container .da-rec.da-rec-empty .da-rec-action {
color: #64748b;
text-transform: none;
font-weight: 500;
letter-spacing: 0;
}
.dispatch-container .da-rec-head {
display: flex;
justify-content: space-between;