diff --git a/web/fleet-core.js b/web/fleet-core.js index 9cdbdd9..658a23e 100644 --- a/web/fleet-core.js +++ b/web/fleet-core.js @@ -141,7 +141,17 @@ export function initMap(elementId, opts = {}) { 15, 13, 18, 20, ], - 'circle-color': ['get', 'marker_color'], + // Always tint by cost-centre colour — operational state is shown + // via opacity (moving=1, parked=0.7, offline=0.35) so colour stays + // a stable identity cue and the filter dropdown can double as a + // colour legend. + 'circle-color': ['coalesce', ['get', 'cost_centre_color'], '#94a3b8'], + 'circle-opacity': [ + 'case', + ['==', ['get', 'operational_state'], 'moving'], 1.0, + ['==', ['get', 'operational_state'], 'parked'], 0.7, + 0.35, + ], 'circle-stroke-color': '#0b1220', 'circle-stroke-width': [ 'interpolate', ['linear'], ['zoom'], @@ -315,11 +325,11 @@ export function renderView(map, payload, { summaryRoot, sloRoot } = {}) { function _renderSummary(root, summary) { const tiles = [ - { label: 'Active', value: summary.total_active ?? '—' }, - { label: 'Moving', value: summary.moving ?? '—' }, - { label: 'Parked', value: summary.parked ?? '—' }, + { label: 'Active', value: summary.total_active ?? '—' }, + { label: 'Moving', value: summary.moving ?? '—' }, + { label: 'Parked', value: summary.parked ?? '—' }, { label: 'Offline', value: summary.offline ?? '—' }, - { label: 'Below freshness SLO', value: summary.below_freshness_slo ?? '—' }, + { label: 'Stale', value: summary.below_freshness_slo ?? '—' }, ]; root.innerHTML = tiles .map(t => ` @@ -348,17 +358,197 @@ function _renderSlos(root, slos) { }).join(''); } -/* ---------- filters ---------- */ +/* ---------- filters (multi-select dropdowns) ---------- */ -export function initFilters(formEl, onChange) { - const handler = () => { - const fd = new FormData(formEl); +/** + * Wire the cost-centre + assigned-city filter widgets. + * + * Returns an `updateOptions(features)` callback that the caller invokes + * after each /api/views/live refresh — the widgets repopulate from the + * loaded feature properties, so we don't need a separate enum endpoint. + * + * The widget itself is a button that toggles a popover. The popover has + * an "All …" checkbox at the top and a checkbox per distinct value. + * `cost_centre_color` from the feature is rendered as a swatch beside the + * cost-centre options — turning the filter into a live colour legend. + * + * onChange receives a flat filter object compatible with serve.fn_live_view: + * { cost_centre: 'isp', assigned_city: 'Nairobi' } ← single select OR + * no key ← when "All" picked + * + * Multiple selections within one widget collapse to the first value (the + * SQL function takes one) — we treat additional selections client-side + * as an OR by sending no filter and letting the renderer hide the rest. + * That keeps the SQL contract unchanged for P1. + */ +export function initFilters(root, onChange) { + const ccWidget = _buildMultiSelect( + root.querySelector('#flt-cost-centre'), + { label: 'cost centre', plural: 'cost centres', showSwatch: true }, + ); + const cityWidget = _buildMultiSelect( + root.querySelector('#flt-assigned-city'), + { label: 'assigned city', plural: 'cities', showSwatch: false }, + ); + + const emit = () => { const filters = {}; - for (const [k, v] of fd.entries()) if (v) filters[k] = v; - onChange(filters); + const cc = ccWidget.getValues(); + const city = cityWidget.getValues(); + if (cc.length === 1) filters.cost_centre = cc[0]; + if (city.length === 1) filters.assigned_city = city[0]; + // For multi-selection client-side narrowing, stash so renderer can filter + onChange(filters, { costCentres: cc, cities: city }); }; - formEl.addEventListener('change', handler); - formEl.addEventListener('submit', (e) => { e.preventDefault(); handler(); }); + + ccWidget.onChange(emit); + cityWidget.onChange(emit); + + return { + updateOptions(features) { + const cc = new Map(); + const city = new Set(); + for (const f of features) { + const p = f.properties || {}; + if (p.cost_centre) cc.set(p.cost_centre, p.cost_centre_color || '#94a3b8'); + if (p.assigned_city) city.add(p.assigned_city); + } + ccWidget.setOptions([...cc.entries()].sort() + .map(([value, color]) => ({ value, color }))); + cityWidget.setOptions([...city].sort() + .map(value => ({ value }))); + }, + getActive() { + return { costCentres: ccWidget.getValues(), cities: cityWidget.getValues() }; + }, + }; +} + +function _buildMultiSelect(root, { label, plural, showSwatch }) { + // root is a
we own. Render: a button + a hidden popover. + root.classList.add('ms'); + root.innerHTML = ` + + + `; + const btn = root.querySelector('.ms-btn'); + const btnLabel = root.querySelector('.ms-btn-label'); + const pop = root.querySelector('.ms-pop'); + const allBox = root.querySelector('.ms-all'); + const optsRoot = root.querySelector('.ms-options'); + + const listeners = []; + let options = []; // [{value, color?}] + + const updateLabel = () => { + const checked = [...optsRoot.querySelectorAll('input:checked')]; + if (checked.length === 0 || checked.length === options.length) { + btnLabel.textContent = `All ${plural}`; + allBox.checked = true; + } else if (checked.length === 1) { + btnLabel.textContent = checked[0].value; + allBox.checked = false; + } else { + btnLabel.textContent = `${checked.length} ${plural}`; + allBox.checked = false; + } + }; + const fire = () => listeners.forEach(fn => fn()); + + btn.addEventListener('click', (e) => { + e.stopPropagation(); + const open = pop.hasAttribute('hidden'); + if (open) { + pop.removeAttribute('hidden'); + btn.setAttribute('aria-expanded', 'true'); + } else { + pop.setAttribute('hidden', ''); + btn.setAttribute('aria-expanded', 'false'); + } + }); + document.addEventListener('click', (e) => { + if (!root.contains(e.target) && !pop.hasAttribute('hidden')) { + pop.setAttribute('hidden', ''); + btn.setAttribute('aria-expanded', 'false'); + } + }); + + allBox.addEventListener('change', () => { + const checked = allBox.checked; + optsRoot.querySelectorAll('input').forEach(cb => { cb.checked = checked; }); + if (!checked) allBox.checked = false; // "All" un-check = clear + updateLabel(); + fire(); + }); + + return { + setOptions(opts) { + options = opts; + // Preserve current selections by value when re-rendering + const prevChecked = new Set( + [...optsRoot.querySelectorAll('input:checked')].map(cb => cb.value), + ); + const wasAll = prevChecked.size === 0 || allBox.checked; + optsRoot.innerHTML = opts.map(({ value, color }) => ` + + `).join(''); + optsRoot.querySelectorAll('input').forEach(cb => { + cb.addEventListener('change', () => { updateLabel(); fire(); }); + }); + updateLabel(); + }, + getValues() { + const checked = [...optsRoot.querySelectorAll('input:checked')]; + if (checked.length === 0 || checked.length === options.length) return []; + return checked.map(cb => cb.value); + }, + onChange(fn) { listeners.push(fn); }, + }; +} + +/** + * Client-side narrowing: after rendering, hide markers whose cost_centre + * or assigned_city isn't in the multi-select set. Used when the user picks + * a subset (the SQL accepts only single-value filters in P1). + * + * Note: this hides via MapLibre `setFilter` so the source data is intact — + * counts in the FLEET NOW tiles still reflect everything fetched. + */ +export function applyClientFilter(map, { costCentres = [], cities = [] } = {}) { + const layers = ['vehicles-circle', 'vehicles-arrow', 'vehicles-label']; + const conds = []; + if (costCentres.length > 0 && costCentres.length > 1) { + conds.push(['in', ['get', 'cost_centre'], ['literal', costCentres]]); + } + if (cities.length > 0 && cities.length > 1) { + conds.push(['in', ['get', 'assigned_city'], ['literal', cities]]); + } + const filter = conds.length === 0 ? null + : conds.length === 1 ? conds[0] + : ['all', ...conds]; + // Preserve the show_arrow filter on the arrow layer + for (const id of layers) { + if (!map.getLayer(id)) continue; + if (id === 'vehicles-arrow') { + const base = ['==', ['get', 'show_arrow'], true]; + map.setFilter(id, filter ? ['all', base, filter] : base); + } else { + map.setFilter(id, filter); + } + } } /* ---------- trip panel ---------- */ @@ -435,15 +625,9 @@ function _renderTripPanel(map, els, payload) { const reportingTime = payload.reporting_time ? _formatTimeOnly(payload.reporting_time) : '—'; els.totals.innerHTML = ` -
Reporting time: ${_esc(reportingTime)}
-
- ${t.trip_count ?? 0} trips · - ${_fmtNum(t.distance_km, 1)} km -
-
- drive ${_fmtNum(t.driving_min, 0)}m · idle ${_fmtNum(t.idling_min, 0)}m · stop ${_fmtNum(t.stopped_min, 0)}m -
-
${q.fix_count ?? 0} fixes · ACC ${q.has_acc_data ? 'on' : 'off'}
+
Reporting ${_esc(reportingTime)} · ${t.trip_count ?? 0} trips · ${_fmtNum(t.distance_km, 1)} km
+
drive ${_fmtNum(t.driving_min, 0)}m · idle ${_fmtNum(t.idling_min, 0)}m · stop ${_fmtNum(t.stopped_min, 0)}m
+
${q.fix_count ?? 0} fixes · ACC ${q.has_acc_data ? 'on' : 'off'}
`; const trips = payload.trips || []; @@ -452,27 +636,27 @@ function _renderTripPanel(map, els, payload) { return; } els.list.innerHTML = trips.map(trip => ` -
-
+
+
Trip ${trip.trip_id} ${_fmtNum(trip.distance_km, 1)} km
-
- ${_formatTimeOnly(trip.started_at)} → ${_formatTimeOnly(trip.ended_at)} +
${_formatTimeOnly(trip.started_at)} → ${_formatTimeOnly(trip.ended_at)}
+
${_fmtNum(trip.duration_min, 0)} min ${trip.idling_min > 0 ? `idle ${_fmtNum(trip.idling_min, 0)}m` : ''}
-
+
${_reasonLabel(trip.end_reason)}
`).join(''); - for (const row of els.list.querySelectorAll('.trip-row')) { - row.addEventListener('click', () => { - els.list.querySelectorAll('.trip-row.selected') - .forEach(r => r.classList.remove('selected')); - row.classList.add('selected'); - const tid = Number(row.dataset.tripId); + for (const card of els.list.querySelectorAll('.trip-card')) { + card.addEventListener('click', () => { + els.list.querySelectorAll('.trip-card.selected') + .forEach(c => c.classList.remove('selected')); + card.classList.add('selected'); + const tid = Number(card.dataset.tripId); const trip = trips.find(x => x.trip_id === tid); if (trip) _showAndAnimateTrip(map, trip); }); @@ -535,7 +719,9 @@ function _showAndAnimateTrip(map, trip) { // eslint-disable-next-line no-undef new maplibregl.LngLatBounds(coords[0], coords[0]), ); - map.fitBounds(bounds, { padding: { top: 80, right: 380, bottom: 60, left: 60 }, duration: 600 }); + // Bottom panel takes ~60% height when open; pad the south more so the + // polyline isn't hidden under the trip cards. + map.fitBounds(bounds, { padding: { top: 60, right: 60, bottom: 360, left: 60 }, duration: 600 }); _animatePathMarker(map, coords, TRIP_ANIM_MS); } diff --git a/web/index-live.html b/web/index-live.html index 313d518..9c57421 100644 --- a/web/index-live.html +++ b/web/index-live.html @@ -9,6 +9,7 @@ :root { --bg: #0f172a; --panel: #1e293b; + --panel-2: #0b1220; --text: #f1f5f9; --muted: #94a3b8; --accent: #10b981; @@ -18,43 +19,105 @@ * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; } - body { display: grid; grid-template-rows: auto 1fr; } + + body { display: grid; grid-template-rows: auto auto 1fr; min-height: 100%; } + + /* ─────────── top header ─────────── */ header { display: flex; align-items: center; justify-content: space-between; - padding: 10px 16px; background: var(--panel); border-bottom: 1px solid #0b1220; + padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--panel-2); + } + header h1 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } + header .right { display: flex; gap: 16px; align-items: center; font-size: 12px; color: var(--muted); } + button.logout { + background: transparent; color: var(--muted); border: 1px solid var(--muted); + padding: 3px 10px; border-radius: 4px; cursor: pointer; font-size: 11px; + } + button.logout:hover { color: var(--text); border-color: var(--text); } + + /* ─────────── top dashboard band: tiles + slos + filters ─────────── */ + .top-band { + display: grid; + grid-template-columns: minmax(260px,auto) minmax(260px,1fr) minmax(280px,auto); + gap: 16px; + padding: 10px 16px; + background: var(--panel); + border-bottom: 1px solid var(--panel-2); + } + .band-block { display: flex; flex-direction: column; gap: 4px; } + .band-title { + font-size: 10px; text-transform: uppercase; color: var(--muted); + letter-spacing: 0.08em; font-weight: 600; + } + .band-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } + + .tile { + background: var(--panel-2); padding: 4px 10px; border-radius: 4px; + min-width: 70px; display: flex; flex-direction: column; gap: 0; + } + .tile-label { font-size: 9px; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; } + .tile-value { font-size: 18px; font-weight: 600; line-height: 1.1; } + + .slo { + display: grid; grid-template-columns: 1fr auto auto; gap: 8px; + padding: 3px 8px; border-radius: 4px; font-size: 11px; + background: var(--panel-2); } - header h1 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } - header .right { display: flex; gap: 16px; align-items: center; font-size: 13px; color: var(--muted); } - main { display: grid; grid-template-columns: 320px 1fr; min-height: 0; } - aside { padding: 12px; overflow: auto; border-right: 1px solid #0b1220; background: var(--panel); } - #map { width: 100%; height: 100%; } - .tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; } - .tile { background: #0b1220; padding: 10px; border-radius: 6px; } - .tile-label { font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.04em; } - .tile-value { font-size: 22px; font-weight: 600; margin-top: 2px; } - h3 { font-size: 11px; text-transform: uppercase; color: var(--muted); margin: 16px 0 8px; letter-spacing: 0.06em; } - .slo { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; padding: 6px 8px; border-radius: 4px; font-size: 12px; margin-bottom: 4px; background: #0b1220; } .slo-name { color: var(--muted); } - .slo-status { text-transform: uppercase; font-size: 10px; letter-spacing: 0.06em; } + .slo-status { text-transform: uppercase; font-size: 9px; letter-spacing: 0.06em; } .slo-green .slo-status { color: var(--accent); } .slo-red .slo-status { color: var(--bad); } .slo-unknown .slo-status { color: var(--muted); } - .slo-empty { color: var(--muted); font-size: 12px; } + .slo-empty { color: var(--muted); font-size: 11px; } - /* hover popup matching the dark theme */ + /* ─────────── multi-select filter widget ─────────── */ + .ms { position: relative; min-width: 180px; } + .ms-btn { + width: 100%; display: flex; justify-content: space-between; align-items: center; + background: var(--panel-2); color: var(--text); + border: 1px solid var(--panel-2); border-radius: 4px; + padding: 6px 10px; font-size: 12px; cursor: pointer; font-family: inherit; + } + .ms-btn:hover { border-color: var(--muted); } + .ms-btn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + .ms-caret { color: var(--muted); font-size: 10px; margin-left: 8px; } + .ms-pop { + position: absolute; top: calc(100% + 4px); left: 0; right: 0; + background: var(--panel); border: 1px solid var(--panel-2); + border-radius: 6px; padding: 6px; z-index: 20; + max-height: 320px; overflow-y: auto; + box-shadow: 0 12px 32px rgba(0,0,0,0.55); + } + .ms-row { + display: flex; align-items: center; gap: 8px; + padding: 5px 8px; border-radius: 3px; font-size: 12px; cursor: pointer; + } + .ms-row:hover { background: var(--panel-2); } + .ms-row input[type="checkbox"] { margin: 0; accent-color: var(--accent); } + .ms-row-all { border-bottom: 1px solid var(--panel-2); margin-bottom: 4px; padding-bottom: 8px; } + .ms-swatch { + width: 10px; height: 10px; border-radius: 50%; + display: inline-block; flex-shrink: 0; + border: 1px solid rgba(0,0,0,0.3); + } + .ms-row-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + + /* ─────────── map (fills remaining height) ─────────── */ + #map-container { position: relative; min-height: 0; } + #map { position: absolute; inset: 0; } + + /* ─────────── hover popup (unchanged) ─────────── */ .fleet-popup .maplibregl-popup-content { - background: #1e293b !important; - color: var(--text) !important; - padding: 14px 16px !important; - border-radius: 8px !important; + background: var(--panel) !important; color: var(--text) !important; + padding: 14px 16px !important; border-radius: 8px !important; min-width: 240px; box-shadow: 0 12px 32px rgba(0,0,0,0.55); - border: 1px solid #0b1220; + border: 1px solid var(--panel-2); } .fleet-popup .maplibregl-popup-tip { display: none; } .popup-card { font-family: inherit; } .popup-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; } - .popup-plate { font-size: 16px; font-weight: 700; letter-spacing: 0.01em; } + .popup-plate { font-size: 16px; font-weight: 700; } .popup-pill { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; font-weight: 600; @@ -67,93 +130,70 @@ .popup-meta { color: var(--muted); font-size: 12px; margin: 2px 0 4px; } .popup-address { color: var(--text); font-size: 13.5px; margin: 6px 0 8px; font-weight: 500; } .popup-row { color: #cbd5e1; font-size: 12.5px; margin: 4px 0; } - form.filters { display: grid; gap: 8px; } - form.filters input, form.filters select { width: 100%; background: #0b1220; color: var(--text); border: 1px solid #0b1220; border-radius: 4px; padding: 6px 8px; font-size: 12px; } - form.filters label { font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.06em; } - button.logout { background: transparent; color: var(--muted); border: 1px solid var(--muted); padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; } - button.logout:hover { color: var(--text); border-color: var(--text); } - /* trip panel */ - #map-container { position: relative; height: 100%; } - #map { position: absolute; inset: 0; } - .trip-panel { - position: absolute; top: 0; right: 0; bottom: 0; - width: 360px; - background: var(--panel); - border-left: 1px solid #0b1220; + /* ─────────── bottom trip panel (slides up) ─────────── */ + .trip-dock { + position: absolute; left: 0; right: 0; bottom: 0; + background: var(--panel); border-top: 1px solid var(--panel-2); color: var(--text); - display: flex; flex-direction: column; - transform: translateX(100%); + display: grid; grid-template-rows: auto 1fr; + max-height: 60%; + transform: translateY(100%); transition: transform 0.22s ease; - z-index: 2; - overflow: hidden; - box-shadow: -8px 0 24px rgba(0,0,0,0.35); + z-index: 3; + box-shadow: 0 -8px 24px rgba(0,0,0,0.35); } - .trip-panel.open { transform: translateX(0); } - .trip-panel-header { - display: flex; justify-content: space-between; align-items: flex-start; - padding: 14px 16px 10px; border-bottom: 1px solid #0b1220; + .trip-dock.open { transform: translateY(0); } + .trip-dock-header { + display: flex; align-items: center; gap: 18px; padding: 10px 16px; + border-bottom: 1px solid var(--panel-2); flex-wrap: wrap; } - .trip-plate { font-size: 18px; font-weight: 700; letter-spacing: 0.01em; } + .trip-id-block { display: flex; flex-direction: column; min-width: 160px; } + .trip-plate { font-size: 16px; font-weight: 700; } .trip-driver { font-size: 12px; color: var(--muted); margin-top: 2px; } - .trip-close { - background: transparent; color: var(--muted); border: 0; - font-size: 24px; cursor: pointer; line-height: 1; padding: 0 4px; - } - .trip-close:hover { color: var(--text); } - .trip-controls { - display: flex; justify-content: space-between; align-items: center; - padding: 10px 16px; gap: 8px; border-bottom: 1px solid #0b1220; - } - .trip-controls label { font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.06em; display: flex; align-items: center; gap: 8px; } + .trip-totals { font-size: 12.5px; color: var(--muted); line-height: 1.5; } + .trip-totals strong { color: var(--text); font-weight: 600; } + .trip-quality { font-size: 10.5px; color: var(--muted); } + .trip-controls { display: flex; gap: 8px; align-items: center; margin-left: auto; } + .trip-controls label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); display: flex; gap: 6px; align-items: center; } .trip-controls input[type="date"] { - background: #0b1220; color: var(--text); - border: 1px solid #0b1220; border-radius: 4px; - padding: 4px 6px; font-size: 12px; font-family: inherit; - color-scheme: dark; + background: var(--panel-2); color: var(--text); + border: 1px solid var(--panel-2); border-radius: 4px; + padding: 4px 6px; font-size: 11px; font-family: inherit; color-scheme: dark; } - .trip-csv { + .trip-csv, .trip-close { background: transparent; color: var(--muted); border: 1px solid var(--muted); border-radius: 4px; - padding: 4px 10px; cursor: pointer; - font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; + padding: 4px 10px; cursor: pointer; font-size: 10px; + text-transform: uppercase; letter-spacing: 0.06em; } - .trip-csv:hover { color: var(--text); border-color: var(--text); } - .trip-totals { - padding: 12px 16px; font-size: 12.5px; color: var(--muted); - border-bottom: 1px solid #0b1220; line-height: 1.5; - } - .trip-totals strong { color: var(--text); font-weight: 600; } - .trip-totals .quality { font-size: 11px; margin-top: 6px; } - .trip-list { overflow: auto; flex: 1; } + .trip-csv:hover, .trip-close:hover { color: var(--text); border-color: var(--text); } + + .trip-list { display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px; } .trip-list-empty { padding: 16px; color: var(--muted); font-size: 12.5px; } - .trip-row { - padding: 10px 16px; - border-bottom: 1px solid #0b1220; - cursor: pointer; + .trip-card { + flex: 0 0 auto; min-width: 170px; max-width: 220px; + background: var(--panel-2); border-radius: 6px; padding: 10px 12px; + cursor: pointer; border-left: 3px solid transparent; } - .trip-row:hover { background: #0b1220; } - .trip-row.selected { - background: #0b1220; - border-left: 3px solid var(--accent); - padding-left: 13px; + .trip-card:hover { background: #111a2c; } + .trip-card.selected { border-left-color: var(--accent); } + .trip-card-top { + display: flex; justify-content: space-between; align-items: center; + font-size: 12.5px; font-weight: 600; margin-bottom: 4px; } - .trip-row-top { - display: flex; justify-content: space-between; - font-size: 13px; font-weight: 600; + .trip-card-times { font-size: 11px; color: var(--muted); } + .trip-card-meta { + display: flex; gap: 8px; font-size: 11px; color: var(--muted); margin-top: 2px; } - .trip-row-meta { - display: flex; gap: 10px; flex-wrap: wrap; - font-size: 11.5px; color: var(--muted); margin-top: 4px; - } - .trip-row-reason { + .trip-card-reason { display: inline-block; margin-top: 6px; - font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; + font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } - .trip-row-reason.work-stop { color: var(--accent); } - .trip-row-reason.nofix-stop { color: var(--warn); } - .trip-row-reason.long-gap { color: var(--bad); } + .trip-card-reason.work-stop { color: var(--accent); } + .trip-card-reason.nofix-stop { color: var(--warn); } + .trip-card-reason.long-gap { color: var(--bad); } @@ -164,45 +204,51 @@
-
- -
-
-
+
+
+ +