diff options
Diffstat (limited to 'src/frontend/app/components/Stops')
| -rw-r--r-- | src/frontend/app/components/Stops/ConsolidatedCirculationCard.tsx | 6 | ||||
| -rw-r--r-- | src/frontend/app/components/Stops/ConsolidatedCirculationList.css | 18 |
2 files changed, 23 insertions, 1 deletions
diff --git a/src/frontend/app/components/Stops/ConsolidatedCirculationCard.tsx b/src/frontend/app/components/Stops/ConsolidatedCirculationCard.tsx index 97f0682..707ecce 100644 --- a/src/frontend/app/components/Stops/ConsolidatedCirculationCard.tsx +++ b/src/frontend/app/components/Stops/ConsolidatedCirculationCard.tsx @@ -207,7 +207,11 @@ export const ConsolidatedCirculationCard: React.FC< </div> {hasGpsPosition && ( <div className="gps-indicator" title="Live GPS tracking"> - <span className="gps-pulse" /> + <span + className={`gps-pulse ${ + estimate.isPreviousTrip ? "previous-trip" : "" + }`} + /> </div> )} <div className={`eta-badge ${timeClass}`}> diff --git a/src/frontend/app/components/Stops/ConsolidatedCirculationList.css b/src/frontend/app/components/Stops/ConsolidatedCirculationList.css index 1788ba8..5afdeaa 100644 --- a/src/frontend/app/components/Stops/ConsolidatedCirculationList.css +++ b/src/frontend/app/components/Stops/ConsolidatedCirculationList.css @@ -194,6 +194,12 @@ animation: gpsPulse 2s ease-in-out infinite; } +.gps-pulse.previous-trip { + background: #ff9800; + box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.2); + animation: gpsPulseOrange 2s ease-in-out infinite; +} + @keyframes gpsPulse { 0% { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2); @@ -206,6 +212,18 @@ } } +@keyframes gpsPulseOrange { + 0% { + box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.2); + } + 50% { + box-shadow: 0 0 0 6px rgba(255, 152, 0, 0.1); + } + 100% { + box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.2); + } +} + @media (max-width: 480px) { .consolidated-circulation-card { padding: 0.65rem 0.75rem; |
