/* * HomeComponent (Live Map) — visual-only restyle pass toward the "Live Map" * reference design. Scope: colors/spacing/typography of the existing * toolbar only. Deliberately NOT splitting the toolbar into separate * floating panels yet (status bar vs. search card) — that's a follow-up * structural pass once this visual pass is verified. No JS/state logic * touched; only className additions in HomeComponent.jsx (home-toolbar-card, * home-status-bar, home-status-icon) plus this stylesheet. * * Status-bar colors/sizes below are read directly from the reference app's * own compiled source (http://172.16.0.15:9020, read-only — fetched via curl, * nothing submitted/changed there): the oT status-filter array and * .map-legend-bar/.legend-tab* rules in its main.js/main.css. Not estimated. */ /* custom.css's .map-box has a flat border-bottom: 8px solid #cbcbcb — the actual real gray strip, confirmed via live DOM inspection (.map-box closes right after .home-toolbar-card; the map itself is a separate sibling, not nested inside .map-box, so this border renders as a bar between the status card and the map). It's shared with a few other pages (FindNearestComponent, Sumul*), hence the extra .home-map-box scoping class added alongside .map-box in HomeComponent.jsx rather than overriding .map-box globally. */ .home-map-box { border-bottom: none; } .home-toolbar-card { /* The JSX already has "mb-0" on this element intending to cancel the vendor .card rule's margin-bottom: 30px (style.css) — but ".mb-0" is a real Bootstrap utility class that was never actually defined anywhere in this codebase (this template only hand-rolled a subset of Bootstrap classes), so it's a no-op. That 30px margin is what's been showing as gray page background between this card and the map below. */ margin-bottom: 0 !important; border: none; border-radius: var(--radius-base); box-shadow: var(--shadow-card); overflow: hidden; font-family: var(--font-family-base); } /* On Road/Off Road/collection-type/Corp status variants don't carry the home-status-bar class, so the card's own Bootstrap .p-2 bottom padding (0.5rem) was still showing as a gray gap below them, before the map starts. Cancelling only that — not touching their background/top/sides, unlike the fuller flush treatment this replaces. */ /* margin-bottom alone (previous attempt) can't escape the parent card's own padding — padding always blocks margin-collapsing between a child and its parent's edge. Negative margin on all four sides is what actually escapes it (same mechanism that already works for home-status-bar above). */ .home-toolbar-card > div > .fleet-status-count:not(.home-status-bar) { margin: -0.5rem; } /* Dark full-width status strip, pulled out to the card's edges via negative margin (the card itself keeps Bootstrap's .p-2 padding for everything below it). */ /* Over Speed / Veh.In POI row — only shown when enableOverSpeedVehicleInPoiFeature is on for the account. Used to be a default Bootstrap .row/.col-lg-3 with a 55px marginLeft, which read as a stray gap of near-blank space between the status bar and the map. Made it a compact, flush, single-line strip instead — same links/handlers, unstyled Bootstrap wrapper removed. */ .home-overspeed-row { display: flex; align-items: center; gap: 24px; background: rgba(255, 255, 255, 0.96); padding: 6px 14px; font-size: 12px; color: #1a2340; } /* The row is conditionally shown via React's `hidden` attribute (enableOverSpeedVehicleInPoiFeature), which the browser normally honors via its own `[hidden] { display: none }` rule — but an author stylesheet's own `display` property (the flex rule above) overrides that UA default through ordinary cascade, so without this the row was forced visible (as an empty-ish strip) even when the feature flag is off. */ .home-overspeed-row[hidden] { display: none !important; } .home-overspeed-row a { color: var(--color-primary); text-decoration: none; } .home-overspeed-row a:hover { text-decoration: underline; } .home-status-bar { display: flex !important; align-items: stretch; flex-wrap: wrap; gap: 2px; /* This account's instance runs the reference app's LIGHT color scheme ([data-theme=light] in its CSS — confirmed from a fresh screenshot of 172.16.0.15:9020 showing a white bar with dark text), not the dark one this file originally pulled --ft-surface-sunken etc. from. */ background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* Bottom margin used to be 0.75rem, giving breathing room before the search row that lived right below it in this same card. That row is now a floating panel anchored to the map instead (see the home-map- overlay rules), so this card has nothing else in it — a non-zero bottom margin just left a gap of bare page background before the map starts. */ margin: -0.5rem; padding: 0 14px; float: none !important; } .home-status-bar > div { display: flex !important; align-items: center; gap: 8px; margin-right: 0 !important; padding: 10px 15px !important; background: transparent !important; border: none !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; transition: background-color 0.15s, border-color 0.15s; /* The click handler moved from the inner number-only to this whole box (see HomeComponent.jsx) so the full tile — icon, number and label — is one clickable target, not just the digits. */ cursor: pointer; } .home-status-bar > div:hover { background: rgba(78, 120, 255, 0.06) !important; } .home-status-bar label { color: #1a2340; font-size: 0.78rem; font-weight: 600; order: 3; } .home-status-bar h3 { order: 2; margin: 0 !important; } .home-status-bar h3 span { font-size: 1rem !important; font-weight: 800 !important; } .home-status-icon { order: 1; font-size: 15px; } /* Exact per-status colors from the reference app's status-filter config (icon, number, and active-state underline all share the same color). */ .home-status-bar div:has(.text-success) .home-status-icon, .home-status-bar .text-success { color: #22c55e !important; } .home-status-bar div:has(.text-warning) .home-status-icon, .home-status-bar .text-warning { color: #f0b429 !important; } .home-status-bar div:has(.text-danger) .home-status-icon, .home-status-bar .text-danger { color: #ef4444 !important; } .home-status-bar div:has(.text-info) .home-status-icon, .home-status-bar .text-info { color: #6b7280 !important; } .home-status-bar div:has(.text-default) .home-status-icon, .home-status-bar .text-default { color: #4e78ff !important; } /* Currently-selected filter: underline instead of a filled pill, matching the reference design's active-tab treatment. Shared with the on-road/ off-road and collection-type toolbar variants, which use the same active-dashboard-* classes. `border: none` first fully resets custom.css's original `border: 1px solid ` (all four sides) before the single bottom-edge override, otherwise the old color would still show on the other three sides. */ .active-dashboard-all, .active-dashboard-moving, .active-dashboard-idle, .active-dashboard-stopped, .active-dashboard-noresponse { background: transparent !important; border: none !important; border-radius: 0 !important; } /* Scoped under .home-status-bar (ancestor combinator, not just the bare class) so these win over `.home-status-bar > div`'s own `border-bottom: transparent` reset above — that rule has one class + one type selector (0,1,1), which beats a bare `.active-dashboard-moving` class alone (0,1,0) regardless of !important or source order, since specificity is compared before either of those. Without the ancestor scope here, the colored active underline silently never rendered for any status, on either status-bar variant. */ .home-status-bar .active-dashboard-moving { border-bottom: 2px solid #22c55e !important; } .home-status-bar .active-dashboard-idle { border-bottom: 2px solid #f0b429 !important; } .home-status-bar .active-dashboard-stopped { border-bottom: 2px solid #ef4444 !important; } .home-status-bar .active-dashboard-noresponse { border-bottom: 2px solid #6b7280 !important; } .home-status-bar .active-dashboard-all { border-bottom: 2px solid #4e78ff !important; } /* ---- Search By / lat-lng input — now inside .home-map-overlay--tl, not .home-toolbar-card (that moved when the controls became a floating panel). ---- */ .home-map-overlay #latLongTxt { border-radius: var(--radius-pill); border: 1px solid #94a3b8; background: #f6f7fb; padding: 6px 14px; font-size: 12px; font-weight: 400; } /* Same border color as the icon-cluster boxes, applied to the Group/POI dropdowns (DevExtreme SelectBox — bordered via its own .dx-editor-outlined class, not a plain CSS border) so all the floating-panel controls read as one consistent set. */ .home-map-overlay--tl .dx-editor-outlined, .home-map-overlay--tl .dx-texteditor-input-container { border-color: #94a3b8 !important; } .home-map-overlay #latLongTxt:focus { outline: none; border-color: var(--color-primary); background: #ffffff; } /* ---- Floating panel over the map for Select Ambulance / Group / Search By — white card, matching the plain-light reference screenshot (not the dark glass variant used elsewhere). Positioned via plain CSS: .map-box (an ancestor, see custom.css) is already position:relative, so no new positioning context or JSX/ref changes were needed — just a wrapper div around the existing controls in HomeComponent.jsx. ---- */ .home-map-overlay { position: absolute; z-index: 1200; border-radius: var(--radius-base); } .home-map-overlay--tl { top: 12px; left: 12px; padding: 4px 10px; display: flex; align-items: center; flex-wrap: wrap; max-width: min(760px, calc(100% - 24px)); font-size: 12px; } /* Select Ambulance (react-select) / Select Group (DevExtreme SelectBox) / POI,Lat-Lng radio labels — none of these set their own font-size, they just inherit from the ancestor, but react-select and DevExtreme both render their text in plain divs/spans deep in their generated markup, so the inherited size only actually reaches them via this explicit re-assertion on their own wrapper classes (some DevExtreme internals reset font-size back to a fixed default on specific leaf elements). */ .home-map-overlay--tl .basic-multi-select, .home-map-overlay--tl .dx-selectbox, .home-map-overlay--tl .dx-placeholder, .home-map-overlay--tl .dx-texteditor-input, .home-map-overlay--tl .dx-item-content, .home-map-overlay--tl .dx-radiobutton .dx-radio-value-container { font-size: 12px !important; font-weight: 400 !important; } .home-map-overlay--tr { top: 70px; right: 12px; padding: 4px 6px; } /* The vehicle-label/"Group"/"Search By:" text sitting above each control reads fine in a full-width toolbar row, but is redundant clutter once the controls are a compact floating panel (the widgets already show their own placeholder text) — hidden here rather than removed from the JSX so it still exists for any non-overlay/mobile layout. */ .home-map-overlay--tl .form-group > label, .home-map-overlay--tl .homePageRadio > span { display: none; } .home-map-overlay--light { background: #ffffff; border: 1px solid var(--color-border); box-shadow: var(--shadow-card); } .home-map-overlay--light .pull-left, .home-map-overlay--light .pull-right { float: none; } .home-map-overlay--tr .btn-dark-desktop { display: flex; align-items: center; gap: 6px; } /* !important throughout: "btn-dark" is a real Bootstrap class (bootstrap.min.css is loaded) meaning literally "dark/black button" — its own base/hover/focus/ active rules were winning over the plain (non-important) declaration here. */ .home-map-overlay--tr .btn-dark-desktop .btn-dark, .home-map-overlay--tr .btn-dark-desktop .btn-dark:focus, .home-map-overlay--tr .btn-dark-desktop .btn-dark:active { background: #ffffff !important; color: #475569 !important; border: 1px solid #e2e8f0 !important; border-radius: 7px !important; width: 28px; height: 28px; /* Bootstrap's real .btn sets its own padding (equal specificity to this 3-class selector, so without !important it was still winning on this one property) — with a fixed width/height that leftover padding ate into the box asymmetrically per icon, reading as "not aligned" even though the flex centering below was already correct. */ padding: 0 !important; line-height: 1 !important; display: inline-flex; align-items: center; justify-content: center; box-shadow: none !important; transform: translateY(-6px); } .home-map-overlay--tr .btn-dark-desktop .btn-dark:hover { background: var(--color-border) !important; } .home-map-overlay--tr .btn-dark-desktop .btn-dark { border-color: #94a3b8 !important; } /* The four icons mix FontAwesome's Solid (fas) and Regular (far) styles, which ship as separate font files with slightly different internal glyph metrics — centering the itself isn't enough since the glyph can still sit off-center within its own em-box. Forcing a fixed, identical font-size/line-height and flex-centering the icon glyph itself (not just its parent) makes all four line up on the same visual center regardless of which icon style they come from. */ .home-map-overlay--tr .btn-dark-desktop .btn-dark i { display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; } .home-map-overlay--tr span { color: #64748b; } /* ---- Filter panel ("Show Vehicles" / POI / Geofence / Traffic / Zoom / Project), opened from the bookmark-cluster's filter button. Scoped to .home-filter-panel (an extra class on the same element, added in HomeComponent.jsx) rather than its existing .vehicle-info class, since that class is shared with VehicleInfoComponent's unrelated vehicle-detail popup — restyling .vehicle-info directly would have reskinned that too. */ /* Icon-cluster box (.home-map-overlay--tr, the "Map refresh" container): top:70px + 4px top/bottom padding + 28px button height + 1px top/bottom border from .home-map-overlay--light = 108px bottom edge — this panel's top starts exactly there, flush against the cluster's bottom. */ .home-filter-panel { top: 108px; right: 12px; width: 300px; } /* BookmarkComponent's popup — shares the plain .vehicle-info base (card chrome comes from its own inner .card), scoped here just to reposition it flush below the icon cluster like .home-filter-panel, instead of the generic .vehicle-info top:90px/right:1% meant for the old layout. */ .home-bookmark-panel { top: 108px; right: 12px; width: 300px; } /* Monitoring Panel toggle + collection-type/on-off-road filters + legend dots (.mapPanel) — was plain in-flow content, rendering at the top of the map area (first child before #map in the same position:relative wrapper), which could sit under/behind the floating search panel. Given the same position:absolute treatment, top-aligned with the Select Ambulance panel on the left (top:12px); the bookmark/filter/refresh icon cluster moved below it (top:70px) instead of the other way around. .home-filter-panel still shares this same spot when open — they're mutually exclusive in practice since the filter panel only opens on demand, but flagging the overlap possibility. */ /* Now carries home-map-overlay + home-map-overlay--tr + home-map-overlay--light too (same classes as the bookmark/filter/refresh icon cluster and the Select Ambulance panel), so position:absolute/right:12px/background/ border/shadow/border-radius all come from those shared rules — the previous separate copies of all of that here were a likely source of subtle mismatches. Only overriding what genuinely needs to differ from --tr (which the icon cluster also uses): top (12px here vs --tr's 70px, so this sits above the icon cluster instead of overlapping it) and padding (8px 10px, matching --tl's Select Ambulance panel exactly, vs --tr's 6px 10px). Both work via plain source order — same specificity, this rule just comes later in the file. */ .home-monitoring-panel { top: 12px; padding: 4px 10px; } /* Map-refresh timestamp relocated out of the icon-cluster overlay (see HomeComponent.jsx) into the status-bar row itself, pinned to the far right so it lines up on the same row as the status counters (e.g. "Total Amby") instead of sitting under the floating map icons. This row (.home-toolbar-row) used to rely on float:left (the status divs' own .pull-left) + float:right (this text) + a clearfix — with `.home-status-bar` also forcing itself to `display:flex`, the two floats could end up overlapping instead of sharing the row, which silently ate clicks on the rightmost status item (whichever element painted on top, closer to the end of the DOM, intercepted the click). Flex with margin-left:auto guarantees no overlap. */ .home-toolbar-row { display: flex; align-items: center; flex-wrap: wrap; } .home-toolbar-row .clearfix { display: none; } /* Custom Map/Satellite toggle (replaces Google's native, unstyleable control) — built and injected via HomeComponent.jsx's addMapTypeToggleControl, pushed onto the map's own BOTTOM_LEFT control slot so positioning is handled by the Maps API itself. */ .home-maptype-toggle { display: flex; margin: 10px; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); font-family: var(--font-family-base); } .home-maptype-toggle__btn { border: none; background: #ffffff; color: #1f2430; font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 16px; cursor: pointer; } .home-maptype-toggle__btn.active { background: var(--color-primary); color: #ffffff; } .home-map-refresh-text { float: none; margin-left: auto; font-family: var(--font-family-base); font-size: 0.78rem; font-weight: 600; color: #64748b; padding: 10px 4px; white-space: nowrap; } .home-filter-panel .card { border: none; border-radius: var(--radius-base); box-shadow: var(--shadow-card); } /* Close button intentionally NOT restyled here — left on the shared .vehicle-info .card .card-header-action a base style (custom.css) so it matches the Bookmark popup's close button exactly, since both popups share the same .vehicle-info foundation and should look identical. */ .home-filter-panel .p-3 h5.m-0 { padding: 2px 0; } .home-filter-panel h5 { font-family: var(--font-family-base); font-weight: 700; font-size: 1rem; color: #1f2430; } .home-filter-panel .bookmark-list-group { padding: 4px 0; } .home-filter-panel .list-group-item { font-family: var(--font-family-base); font-size: 0.82rem; font-weight: 500; line-height: 1.1; color: #1f2430; padding: 6px 20px !important; border-bottom: 1px solid var(--color-border) !important; } .home-filter-panel .list-group-item:last-child { border-bottom: none !important; } /* "Project" label is a plain text node directly above the SelectBox inside .form-group (not a separate