fixed positioning

5 files changed, 47 insertions, 8 deletions

diff --git a/about.html b/about.html
index 66f7d2e..8935324 100644
--- a/about.html
+++ b/about.html
@@ -4,6 +4,11 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>London pub search</title>
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🍺</text></svg>"
+    />
+
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
diff --git a/index.html b/index.html
index 2bcabf9..59f72f0 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,11 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🍺</text></svg>"
+    />
+
+    <link
       href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
       rel="stylesheet"
     />
@@ -70,7 +75,7 @@
       <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 h-72">
+      <div class="fixed bottom-0 w-full h-72" id="bottom">
         <!-- Controls -->
         <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">
@@ -81,8 +86,9 @@
           </li>
         </ul>
 
-        <div class="w-full h-full bg-neutral-800 rounded-t-2xl px-5 py-3 flex flex-col overflow-y-auto">
-          <div class="h-1 w-20 bg-neutral-200 rounded-full mb-5 mr-auto ml-auto"></div>
+        <div class="w-full h-full bg-neutral-800 rounded-t-2xl px-5 py-3 flex flex-col overflow-y-auto pt-2">
+          <!-- <div class="h-1 w-20 bg-neutral-200 rounded-full mb-5 mr-auto ml-auto"></div> -->
+          <div class="text-center text-2xl mb-5 cursor-pointer" id="toggle">―</div>
           <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"
           >
diff --git a/src/index.css b/src/index.css
index 57ac450..08ab90b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -9,11 +9,14 @@
 } */
 
 #map {
-  height: 100%;
-  height: calc(100dvh - (64px + 288px));
+  height: 100dvh;
   width: 100%;
 }
 
+.bottom--hide {
+  bottom: -14rem;
+}
+
 .gm-style-mtc-bbw {
   display: none;
 }
@@ -84,3 +87,9 @@ body {
   stroke-miterlimit: 10;
   stroke-dasharray: 4, 3;
 }
+
+.bar {
+  height: 20px;
+  width: 200px;
+  background-color: red;
+}
diff --git a/src/main.js b/src/main.js
index ac19077..ceeeb52 100644
--- a/src/main.js
+++ b/src/main.js
@@ -28,7 +28,7 @@ const dataController = (function () {
     { lat: 51.493989, lng: -0.085187 },
   ];
 
-  const centralPosition = { lat: 51.508616, lng: -0.125319 };
+  const centralPosition = { lat: 51.476, lng: -0.11 };
 
   return {
     initialRectBounds,
@@ -74,6 +74,8 @@ const interfaceController = (function () {
     hits: '#hits',
     searchBar: '#searchbar',
     pubCount: '.pub-count',
+    toggle: '#toggle',
+    bottom: '#bottom',
   };
 
   const generateMap = async function (bounds, position, maxSpace, initialPolygonBounds, currentShape, zoom = 12) {
@@ -224,7 +226,7 @@ const controller = (function (dataCTRL, uiCTRL) {
   const initialPolygonBounds = dataCTRL.initialPolygonBounds; // Polygon bounds
 
   const initialSetup = async function () {
-    await uiCTRL.initMap(rectBounds, centralPoint, mapBounds, initialPolygonBounds, 'rectangle', 12);
+    await uiCTRL.initMap(rectBounds, centralPoint, mapBounds, initialPolygonBounds, 'rectangle', 12.5);
 
     const searchResults = await dataCTRL.getSearchResults(
       '',
@@ -285,7 +287,7 @@ const controller = (function (dataCTRL, uiCTRL) {
 
   const setupEventListeners = async function () {
     $(DOM.selectRect).addEventListener('click', async () => {
-      await uiCTRL.initMap(rectBounds, centralPoint, mapBounds, initialPolygonBounds, 'rectangle', 12);
+      await uiCTRL.initMap(rectBounds, centralPoint, mapBounds, initialPolygonBounds, 'rectangle', 12.5);
       const searchResults = await dataCTRL.getSearchResults(
         dataCTRL.getCurrentQuery(),
         'rectangle',
@@ -326,6 +328,10 @@ const controller = (function (dataCTRL, uiCTRL) {
       await uiCTRL.embedSearchResults(searchResults.hits);
       uiCTRL.updateHitsList(searchResults.hits);
     });
+
+    $(DOM.toggle).addEventListener('click', () => {
+      $(DOM.bottom).classList.toggle('bottom--hide');
+    });
   };
 
   return {
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..82b8155
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite';
+import path from 'path';
+
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      input: {
+        main: path.resolve(__dirname, 'index.html'),
+        about: path.resolve(__dirname, 'about.html'),
+      },
+    },
+  },
+});