📦 NEW: new styles

3 files changed, 96 insertions, 165 deletions

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>`;