template updates

dynamic · Sep 13, 2024 · 85a0c00 · 85a0c00
1 parent 73de741
commit 85a0c00
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 48 deletions.
diff --git 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
@@ -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;
+
   }
diff --git a/templates/Dynamic/Elements/Locations/Elements/ElementLocations.ss b/templates/Dynamic/Elements/Locations/Elements/ElementLocations.ss
@@ -5,10 +5,17 @@
 
 <!-- The div to hold the map -->
 <div class="row">
-    <div class="col-md-3">
-        <div id="panel" class="element__panel"></div>
+    <div class="row position-relative">
+    <!-- Panel (initially hidden) -->
+    <div id="panel" class="col-md-4 col-sm-6 position-absolute bg-light h-100" style="left: 0; z-index: 1; display: none;">
+      <!-- Panel content here -->
+      <h2>Location Search Results</h2>
     </div>
-    <div class="col-md-9">
-        <div id="map" class="element__map"></div>
+
+    <!-- Map (full width) -->
+    <div id="map" class="col-12 position-relative">
+      <!-- Map content here -->
+      <div style="height: 500px; background-color: lightblue;">Map Area</div>
     </div>
+  </div>
 </div>