From 959b519d754240a6a938d9f304015969da995bbf Mon Sep 17 00:00:00 2001
From: Araozu <fernando@araozu.dev>
Date: Mon, 9 Sep 2024 13:43:08 -0500
Subject: [PATCH] Naive mobile UI

---
 src/App.tsx          |  6 ++--
 src/pages/Index2.tsx | 78 +++++++++++++++++++++++++++++---------------
 2 files changed, 54 insertions(+), 30 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index bee0fea..3d63f4c 100644
--- a/src/App.tsx
+++ b/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>
         </>
     );
 }
diff --git a/src/pages/Index2.tsx b/src/pages/Index2.tsx
index 01e4d43..ebd2aa9 100644
--- a/src/pages/Index2.tsx
+++ b/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="md:h-screen overflow-scroll">
-                <h1 class="text-c-primary text-center font-bold text-2xl py-4">AQP combi</h1>
+        <div class="grid md:grid-cols-[15rem_auto]">
+            <div
+                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,21 +74,27 @@ 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} />
-            <span class="px-2" title={props.line.district}>
-                Linea {props.line.name}
-            </span>
-            <Suspense>
-                <For each={routesData() ?? []}>
-                    {(r) => (
-                        <RouteEl
-                            line_name={props.line.name}
-                            route={r}
-                            color={props.line.color}
-                        />
-                    )}
-                </For>
-            </Suspense>
+            <div class="inline-block bg-c-bg rounded-md m-2 border-2 border-[var(--color)]
+                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) => (
+                            <RouteEl
+                                line_name={props.line.name}
+                                route={r}
+                                color={props.line.color}
+                            />
+                        )}
+                    </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_count() === 1) {
+                    if (departure_active() && return_active()) {
                         toggle_departure();
-                    }
-                    if (return_count() === 1) {
                         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);