From a8dafa506499cc5ddc4c442d0f7bf75815fb3a27 Mon Sep 17 00:00:00 2001
From: Anita Lipsky <7695311+purplebugs@users.noreply.github.com>
Date: Tue, 5 Nov 2024 14:12:25 +0100
Subject: [PATCH] style: Map marker font size + spacing. Directions icon (#47)

---
 src/alpaca-map-icon.js   |  9 +++++++++
 src/alpaca-map-marker.js | 24 +++++++++++++++++++++---
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/alpaca-map-icon.js b/src/alpaca-map-icon.js
index 89ae613..cd0cb2d 100644
--- a/src/alpaca-map-icon.js
+++ b/src/alpaca-map-icon.js
@@ -39,6 +39,12 @@ export default class AlpacaMapIcon extends LitElement {
     super.connectedCallback();
   }
 
+  _iconArrowUpRightFromSquare() {
+    const path = svg`<path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z"/>`;
+
+    return html`<svg class="icon" viewBox="0 0 640 512">${path}</svg>`;
+  }
+
   _iconBed() {
     const path = svg`<path d="M32 32c17.7 0 32 14.3 32 32V320H288V160c0-17.7 14.3-32 32-32H544c53 0 96 43 96 96V448c0 17.7-14.3 32-32 32s-32-14.3-32-32V416H352 320 64v32c0 17.7-14.3 32-32 32s-32-14.3-32-32V64C0 46.3 14.3 32 32 32zm144 96a80 80 0 1 1 0 160 80 80 0 1 1 0-160z"/>`;
 
@@ -90,6 +96,9 @@ export default class AlpacaMapIcon extends LitElement {
   render() {
     let icon;
     switch (this.icon) {
+      case "arrowUpRightFromSquare":
+        icon = this._iconArrowUpRightFromSquare();
+        break;
       case "bed":
         icon = this._iconBed();
         break;
diff --git a/src/alpaca-map-marker.js b/src/alpaca-map-marker.js
index f0857fe..25e92d8 100644
--- a/src/alpaca-map-marker.js
+++ b/src/alpaca-map-marker.js
@@ -36,6 +36,9 @@ export default class AlpacaMapMarker extends LitElement {
         box-shadow: 10px 10px 5px #0003;
         color: var(--almost-black);
 
+        /* Avoid font flicker when load */
+        /* font-family: sans-serif; */
+
         padding: 0.75rem;
 
         width: auto;
@@ -68,6 +71,18 @@ export default class AlpacaMapMarker extends LitElement {
         display: none;
         flex-direction: column;
         flex: 1;
+        gap: 1rem;
+        padding: 0rem 1rem 0rem 1rem;
+        font-size: medium;
+      }
+
+      .icon {
+        position: relative;
+        margin-left: 0.5rem;
+      }
+
+      .link-arrow {
+        top: 0.25rem;
       }
 
       /********* Farm styles in highlighted state *********/
@@ -133,7 +148,7 @@ export default class AlpacaMapMarker extends LitElement {
 
       <div class="details">
         <h4>${this.name}</h4>
-        ${this.city}
+        <address>${this.city}</address>
         <address>${this.address}</address>
         <address>
           <a
@@ -141,8 +156,11 @@ export default class AlpacaMapMarker extends LitElement {
             target="_blank"
             rel="noreferrer"
             title="Google directions"
-            >Directions</a
-          >
+            >Directions<alpaca-map-icon
+              icon="arrowUpRightFromSquare"
+              class="icon link-arrow"
+            ></alpaca-map-icon>
+          </a>
         </address>
       </div>
     </div>`;