From 40fc0d27811c0b6d33fdb9e766f0a8876ba30908 Mon Sep 17 00:00:00 2001 From: Inga Date: Thu, 16 Nov 2023 17:23:51 +0000 Subject: [PATCH] main page redesigned --- index.html | 3 +- src/index.tsx | 54 ++-------------------------------- src/routePlanner/index.tsx | 9 ++++++ src/{ => routePlanner}/map.tsx | 2 +- src/routePlanner/style.css | 36 +++++++++++++++++++++++ src/style.css | 23 ++------------- 6 files changed, 52 insertions(+), 75 deletions(-) create mode 100644 src/routePlanner/index.tsx rename src/{ => routePlanner}/map.tsx (93%) create mode 100644 src/routePlanner/style.css diff --git a/index.html b/index.html index cbc1f5a..e7984d3 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,10 @@ + - Vite + Preact + Route planner
diff --git a/src/index.tsx b/src/index.tsx index 85fa265..915b47b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,59 +1,9 @@ import { render } from 'preact'; -import { useState } from 'preact/hooks'; -import preactLogo from './assets/preact.svg'; import './style.css'; -import { MapComponent } from './map'; +import { RoutePlanner } from './routePlanner'; export function App() { - const [value, setValue] = useState(0); - - return ( -
- - Preact logo - -

Get Started building Vite-powered Preact Apps

-
-
Counter: {value}
- - -
-
- -
-
- - - -
-
- ); -} - -function Resource(props: Record<'href' | 'title' | 'description', string>) { - return ( - -

{props.title}

-

{props.description}

- - ); + return (); } const app = document.getElementById('app'); diff --git a/src/routePlanner/index.tsx b/src/routePlanner/index.tsx new file mode 100644 index 0000000..da859cf --- /dev/null +++ b/src/routePlanner/index.tsx @@ -0,0 +1,9 @@ +import './style.css'; +import { MapComponent } from "./map" + +export const RoutePlanner = () => { + return
+
Markers
+
+
+} \ No newline at end of file diff --git a/src/map.tsx b/src/routePlanner/map.tsx similarity index 93% rename from src/map.tsx rename to src/routePlanner/map.tsx index 26e469a..428cd32 100644 --- a/src/map.tsx +++ b/src/routePlanner/map.tsx @@ -29,5 +29,5 @@ export const MapComponent = () => { mapRef.current = map; }); - return
; + return
; }; diff --git a/src/routePlanner/style.css b/src/routePlanner/style.css new file mode 100644 index 0000000..317a55b --- /dev/null +++ b/src/routePlanner/style.css @@ -0,0 +1,36 @@ +section.route-planner { + width: 100%; + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 1rem; + grid-template-areas: "markers map"; +} + +section.route-planner > section.markers { + grid-area: markers; +} + +section.route-planner > section.map { + grid-area: map; +} + +section.route-planner .map-container { + width: 500px; + height: 500px; +} + +@media (max-width: 639px) { + section.route-planner { + grid-template-columns: 1fr; + row-gap: 1rem; + grid-template-areas: + "markers" + "map"; + } + + section.route-planner .map-container { + width: 90vw; + height: 70vh; + } +} + diff --git a/src/style.css b/src/style.css index cb14c0c..21e599f 100644 --- a/src/style.css +++ b/src/style.css @@ -1,5 +1,5 @@ :root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + font-family: system-ui, 'Atkinson Hyperlegible', sans-serif; line-height: 1.5; font-weight: 400; @@ -14,10 +14,9 @@ } body { - margin: 0; + padding: 1em; display: flex; align-items: center; - min-height: 100vh; } #app { @@ -34,13 +33,6 @@ img:hover { filter: drop-shadow(0 0 2em #673ab8aa); } -section { - margin-top: 5rem; - display: grid; - grid-template-columns: repeat(3, 1fr); - column-gap: 1.5rem; -} - .resource { padding: 0.75rem 1.5rem; border-radius: 0.5rem; @@ -56,17 +48,6 @@ section { box-shadow: 0 25px 50px -12px #673ab888; } -@media (max-width: 639px) { - #app { - margin: 2rem; - } - section { - margin-top: 5rem; - grid-template-columns: 1fr; - row-gap: 1rem; - } -} - @media (prefers-color-scheme: dark) { :root { color: #ccc;