Implement mockup

leonmelein · Aug 2, 2024 · 97c2017 · 97c2017
1 parent 9ad4e8f
commit 97c2017
Show file tree

Hide file tree

Showing 6 changed files with 151 additions and 132 deletions.
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -4,7 +4,10 @@
         {
             "type": "npm",
             "script": "build",
-            "group": "build",
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            },
             "problemMatcher": [],
             "label": "npm: build",
             "detail": "vite build"
@@ -32,7 +35,7 @@
             },
             "isBackground": true,
             "label": "npm: run dev",
-            "detail": "vite",
+            "detail": "vite"
         }
     ]
 }
diff --git a/index.html b/index.html
@@ -8,23 +8,46 @@
     <link href="/src/css/style.css" rel="stylesheet"/>
 </head>
 <body>
-    <div class="page_container">
-        <div id='title'>
-            <h1 class="text-3xl font-bold underline">Swimspots.eu</h1>
-            <h1 class="menu">☰</h1>
+    <div id='header'>
+        <div class="title container">
+            <h1>Swimspots</h1>
         </div>
-        <div id="mapcontent">
-            <div class="container">
-                <div class="map" id="map">
+        <div class="searchbar">
+            <input class="text-3xl" type="text" placeholder="Zoek een zwemplek..." class="rounded-lg" />
+            <button>
+                <div style="margin: auto;">
+                    <i class="mdi mdi-magnify"></i>
                 </div>
-                <div class="list" id="list">
-                    <input type="search" placeholder="Zoek zwemplek..." id="search">
-                    <ul id="resultlist">
-                    </ul>
-                </div>
-            </div>
+            </button>
+        </div>
+    </div>
+    <div class="results container">
+        <div class="result-card">
+            <h2 class="result-title">Sloterplas</h2>
+            <p class="result-description">Het Sloterstrand is gelegen in de gemeente Amsterdam, in het stadsdeel Nieuw West. De plas is in zijn huidige vorm in de
+            jaren vijftig door zandwinning ontstaan, beslaat 89 hectare en is maximaal circa 35 meter diep. Aan de west- en
+            oostzijde van de plas liggen stadsparken. De oevers rondom het Sloterstrand zijn verschillend van aard. Aan de zuidzijde
+            (langs de Lelylaan en het Osdorpplein) en aan de noordoostzijde (bij het paviljoen) is een hoge en harde oever waarlangs
+            geen enkele plantengroei aanwezig is. Aan de zuidrand wordt het strand begrensd door een brede boulevard met bankjes.
+            Vooral aan de oostkant van de plas en in mindere mate ook bij het westelijke parkgebied zijn meer natuurlijke oevers met
+            een begroeiing.</p>
+        </div>
+        <div class="result-card">
+            <h2 class="result-title">Sloterplas</h2>
+            <p class="result-description">Het Sloterstrand is gelegen in de gemeente Amsterdam, in het stadsdeel Nieuw West. De
+                plas is in zijn huidige vorm in de
+                jaren vijftig door zandwinning ontstaan, beslaat 89 hectare en is maximaal circa 35 meter diep. Aan de west- en
+                oostzijde van de plas liggen stadsparken. De oevers rondom het Sloterstrand zijn verschillend van aard. Aan de
+                zuidzijde
+                (langs de Lelylaan en het Osdorpplein) en aan de noordoostzijde (bij het paviljoen) is een hoge en harde oever
+                waarlangs
+                geen enkele plantengroei aanwezig is. Aan de zuidrand wordt het strand begrensd door een brede boulevard met
+                bankjes.
+                Vooral aan de oostkant van de plas en in mindere mate ook bij het westelijke parkgebied zijn meer natuurlijke
+                oevers met
+                een begroeiing.</p>
         </div>
     </div>
-    <script type="module" src="./src/js/main.js"></script>
+    <!-- <script type="module" src="./src/js/main.js"></script> -->
 </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,9 +9,11 @@
     "preview": "vite preview"
   },
   "devDependencies": {
+    "@mdi/font": "^7.4.47",
     "vite": "^5.2.8"
   },
   "dependencies": {
+    "@fontsource/inter": "^5.0.20",
     "maplibre-gl": "^4.1.3"
   }
 }
diff --git a/src/css/style.css b/src/css/style.css
@@ -1,22 +1,38 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import '../../node_modules/@mdi/font/css/materialdesignicons.css';
+@import '../../node_modules/@fontsource/inter/400.css';
+
+:root {
+    --brand: #4A90E2;
+    --background: rgb(238,238,238);
+    --button: rgb(218,215,215);
+}
+
+* {
+    font-family: "Inter", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+
+}
+
+head {
+    display: none;
+}
 
 body {
-  margin: 0;
-  padding: 0;
+    all: unset;
 }
 
-.maplibregl-map {
-  height: calc(100% - 1rem);
+.container {
+    max-width: 800px;
+    margin: auto;
 }
 
-#title {
+#header {
+  display: block;
   padding-left: 1em;
   padding-right: 1em;
-  height: 5rem;
-  margin-bottom: 1rem;
-  background-color: #4A90E2;
+  padding-bottom: 1em;
+  margin-bottom: 1em;
+  background-color: var(--brand);
   color: white;
 
   > h1, p {
@@ -28,119 +44,76 @@ body {
   }
 }
 
-* {
-  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
-.page_container {
-  display: grid;
-  grid-template-rows: auto 1fr;
-  gap: 0px 0px;
-  height: calc(100svh - 2rem);
-}
-
-.container {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  grid-template-rows: 1fr;
-  gap: 0px 0px;
-  grid-template-areas: "map map list";
-  height: 100%;
-  min-height: 0;
-}
-
-.map {
-  grid-area: map;
-  border-radius: 1rem;
-  margin-left: 1rem;
-  margin-right: 1rem;
-  margin-bottom: 1rem;
-}
-
-.maplibregl-popup-content {
-    padding: 25px 20px;
-    min-width: 7rem;
-    border-radius: 1rem;
-}
-.maplibregl-popup-close-button {
-    font-size: 1.5rem;
-    border-radius: 0 1rem 0 0;
+.title {
+    display: block;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    h1 {
+        all: unset;
+        font-size: 2.2rem;
+    }
 }
 
-.list {
-  grid-area: list;
-  margin-left: 1rem;
-  margin-right: 1rem;
-  margin-bottom: 1rem;
-  overflow: hidden; 
-  max-height: calc(100vh - 6rem);
-
-  > input {
+.searchbar {
+    all: unset;
     width: 100%;
-    padding: 1rem;
-    border-radius: 0.5rem;
-  }
-
-  > ul {
-    list-style-type: none;
-    padding-left: 0;
-    max-height: 100%;
-    overflow: scroll;
-
-    > li {
-      padding: 1rem;
-      margin-bottom: 1rem;
-      background-color: #eeeeee;
-      border-radius: 0.5rem;
+    max-width: 800px;
+    margin: auto;
+    display: block;    
+    height: 3rem;
+    background: white;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    color: black;
+    background-color: var(--background);
+
+    input {
+        all: unset;
+        padding-left: 1rem;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        flex-basis: 100%;
+        flex: 9;
     }
-  }
-}
-
-.copyright {
-  margin: 3rem;
-  text-align: center;
 
-  > a {
-    text-decoration: none;
-  }
+    button {
+        all: unset;
+        height: 100%;
+        margin: auto;
+        font-size: 1.5rem;
+        /* text-align: center; */
+        background-color: var(--button);
+        display: flex;
+        flex-direction: column;
+        flex-basis: 100%;
+        flex: 2;
+    }
 }
 
-em {
-  font-weight: bold;
-  font-style: normal;
-  color: #4a90e2;
+.results {
+  padding-left: 1em;
+  padding-right: 1em;
 }
 
-@media screen and (max-width: 768px) {
-  #title {
-    margin-bottom: 0;
-  }
+.result-card {
+    background-color: var(--background); 
+    padding: 1em;
+    margin-bottom: 1em;
 
-  .page_container {
-    height: 100svh;
-  }
-
-  .list {
-    display: none;
-  }
-
-  .container {
-    height: 100%;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-    grid-template-areas: "map";
-  }
-  .map {
-    border-radius: 0;
-    margin-left: 0;
-    margin-right: 0;
-    margin-bottom: 0;
-    width: 100%;
-  }
+    .result-title {
+        all: unset;
+        display: inline-block;
+        font-size: 1.5rem;
+    }
 
-  .maplibregl-map {
-    height: 100%;   
-  }
+    .result-description {
+        all: unset;
+        display: block;
+        margin-top: 1em;
+        white-space: nowrap;
+        text-overflow: ellipsis; 
+        overflow: hidden;
+    }
 }
-
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,6 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [],
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
   theme: {
     extend: {},
   },