public/n/lines.json

@@ -1 +1,62 @@
-[{"id":2,"name":"C2 - Cono Norte","district":"","color":"#DBD9D1"},{"id":3,"name":"C3 - Transcayma","district":"","color":"#FEDD00"},{"id":4,"name":"C4 - Unión Aqp","district":"","color":"#FF6900"},{"id":5,"name":"C5 - EtraBus","district":"","color":"#FF0000"},{"id":6,"name":"C6 - Unión Grau","district":"","color":"#AFA96E"},{"id":7,"name":"C7 - AqpMasivo","district":"","color":"#8D4925"},{"id":8,"name":"C8 - Bus Characato","district":"","color":"#00C996"},{"id":9,"name":"C9 - Emarsistran","district":"","color":"#10069f"},{"id":10,"name":"C10 - MegaBus","district":"","color":"#DF1995"},{"id":11,"name":"C11 - Cotum","district":"","color":"#2F4F4F"}]
+[
+    {
+        "id": 3,
+        "name": "C3 - Transcayma",
+        "district": "",
+        "color": "#FEDD00"
+    },
+    {
+        "id": 9,
+        "name": "C9 - Emarsistran",
+        "district": "",
+        "color": "#10069f"
+    },
+    {
+        "id": 10,
+        "name": "C10 - MegaBus",
+        "district": "",
+        "color": "#DF1995"
+    },
+    {
+        "id": 5,
+        "name": "C5 - EtraBus",
+        "district": "",
+        "color": "#FF0000"
+    },
+    {
+        "id": 11,
+        "name": "C11 - Cotum",
+        "district": "",
+        "color": "black"
+    },
+    {
+        "id": 7,
+        "name": "C7 - AqpMasivo",
+        "district": "",
+        "color": "#8D4925"
+    },
+    {
+        "id": 2,
+        "name": "C2 - Cono Norte",
+        "district": "",
+        "color": "#52525b"
+    },
+    {
+        "id": 4,
+        "name": "C4 - Unión Aqp",
+        "district": "",
+        "color": "#FF6900"
+    },
+    {
+        "id": 6,
+        "name": "C6 - Unión Grau",
+        "district": "",
+        "color": "#b8860b"
+    },
+    {
+        "id": 8,
+        "name": "C8 - Bus Characato",
+        "district": "",
+        "color": "#00C996"
+    }
+]

src/pages/Index.tsx

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

src/pages/IndexMobile.tsx

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