style: Auto adjust map size (#42)

purplebugs · Oct 27, 2024 · 5ae421f · 5ae421f
1 parent 252839f
commit 5ae421f
Showing 1 changed file with 14 additions and 31 deletions.
diff --git a/src/alpaca-map.js b/src/alpaca-map.js
@@ -24,12 +24,10 @@ export default class AlpacaMap extends LitElement {
         background-color: white;
         display: inline-block;
         border: 1px solid black;
-        height: 500px;
-        width: 600px;
 
         display: grid;
         grid-template-columns: 1fr;
-        grid-template-rows: 85px 1fr 80px;
+        grid-template-rows: auto 5fr 1fr;
         grid-column-gap: 0px;
         grid-row-gap: 0px;
 
@@ -90,8 +88,8 @@ export default class AlpacaMap extends LitElement {
 
       .header-container {
         background-color: white;
-        margin: 0.5em;
         overflow: hidden;
+        padding: 0.25em 0em 0.25em 0em;
       }
 
       .map-container {
@@ -102,7 +100,7 @@ export default class AlpacaMap extends LitElement {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: 0.5em 0.5em 0.5em 0.5em;
+        padding: 0.5em 0em 0.5em 0em;
 
         background-color: white;
 
@@ -199,32 +197,30 @@ export default class AlpacaMap extends LitElement {
   constructor() {
     super();
     this.map;
-    this.apiKey = '';
+    this.apiKey = "";
     this.centerLat = 60.472;
     this.centerLng = 8.4689;
     this.dataSource = "http://localhost:3000/api/companies"; // TODO set default depending on environment
     this.farms = [];
-    this.cluster = null;    
+    this.cluster = null;
   }
 
   connectedCallback() {
-    super.connectedCallback()
+    super.connectedCallback();
 
-    console.log('Using the followig ApiKey', this.apiKey)
+    console.log("Using the followig ApiKey", this.apiKey);
 
     // Ref; https://developers.google.com/maps/documentation/javascript/load-maps-js-api#js-api-loader
     const loader = new Loader({
       apiKey: this.apiKey,
       version: "weekly",
     });
-    
+
     loader.load().then(async () => {
       await this.initMap();
     });
   }
 
-
-
   // When element has rendered markup in the DOM firstUpdated() is called
   async initMap() {
     async function fetchFarms(dataSource) {
@@ -233,11 +229,9 @@ export default class AlpacaMap extends LitElement {
         const response = await fetch(dataSource);
         const farms = await response.json();
         // console.log("farms", farms);
-
-        arr = farms?.items || [];
-      } catch(error) {
 
-      }
+        arr = farms?.items || [];
+      } catch (error) {}
       return arr;
     }
 
@@ -327,7 +321,6 @@ export default class AlpacaMap extends LitElement {
       map: this.map,
       algorithmOptions: {
         radius: 100,
-
       },
     });
     this.cluster.addMarkers(markers);
@@ -404,11 +397,7 @@ export default class AlpacaMap extends LitElement {
             </span>
 
             <span class="toggle">
-              <input
-                type="checkbox"
-                id="alpacaWalking"
-                name="alpacaWalking"
-              />
+              <input type="checkbox" id="alpacaWalking" name="alpacaWalking" />
               <label for="alpacaWalking"
                 ><alpaca-map-icon icon="personHiking"></alpaca-map-icon>Alpaca
                 walking</label
@@ -431,11 +420,7 @@ export default class AlpacaMap extends LitElement {
             </span>
 
             <span class="toggle">
-              <input
-                type="checkbox"
-                id="overnightStay"
-                name="overnightStay"
-              />
+              <input type="checkbox" id="overnightStay" name="overnightStay" />
               <label for="overnightStay"
                 ><alpaca-map-icon icon="bed"></alpaca-map-icon>Overnight
                 stay</label
@@ -452,7 +437,7 @@ export default class AlpacaMap extends LitElement {
           </div>
         </form>
       </header>
-      
+
       <div class="map-container" id="map"></div>
 
       <footer class="footer-container">
@@ -471,9 +456,7 @@ export default class AlpacaMap extends LitElement {
         <div class="footer-message">
           Find alpacas,<br />
           farms and more:<br />
-          <a href="https://www.alpaca.life" target="_blank"
-            >www.alpaca.life</a
-          >
+          <a href="https://www.alpaca.life" target="_blank">www.alpaca.life</a>
         </div>
         <div>
           <a