From e6ca789c7873a77ddf070313452fdafdeeb603ef Mon Sep 17 00:00:00 2001 From: JeremyJamesL Date: Wed, 11 Dec 2024 13:53:08 +0000 Subject: styling --- index.html | 29 ++++++++++++++++++----------- public/images/polygon.svg | 2 -- public/images/searchicon.svg | 12 ++++++++++++ src/refactor.js | 39 ++++++++++++++++++++++----------------- 4 files changed, 52 insertions(+), 30 deletions(-) create mode 100644 public/images/searchicon.svg diff --git a/index.html b/index.html index a0b78a8..706700f 100644 --- a/index.html +++ b/index.html @@ -60,7 +60,7 @@ amber-600 - accent --> -
+

London Pub Search 🍻

-
+
@@ -95,7 +95,10 @@
    • -
  • +
  • +
    • @@ -107,19 +110,20 @@
    -
    -

    Pubs

    +
    +

    Pubs

    + +
    diff --git a/public/images/polygon.svg b/public/images/polygon.svg index e58ec6f..675404a 100644 --- a/public/images/polygon.svg +++ b/public/images/polygon.svg @@ -1,3 +1 @@ - - \ No newline at end of file diff --git a/public/images/searchicon.svg b/public/images/searchicon.svg new file mode 100644 index 0000000..216991b --- /dev/null +++ b/public/images/searchicon.svg @@ -0,0 +1,12 @@ + + + + + + + \ No newline at end of file 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 = `
      `; - - for (const pub of slicedArr) { - html += `
    • -

      ${pub.name}

      -

      ${pub.address}, ${pub.postcode}

      - - - - - -
      • `; + let html = ``; + if (hits.length > 0) { + const slicedArr = hits.slice(0, 20); + html += `
        `; + for (const pub of slicedArr) { + html += `
      • +

        ${pub.name}

        +

        ${pub.address}, ${pub.postcode}

        + + + + + +
        • `; + } + html += `
      `; + } else { + html = `
      There are no results to show, try refinfing your search
      `; } - html += `
    `; $(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) => { -- cgit v1.2.3