diff --git a/dist/css/map.css b/dist/css/map.css index 5311516..23a7502 100644 --- a/dist/css/map.css +++ b/dist/css/map.css @@ -53,15 +53,17 @@ /* Styling for an info pane that slides out from the left. * Hidden by default. */ - #panel { - height: 700px; - width: null; - background-color: white; - /* position: fixed; */ - z-index: 1; - overflow-x: hidden; - transition: all .2s ease-out; - } + #panel { + display: none; + position: absolute; + left: 0; + top: 0; + z-index: 1000; + background-color: #fff; + width: 300px; + height: 100%; + overflow-y: auto; + } .open { width: 250px; diff --git a/dist/js/map.js b/dist/js/map.js index df090b8..c5fb50f 100644 --- a/dist/js/map.js +++ b/dist/js/map.js @@ -295,45 +295,36 @@ const mapStyle = [{ */ function showStoresList(data, stores) { if (stores.length == 0) { - console.log('empty stores'); - return; - } - - let panel = document.createElement('div'); - // If the panel already exists, use it. Else, create it and add to the page. - if (document.getElementById('panel')) { - panel = document.getElementById('panel'); - // If panel is already open, close it - if (panel.classList.contains('open')) { - panel.classList.remove('open'); - } - } else { - panel.setAttribute('id', 'panel'); - const body = document.body; - body.insertBefore(panel, body.childNodes[0]); + console.log('No stores found'); + return; } - - - // Clear the previous details + + // Reference the existing panel in the HTML + let panel = document.getElementById('panel'); + + // Ensure the panel is visible + panel.style.display = 'block'; + + // Clear any previous content while (panel.lastChild) { - panel.removeChild(panel.lastChild); + panel.removeChild(panel.lastChild); } - + + // Populate the panel with the list of stores stores.forEach((store) => { - // Add store details with text formatting - const name = document.createElement('p'); - name.classList.add('place'); - const currentStore = data.getFeatureById(store.storeid); - name.textContent = currentStore.getProperty('name'); - panel.appendChild(name); - const distanceText = document.createElement('p'); - distanceText.classList.add('distanceText'); - distanceText.textContent = store.distanceText; - panel.appendChild(distanceText); + const name = document.createElement('p'); + name.classList.add('place'); + const currentStore = data.getFeatureById(store.storeid); + name.textContent = currentStore.getProperty('name'); + panel.appendChild(name); + + const distanceText = document.createElement('p'); + distanceText.classList.add('distanceText'); + distanceText.textContent = store.distanceText; + panel.appendChild(distanceText); }); - - // Open the panel + + // Add 'open' class to the panel (optional for custom styling or animations) panel.classList.add('open'); - - return; + } \ No newline at end of file diff --git a/templates/Dynamic/Elements/Locations/Elements/ElementLocations.ss b/templates/Dynamic/Elements/Locations/Elements/ElementLocations.ss index 299c7f3..1f5152f 100644 --- a/templates/Dynamic/Elements/Locations/Elements/ElementLocations.ss +++ b/templates/Dynamic/Elements/Locations/Elements/ElementLocations.ss @@ -5,10 +5,17 @@