Small changes to styles

master
Araozu 2024-09-10 20:02:41 -05:00
parent ff59e1a1d2
commit a60f25872f
2 changed files with 12 additions and 7 deletions

View File

@ -79,8 +79,8 @@ function LineEl(props: { line: Line }) {
style={`color: ${props.line.color};--hover-bg: ${props.line.color};--hover-on-bg: white`} style={`color: ${props.line.color};--hover-bg: ${props.line.color};--hover-on-bg: white`}
> >
<LineSegmentsIcon class="px-1" fill={props.line.color} /> <LineSegmentsIcon class="px-1" fill={props.line.color} />
<span class="px-2" title={props.line.district}> <span class="px-2" title={props.line.name}>
Linea {props.line.name} Linea {props.line.id}
</span> </span>
<Suspense> <Suspense>
<For each={routesData() ?? []}> <For each={routesData() ?? []}>
@ -185,6 +185,11 @@ function RouteEl(props: {
set_return_count((c) => c - 1); set_return_count((c) => c - 1);
}} }}
onClick={() => { onClick={() => {
if (departure_active() && return_active()) {
toggle_departure();
toggle_return();
return;
}
if (departure_count() === 1) { if (departure_count() === 1) {
toggle_departure(); toggle_departure();
} }

View File

@ -44,12 +44,12 @@ function LinesContainer() {
return ( return (
<div class="fixed bottom-0 left-0 w-screen text-c-on-bg z-[500]"> <div class="fixed bottom-0 left-0 w-screen text-c-on-bg z-[500]">
<div class="py-1"> <div class="whitespace-nowrap">
<For each={linesData() ?? []}> <For each={linesData() ?? []}>
{(line) => <RouteChipContainer line={line} active_line={selected_line()} />} {(line) => <RouteChipContainer line={line} active_line={selected_line()} />}
</For> </For>
</div> </div>
<div class="py-2 bg-c-bg"> <div class="py-2 bg-c-bg whitespace-nowrap overflow-x-scroll">
<For each={linesData() ?? []}> <For each={linesData() ?? []}>
{(line) => ( {(line) => (
<LineChip <LineChip
@ -84,7 +84,7 @@ function LineChip(props: {
} }
}} }}
> >
Linea {props.line.name} Linea {props.line.id}
</button> </button>
); );
} }
@ -96,9 +96,9 @@ function RouteChipContainer(props: {line: Line, active_line: number}) {
return res.json(); return res.json();
}); });
const container_classes = () => (props.active_line === props.line.id ? "inline-block" : "hidden"); const container_classes = () => (props.active_line === props.line.id ? "inline-block w-screen" : "hidden");
return ( return (
<div class={container_classes()} <div class={`${container_classes()} whitespace-nowrap overflow-x-scroll pb-2`}
style={`--hover-bg: ${props.line.color};--hover-on-bg: white`} style={`--hover-bg: ${props.line.color};--hover-on-bg: white`}
> >
<For each={routesData() ?? []}> <For each={routesData() ?? []}>