fernando/aqp-combi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Naive mobile UI

Browse Source
This commit is contained in:
Araozu 2024-09-09 13:43:08 -05:00
parent 3012d992b0
commit 959b519d75
2 changed files with 54 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.tsx
View File

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

78
src/pages/Index2.tsx
View File

@ -7,7 +7,7 @@ let global_map: L.Map | null = null;
const [global_count, set_global_count] = createSignal(0); const [global_count, set_global_count] = createSignal(0);
export function Index2() { 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(() => { onMount(() => {
global_map = L.map(container as HTMLElement) global_map = L.map(container as HTMLElement)
@ -21,11 +21,14 @@ export function Index2() {
}); });
return ( 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 Lineas
</h2> </h2>
@ -71,21 +74,27 @@ function LineEl(props: { line: Line }) {
<div <div
style={`color: ${props.line.color};--hover-bg: ${props.line.hover_bg};--hover-on-bg: ${props.line.hover_on_bg}`} 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"
Linea {props.line.name} >
</span> <LineSegmentsIcon class="px-1 hidden md:inline-block" fill={props.line.color} />
<Suspense> <span class="px-2 font-bold md:font-normal" title={props.line.district}>
<For each={routesData() ?? []}> Linea {props.line.name}
{(r) => ( </span>
<RouteEl </div>
line_name={props.line.name} <div class="absolute bottom-10 md:static">
route={r} <Suspense>
color={props.line.color} <For each={routesData() ?? []}>
/> {(r) => (
)} <RouteEl
</For> line_name={props.line.name}
</Suspense> route={r}
color={props.line.color}
/>
)}
</For>
</Suspense>
</div>
</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 = () => { const departure_classes = () => {
if (departure_count() > 0) { if (departure_count() > 0) {
return "bg-r-hover-bg text-r-hover-on-bg"; return "bg-r-hover-bg text-r-hover-on-bg";
@ -163,10 +179,13 @@ function RouteEl(props: {
}; };
return ( return (
<button <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 <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={() => { onMouseEnter={() => {
set_global_count((c) => c + 1); set_global_count((c) => c + 1);
set_departure_count((c) => c + 1); set_departure_count((c) => c + 1);
@ -178,18 +197,23 @@ function RouteEl(props: {
set_return_count((c) => c - 1); set_return_count((c) => c - 1);
}} }}
onClick={() => { onClick={() => {
if (departure_count() === 1) { if (departure_active() && return_active()) {
toggle_departure(); toggle_departure();
}
if (return_count() === 1) {
toggle_return(); toggle_return();
} else {
if (departure_count() === 1) {
toggle_departure();
}
if (return_count() === 1) {
toggle_return();
}
} }
}} }}
> >
Ruta {props.route.name} Ruta {props.route.name}
</span> </span>
<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={() => { onMouseEnter={() => {
set_global_count((c) => c + 1); set_global_count((c) => c + 1);
set_departure_count((c) => c + 1); set_departure_count((c) => c + 1);
@ -203,7 +227,7 @@ function RouteEl(props: {
Ida Ida
</span> </span>
<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={() => { onMouseEnter={() => {
set_global_count((c) => c + 1); set_global_count((c) => c + 1);
set_return_count((c) => c + 1); set_return_count((c) => c + 1);