Naive mobile UI

src/App.tsx

@@ -1,6 +1,6 @@
 import "leaflet/dist/leaflet.css";
 import { Index } from "./pages/Index";
-import { Route, Router } from "@solidjs/router";
+import { Route, HashRouter } from "@solidjs/router";
 import { Editor } from "./pages/Editor";
 import { Index2 } from "./pages/Index2";
 import { Arrow } from "./pages/Arrow";
@@ -8,12 +8,12 @@ import { Arrow } from "./pages/Arrow";
 export default function() {
     return (
         <>
-            <Router>
+            <HashRouter>
                 <Route path="/" component={Index} />
                 <Route path="/new" component={Index2} />
                 <Route path="/editor" component={Editor} />
                 <Route path="/arrow" component={Arrow} />
-            </Router>
+            </HashRouter>
         </>
     );
 }

src/pages/Index2.tsx

@@ -7,7 +7,7 @@ let global_map: L.Map | null = null;
 const [global_count, set_global_count] = createSignal(0);
 
 export function Index2() {
-    const container = <div class="md:h-[98vh] h-[65vh] md:rounded-lg dark:opacity-60" />;
+    const container = <div class="md:h-[98vh] h-screen md:rounded-lg dark:opacity-60" />;
 
     onMount(() => {
         global_map = L.map(container as HTMLElement)
@@ -21,11 +21,14 @@ export function Index2() {
     });
 
     return (
-        <div class="grid md:grid-cols-[15rem_auto] md:grid-rows-none grid-rows-[65vh_35vh]">
+        <div class="grid md:grid-cols-[15rem_auto]">
-            <div class="md:h-screen overflow-scroll">
+            <div
-                <h1 class="text-c-primary text-center font-bold text-2xl py-4">AQP combi</h1>
+                class="md:h-screen md:relative md:w-auto md:overflow-scroll bg-c-bg
+                    fixed z-[500] bottom-0 w-screen"
+            >
+                <h1 class="hidden md:block text-c-primary text-center font-bold text-2xl py-4">AQP combi</h1>
 
-                <h2 class="bg-c-primary text-white py-2 px-2 font-bold text-lg">
+                <h2 class="hidden md:block bg-c-primary text-white py-2 px-2 font-bold text-lg">
                     Lineas
                 </h2>
 
@@ -71,10 +74,15 @@ function LineEl(props: { line: Line }) {
         <div
             style={`color: ${props.line.color};--hover-bg: ${props.line.hover_bg};--hover-on-bg: ${props.line.hover_on_bg}`}
         >
-            <LineSegmentsIcon class="px-1" fill={props.line.color} />
+            <div class="inline-block bg-c-bg rounded-md m-2 border-2 border-[var(--color)]
-            <span class="px-2" title={props.line.district}>
+                md:m-0 md:border-none"
+            >
+                <LineSegmentsIcon class="px-1 hidden md:inline-block" fill={props.line.color} />
+                <span class="px-2 font-bold md:font-normal" title={props.line.district}>
                     Linea {props.line.name}
                 </span>
+            </div>
+            <div class="absolute bottom-10 md:static">
                 <Suspense>
                     <For each={routesData() ?? []}>
                         {(r) => (
@@ -87,6 +95,7 @@ function LineEl(props: { line: Line }) {
                     </For>
                 </Suspense>
             </div>
+        </div>
     );
 }
 
@@ -147,6 +156,13 @@ function RouteEl(props: {
         }
     };
 
+    const both_classes = () => {
+        if (departure_active() && return_active()) {
+            return "bg-r-hover-bg text-r-hover-on-bg";
+        } else {
+            return "";
+        }
+    };
     const departure_classes = () => {
         if (departure_count() > 0) {
             return "bg-r-hover-bg text-r-hover-on-bg";
@@ -163,10 +179,13 @@ function RouteEl(props: {
     };
     return (
         <button
-            class="grid grid-cols-[auto_2.75rem_3.5rem] w-full text-left cursor-pointer"
+            class="md:grid grid-cols-[auto_2.75rem_3.5rem] md:w-full md:m-0 text-left cursor-pointer md:border-none
+                focus-visible:outline-none
+                inline-block w-auto m-2 rounded-full"
         >
             <span
-                class={"pl-10 border-2 border-transparent hover:border-r-hover-bg"}
+                class={`md:pl-10 md:border-2 md:border-transparent hover:border-r-hover-bg ${both_classes()} md:rounded-none
+                    bg-c-bg border border-[var(--color)] rounded-full px-2`}
                 onMouseEnter={() => {
                     set_global_count((c) => c + 1);
                     set_departure_count((c) => c + 1);
@@ -178,18 +197,23 @@ function RouteEl(props: {
                     set_return_count((c) => c - 1);
                 }}
                 onClick={() => {
+                    if (departure_active() && return_active()) {
+                        toggle_departure();
+                        toggle_return();
+                    } else {
                         if (departure_count() === 1) {
                             toggle_departure();
                         }
                         if (return_count() === 1) {
                             toggle_return();
                         }
+                    }
                 }}
             >
                 Ruta {props.route.name}
             </span>
             <span
-                class={`text-center border-2 border-transparent ${departure_classes()}`}
+                class={`md:inline-block hidden text-center border-2 border-transparent ${departure_classes()}`}
                 onMouseEnter={() => {
                     set_global_count((c) => c + 1);
                     set_departure_count((c) => c + 1);
@@ -203,7 +227,7 @@ function RouteEl(props: {
                 Ida
             </span>
             <span
-                class={`text-center border-2 border-transparent ${return_classes()}`}
+                class={`md:inline-block hidden text-center border-2 border-transparent ${return_classes()}`}
                 onMouseEnter={() => {
                     set_global_count((c) => c + 1);
                     set_return_count((c) => c + 1);