diff options
| author | Copilot <198982749+Copilot@users.noreply.github.com> | 2025-11-07 12:24:44 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2025-11-07 12:24:44 +0100 |
| commit | 0add08015b348de5a069168b57e0be6f5778b97b (patch) | |
| tree | 607365003956b419e689e471dd2641a5f3d9f62e /src/frontend/app/routes | |
| parent | 86ceab13fa9eab173522d67e5917c90840fb563f (diff) | |
Show all stop lines with horizontal scroll for 6+ lines (#79)
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: arielcostas <94913521+arielcostas@users.noreply.github.com>
Co-authored-by: Ariel Costas Guerrero <ariel@costas.dev>
Diffstat (limited to 'src/frontend/app/routes')
| -rw-r--r-- | src/frontend/app/routes/estimates-$id.css | 28 | ||||
| -rw-r--r-- | src/frontend/app/routes/estimates-$id.tsx | 13 |
2 files changed, 41 insertions, 0 deletions
diff --git a/src/frontend/app/routes/estimates-$id.css b/src/frontend/app/routes/estimates-$id.css index fde4099..bb68c37 100644 --- a/src/frontend/app/routes/estimates-$id.css +++ b/src/frontend/app/routes/estimates-$id.css @@ -209,3 +209,31 @@ width: 1rem; height: 1rem; } + +.estimates-lines-container { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; + margin-bottom: 1rem; +} + +.estimates-lines-container.scrollable { + flex-wrap: nowrap; + overflow-x: auto; + max-height: calc(2 * (var(--line-icon-height, 2rem) + 0.5rem)); + align-content: flex-start; + scrollbar-width: thin; +} + +.estimates-lines-container.scrollable::-webkit-scrollbar { + height: 6px; +} + +.estimates-lines-container.scrollable::-webkit-scrollbar-thumb { + background-color: var(--border-color); + border-radius: 3px; +} + +.estimates-line-icon { + flex-shrink: 0; +} diff --git a/src/frontend/app/routes/estimates-$id.tsx b/src/frontend/app/routes/estimates-$id.tsx index c8c52b5..4502d9e 100644 --- a/src/frontend/app/routes/estimates-$id.tsx +++ b/src/frontend/app/routes/estimates-$id.tsx @@ -21,6 +21,7 @@ import { PullToRefresh } from "~/components/PullToRefresh"; import { useAutoRefresh } from "~/hooks/useAutoRefresh"; import { type RegionId, getRegionConfig } from "~/data/RegionConfig"; import { StopAlert } from "~/components/StopAlert"; +import LineIcon from "~/components/LineIcon"; export interface Estimate { line: string; @@ -296,6 +297,18 @@ export default function Estimates() { </button> </div> + {stopData && stopData.lines && stopData.lines.length > 0 && ( + <div + className={`estimates-lines-container ${stopData.lines.length >= 6 ? "scrollable" : ""}`} + > + {stopData.lines.map((line) => ( + <div key={line} className="estimates-line-icon"> + <LineIcon line={line} region={region} rounded /> + </div> + ))} + </div> + )} + {stopData && <StopAlert stop={stopData} />} <div className="table-responsive"> |