📦 NEW: new styles

author: JeremyJamesL <jeremyluscombe@gmail.com> 2024-12-11 08:24:53 +0000
committer: JeremyJamesL <jeremyluscombe@gmail.com> 2024-12-11 08:24:53 +0000
commit: 195270415c4ab5bb6fd985a9bc848a42099af871 (patch)
tree: 8bbc79905aee22928898cb9f68577ca7f008b6f9
parent: 1cf3d092da3991a366e4c483b8fdd6301f1e419c (diff)
8 files changed, 174 insertions, 183 deletions
diff --git a/index.html b/index.html
index 888e54d..a0b78a8 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,12 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite App</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet"
+    />
     <link rel="stylesheet" href="/src/index.css" />
     <script>
       ((g) => {
@@ -47,15 +53,23 @@
       });
     </script>
   </head>
-  <body>
-    <header class="py-2">
-      <div class="container">
-        <h1>London Pubs - Algolia Map Search</h1>
-        <div>
-          Shape can be <span class="select--rectangle">Rectangular</span> or a
-          <span class="select--polygon">Polygon</span>
-        </div>
+  <!-- 
+    neutral-800 - dark bg
+    neutral-200 - text
+    zinc-800 - less dark bg
+    amber-600 - accent
+  -->
+  <body class="relative text-neutral-200 bg-neutral-800 font-['Montserrat']">
+    <header class="py-4 text-center bg-neutral-800 rounded-b-lg shadow-2xl">
+      <h1 class="text-lg font-semibold">London Pub Search <span class="text-2xl">🍻</span></h1>
+      <!--
+          <div>
+            Shape can be <span class="select--rectangle">Rectangular</span> or a
+            <span class="select--polygon">Polygon</span>
+          </div>
+          -->
 
+      <!-- 
         <div>
           Try around your
           <span class="select--ip relative"
@@ -65,18 +79,56 @@
           ></span>
         </div>
       </div>
-    </header>
+    --></header>
 
-    <main class="py-2">
-      <div class="container">
-        <div id="app" class="flex">
-          <div>
-            <div>
-              <input type="text" placeholder="search..." id="searchbar" />
-            </div>
-            <div id="hits"></div>
+    <main class="relative">
+      <div class="absolute top-0 z-50 h-10 w-full bg-gradient-to-br from-neutral-800 to-transparent"></div>
+
+      <div id="map"></div>
+
+      <!-- Bottom bar (it's double wrapped to allow for overflor-y to not effect the controls) -->
+      <div class="fixed bottom-0 w-full">
+        <ul class="absolute right-2 bottom-full flex flex-col gap-2 pb-2" id="#controls">
+          <li class="p-2 bg-amber-600 rounded-2xl select--rectangle">
+            <img src="/images/rectangle.svg" alt="" />
+          </li>
+          <li class="p-2 bg-amber-600 rounded-2xl select--polygon">
+            <img src="/images/polygon.svg" alt="" />
+          </li>
+          <li class="p-2 bg-amber-600 rounded-2xl select--ip">
+            <img src="/images/pin.svg" alt="" />
+          </li>
+        </ul>
+        <div class="w-full bg-neutral-800 rounded-t-2xl h-64 px-5 py-3 flex flex-col overflow-y-auto">
+          <!-- Controls -->
+
+          <div class="h-1 w-20 bg-neutral-200 rounded-full mb-5 mr-auto ml-auto"></div>
+          <!-- Search bar-->
+          <div
+            class="flex items-center mb-5 bg-[#373737] rounded-lg pl-4 has-[input:focus-visible]:outline has-[input:focus-visible]:outline-2 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-amber-100"
+          >
+            <label for="searchbar"
+              ><svg fill="#E5E5E5" height="15px" width="15px" viewBox="0 0 488.4 488.4">
+                <g>
+                  <g>
+                    <path
+                      d="M0,203.25c0,112.1,91.2,203.2,203.2,203.2c51.6,0,98.8-19.4,134.7-51.2l129.5,129.5c2.4,2.4,5.5,3.6,8.7,3.6
+                 s6.3-1.2,8.7-3.6c4.8-4.8,4.8-12.5,0-17.3l-129.6-129.5c31.8-35.9,51.2-83,51.2-134.7c0-112.1-91.2-203.2-203.2-203.2
+                 S0,91.15,0,203.25z M381.9,203.25c0,98.5-80.2,178.7-178.7,178.7s-178.7-80.2-178.7-178.7s80.2-178.7,178.7-178.7
+                 S381.9,104.65,381.9,203.25z"
+                    />
+                  </g>
+                </g></svg
+            ></label>
+            <input
+              type="text"
+              placeholder="Search for pub"
+              class="h-full w-full p-4 bg-transparent focus-visible:outline-none"
+              id="searchbar"
+            />
           </div>
-          <div id="map"></div>
+          <h2 class="font-semibold text-lg mb-3">Pubs</h2>
+          <div id="hits"></div>
         </div>
       </div>
     </main>
diff --git a/public/images/new-window.svg b/public/images/new-window.svg
new file mode 100644
index 0000000..cf21fa0
--- /dev/null
+++ b/public/images/new-window.svg
@@ -0,0 +1,3 @@
+<svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" >
+    <path d="M5 12V6C5 5.44772 5.44772 5 6 5H18C18.5523 5 19 5.44772 19 6V18C19 18.5523 18.5523 19 18 19H12M8.11111 12H12M12 12V15.8889M12 12L5 19" stroke="#D97706" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
+\ No newline at end of file
diff --git a/public/images/pin.svg b/public/images/pin.svg
new file mode 100644
index 0000000..3fd7da7
--- /dev/null
+++ b/public/images/pin.svg
@@ -0,0 +1 @@
+<svg width="30px" height="30px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 5a3 3 0 1 0 3 3 3 3 0 0 0-3-3zm0 5a2 2 0 1 1 2-2 2.003 2.003 0 0 1-2 2zm0-8.9a6.847 6.847 0 0 0-6.9 6.932c0 3.882 3.789 9.01 6.9 14.968 3.111-5.957 6.9-11.086 6.9-14.968A6.847 6.847 0 0 0 12 1.1zm0 19.789c-.58-1.053-1.168-2.075-1.743-3.075C8.027 13.937 6.1 10.587 6.1 8.032a5.9 5.9 0 1 1 11.8 0c0 2.555-1.926 5.905-4.157 9.782-.575 1-1.163 2.022-1.743 3.075z"/><path fill="none" d="M0 0h24v24H0z"/></svg>
+\ No newline at end of file
diff --git a/public/images/polygon.svg b/public/images/polygon.svg
new file mode 100644
index 0000000..e58ec6f
--- /dev/null
+++ b/public/images/polygon.svg
@@ -0,0 +1,3 @@
+
+
+<svg width="30px" height="30px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 3.456L12 9.28V9H9v.433l-5-3.31V4H1v3h1v13H1v3h3v-1h16v1h3v-3h-1V4h1V1h-3zM10 10h1v1h-1zM2 5h1v1H2zm0 17v-1h1v1zm20 0h-1v-1h1zm-1-2h-1v1H4v-1H3V7h.512L9 10.632V12h3v-1.483L20.952 4H21zm1-18v1h-1V2z"/><path fill="none" d="M0 0h24v24H0z"/></svg>
+\ No newline at end of file
diff --git a/public/images/rectangle.svg b/public/images/rectangle.svg
new file mode 100644
index 0000000..1c59a85
--- /dev/null
+++ b/public/images/rectangle.svg
@@ -0,0 +1 @@
+<svg width="30px" height="30px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M1 21h22V3H1zM2 4h20v16H2z"/><path fill="none" d="M0 0h24v24H0z"/></svg>
+\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index c5ad895..8f861f0 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,13 +4,13 @@
 
 /* GENERAL
 // ------------------------- */
-* {
-  font-family: "Helvetica Neue", Helvetica, sans-serif;
-}
+/* * {
+  font-family: 'Helvetica Neue', Helvetica, sans-serif;
+} */
 
 #map {
   height: 100%;
-  height: 800px;
+  height: 100dvh;
   width: 100%;
 }
 
@@ -25,14 +25,84 @@ body {
   padding: 0;
 }
 
-body {
-  color: #646c78;
-  background-color: #222e3e;
+.gm-fullscreen-control,
+.gm-svpc {
+  display: none;
+}
+
+.st0 {
+  fill: none;
+  stroke: #000000;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-miterlimit: 10;
+}
+.st1 {
+  fill: none;
+  stroke: #000000;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.st2 {
+  fill: none;
+  stroke: #000000;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-dasharray: 6, 6;
+}
+.st3 {
+  fill: none;
+  stroke: #000000;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-dasharray: 4, 4;
+}
+.st4 {
+  fill: none;
+  stroke: #000000;
+  stroke-width: 2;
+  stroke-linecap: round;
+}
+.st5 {
+  fill: none;
+  stroke: #000000;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-dasharray: 3.1081, 3.1081;
+}
+
+.st6 {
+  fill: none;
+  stroke: #000000;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-miterlimit: 10;
+  stroke-dasharray: 4, 3;
 }
 
+/* header {
+  background: rgb(38, 38, 38);
+  background: linear-gradient(
+    180deg,
+    rgba(38, 38, 38, 1) 0%,
+    rgba(38, 38, 38, 0.7665660014005602) 51%,
+    rgba(38, 38, 38, 0) 100%
+  );
+} */
+
+/* body {
+  color: #646c78;
+  background-color: #222e3e;
+} */
+/* 
 .container {
   max-width: 1200px;
   margin: 0 auto;
   padding-left: 15px;
   padding-right: 15px;
-}
+} */
diff --git a/src/main.js b/src/main.js
deleted file mode 100644
index 19716e6..0000000
--- a/src/main.js
+++ /dev/null
@@ -1,153 +0,0 @@
-import { algoliasearch } from "algoliasearch";
-const MAPS_KEY = "AIzaSyCtS6CiOrG95FhroSUdDJJokItndcMkrgc";
-const ALGOLIA_KEY = "9fb3db0222f7b5aef0e2b30791ee6201";
-const INDEX_NAME = "pubfinder";
-const client = algoliasearch("YSWWVAX5RB", ALGOLIA_KEY);
-
-// Elements
-const polygonSelect = document.querySelector(".polygon");
-const rectangleSelect = document.querySelector(".rectangle");
-
-let markers = [];
-let map;
-
-const algolia_params = {
-  hitsPerPage: 1000,
-};
-
-const initialPolygonCoords = [
-  { lat: 51.555519, lng: -0.215208 },
-  { lat: 51.526021, lng: -0.021665 },
-  { lat: 51.454394, lng: -0.014601 },
-  { lat: 51.425103, lng: -0.145876 },
-  { lat: 51.514498, lng: -0.257455 },
-];
-
-const london_bounds = {
-  north: 51.532,
-  south: 51.478,
-  east: -0.072,
-  west: -0.16,
-};
-
-function removeMarkers() {
-  for (let i = 0; i < markers.length; i++) {
-    markers[i].setMap(null);
-  }
-}
-
-async function initMap(shape) {
-  const position = { lat: 51.508616, lng: -0.125319 };
-
-  const { Map, Polygon, Rectangle, InfoWindow } =
-    await google.maps.importLibrary("maps");
-  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
-
-  map = new Map(document.getElementById("map"), {
-    zoom: 4,
-    center: position,
-    mapId: "DEMO_MAP_ID",
-    restriction: {
-      latLngBounds: {
-        north: 51.74,
-        south: 51.27,
-        west: -0.51,
-        east: 0.23,
-      },
-      strictBounds: true,
-    },
-  });
-
-  function handleBoundsChange(activeShape) {
-    console.log("happening");
-    removeMarkers();
-    const { south, west, north, east } = activeShape.getBounds()?.toJSON();
-    const algolia_bounds = [north, east, south, west];
-
-    function debounce(func, delay) {
-      let timer;
-      return function (...args) {
-        const context = this;
-        clearTimeout(timer);
-        timer = setTimeout(() => {
-          func.apply(context, args);
-        }, delay);
-      };
-    }
-
-    async function getSearch() {
-      const res = await client.searchSingleIndex({
-        indexName: INDEX_NAME,
-        searchParams: {
-          ...algolia_params,
-          insideBoundingBox: [algolia_bounds],
-          attributesToRetrieve: ["_geoloc", "name"],
-        },
-      });
-
-      res.hits.forEach((hit) => {
-        const marker = new AdvancedMarkerElement({
-          map: map,
-          position: {
-            lat: hit._geoloc.lat,
-            lng: hit._geoloc.lng,
-          },
-        });
-
-        const window = new InfoWindow({
-          content: hit.name,
-        });
-
-        marker.addListener("click", function () {
-          window.open({
-            anchor: marker,
-            map,
-          });
-        });
-
-        markers.push(marker);
-      });
-    }
-
-    const doAll = debounce(getSearch, 500);
-    doAll();
-  }
-
-  if (shape === "rectangular") {
-    console.log("doing");
-    const rectangle = new Rectangle({
-      bounds: london_bounds,
-      editable: true,
-      draggable: true,
-    });
-
-    rectangle.setMap(map);
-    rectangle.addListener("bounds_changed", handleBoundsChange(rectangle));
-  } else if (shape === "polygonular") {
-    const polygon = new Polygon({
-      paths: initialPolygonCoords,
-      strokeColor: "#FF0000",
-      strokeOpacity: 0.8,
-      strokeWeight: 2,
-      fillColor: "#FF0000",
-      fillOpacity: 0.35,
-      editable: true,
-      draggable: true,
-    });
-
-    polygon.setMap(map);
-    polygon.addListener("bounds_changed", handleBoundsChange(polygon));
-  }
-}
-
-[rectangleSelect, polygonSelect].forEach((el) => {
-  el.addEventListener("click", function (e) {
-    if (e.target.classList.contains("rectangle")) {
-      initMap("rectangular");
-    } else {
-      initMap("polygonular");
-    }
-  });
-});
-
-initMap("rectangular");
diff --git a/src/refactor.js b/src/refactor.js
index e68d2d9..3731993 100644
--- a/src/refactor.js
+++ b/src/refactor.js
@@ -60,7 +60,7 @@ const dataController = (function () {
           query,
           ...algolia_params,
           ...geoParam,
-          attributesToRetrieve: ['_geoloc', 'name'],
+          attributesToRetrieve: ['_geoloc', 'name', 'address', 'postcode'],
         },
       });
       return res;
@@ -91,6 +91,7 @@ const interfaceController = (function () {
       zoom,
       center: position,
       mapId: 'pub_map',
+      colorScheme: 'DARK',
       restriction: {
         latLngBounds: maxSpace,
         strictBounds: true,
@@ -102,15 +103,20 @@ const interfaceController = (function () {
         bounds: bounds,
         editable: true,
         draggable: true,
+        strokeWeight: 2,
+        strokeOpacity: 0.8,
+        strokeColor: '#D97706',
+        fillColor: '#D97706',
+        fillOpacity: 0.35,
       });
       shape.setMap(map);
     } else if (currentShape === 'polygon') {
       shape = new Polygon({
         paths: initialPolygonBounds,
-        strokeColor: '#FF0000',
+        strokeColor: '#D97706',
         strokeOpacity: 0.8,
         strokeWeight: 2,
-        fillColor: '#FF0000',
+        fillColor: '#D97706',
         fillOpacity: 0.35,
         editable: true,
         draggable: true,
@@ -156,7 +162,15 @@ const interfaceController = (function () {
       let html = `<ul class="flex flex-col gap-2">`;
 
       for (const pub of slicedArr) {
-        html += `<li>${pub.name}</li>`;
+        html += `<li class="relative bg-[#373737] rounded-lg p-4">
+        <h3 class="font-medium mb-2">${pub.name}</h3>
+        <h4 class="text-sm">${pub.address}, ${pub.postcode}</h4>
+         <a href="https://www.google.co.uk/maps/place/Ye+Old+White+Horse/" class="absolute block top-4 right-4" target="_blank">
+        <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" >
+        <path d="M5 12V6C5 5.44772 5.44772 5 6 5H18C18.5523 5 19 5.44772 19 6V18C19 18.5523 18.5523 19 18 19H12M8.11111 12H12M12 12V15.8889M12 12L5 19" stroke="#D97706" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+        </a>
+        </li>`;
       }
       html += `</ul>`;
author	JeremyJamesL <jeremyluscombe@gmail.com>	2024-12-11 08:24:53 +0000
committer	JeremyJamesL <jeremyluscombe@gmail.com>	2024-12-11 08:24:53 +0000
commit	195270415c4ab5bb6fd985a9bc848a42099af871 (patch)
tree	8bbc79905aee22928898cb9f68577ca7f008b6f9
parent	1cf3d092da3991a366e4c483b8fdd6301f1e419c (diff)