Naive mobile UI
parent
3012d992b0
commit
959b519d75
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue