styling

1 files changed, 22 insertions, 17 deletions

diff --git a/src/refactor.js b/src/refactor.js
index 3731993..c708bed 100644
--- a/src/refactor.js
+++ b/src/refactor.js
@@ -82,10 +82,10 @@ const interfaceController = (function () {
     ipLoader: '.ip-loader',
     hits: '#hits',
     searchBar: '#searchbar',
+    pubCount: '.pub-count',
   };
 
   const generateMap = async function (bounds, position, maxSpace, initialPolygonBounds, currentShape, zoom = 12) {
-    console.log(bounds, position, maxSpace, initialPolygonBounds, currentShape, zoom);
     const { Map, Polygon, Rectangle } = await google.maps.importLibrary('maps');
     map = new Map(document.getElementById('map'), {
       zoom,
@@ -157,24 +157,29 @@ const interfaceController = (function () {
       });
     },
     updateHitsList: function (hits) {
-      const slicedArr = hits.slice(0, 20);
       $(DOMStrings.hits).innerHTML = '';
-      let html = `<ul class="flex flex-col gap-2">`;
-
-      for (const pub of slicedArr) {
-        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>`;
+      let html = ``;
+      if (hits.length > 0) {
+        const slicedArr = hits.slice(0, 20);
+        html += `<ul class="flex flex-col gap-2">`;
+        for (const pub of slicedArr) {
+          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>`;
+      } else {
+        html = `<div class="text-center mt-5">There are no results to show, try refinfing your search</div>`;
       }
-      html += `</ul>`;
 
       $(DOMStrings.hits).insertAdjacentHTML('beforeend', html);
+      $(DOMStrings.pubCount).innerHTML = `${hits.length > 0 ? 'Showing ' + hits.length + ' pubs' : 'No pubs'}`;
     },
     handleBoundChange: function () {
       const { south, west, north, east } = shape.getBounds()?.toJSON();
@@ -306,7 +311,7 @@ const controller = (function (dataCTRL, uiCTRL) {
     });
 
     $(DOM.ip).addEventListener('click', async () => {
-      $(DOM.ipLoader).classList.replace('hidden', 'inline-block');
+      $(DOM.ipLoader).classList.replace('hidden', 'inline-flex');
       navigator.geolocation.getCurrentPosition(async (pos) => {
         const position = { lat: pos.coords.latitude, lng: pos.coords.longitude };
         await uiCTRL.initMap('', position, rectBounds, '', 'ip', 10);
@@ -317,7 +322,7 @@ const controller = (function (dataCTRL, uiCTRL) {
         );
         await uiCTRL.embedSearchResults(searchResults.hits);
         uiCTRL.updateHitsList(searchResults.hits);
-        $(DOM.ipLoader).classList.replace('inline-block', 'hidden');
+        $(DOM.ipLoader).classList.replace('inline-flex', 'hidden');
       });
     }),
       $(DOM.searchBar).addEventListener('input', async (e) => {