aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJeremyJamesL <jeremyluscombe@gmail.com>2024-12-11 13:53:08 +0000
committerJeremyJamesL <jeremyluscombe@gmail.com>2024-12-11 13:53:08 +0000
commite6ca789c7873a77ddf070313452fdafdeeb603ef (patch)
tree29655fca0f2f9683049b445f86857d02162c2f55
parent195270415c4ab5bb6fd985a9bc848a42099af871 (diff)
styling
Diffstat
-rw-r--r--index.html29
-rw-r--r--public/images/polygon.svg2
-rw-r--r--public/images/searchicon.svg12
-rw-r--r--src/refactor.js39
4 files changed, 52 insertions, 30 deletions
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
-->
<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">
+ <header class="top-0 w-full h-[64px] left-0 fixed py-4 text-center bg-neutral-800 rounded-b-lg shadow-2xl z-50">
<h1 class="text-lg font-semibold">London Pub Search <span class="text-2xl">🍻</span></h1>
<!--
<div>
@@ -81,7 +81,7 @@
</div>
--></header>
- <main class="relative">
+ <main class="relative mt-[65px]">
<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>
@@ -95,7 +95,10 @@
<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">
+ <li class="relative p-2 bg-amber-600 rounded-2xl select--ip">
+ <div
+ class="ip-loader hidden absolute top-0 left-0 animate-ping h-4 w-4 rounded-full bg-sky-400 opacity-75"
+ ></div>
<img src="/images/pin.svg" alt="" />
</li>
</ul>
@@ -107,19 +110,20 @@
<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">
+ <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"
+ 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>
+ </g>
+ </svg>
+ </label>
<input
type="text"
placeholder="Search for pub"
@@ -127,7 +131,10 @@
id="searchbar"
/>
</div>
- <h2 class="font-semibold text-lg mb-3">Pubs</h2>
+ <div class="flex justify-between items-center mb-3">
+ <h2 class="font-semibold text-lg">Pubs</h2>
+ <i class="text-sm pub-count"></i>
+ </div>
<div id="hits"></div>
</div>
</div>
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 @@
-
-
<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/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 @@
+<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> \ 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 = `<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) => {
generated by cgit v1.2.3 (git 2.25.1) at 2025-04-04 16:16:19 +0000