Skip to content

Commit

Permalink
style: Arrow icon next for directions
Browse files Browse the repository at this point in the history
  • Loading branch information
purplebugs committed Nov 5, 2024
1 parent 4568316 commit 918e603
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 2 deletions.
9 changes: 9 additions & 0 deletions src/alpaca-map-icon.js
Original file line number Diff line number Diff line change
Expand Up @@ -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"/>`;

Expand Down Expand Up @@ -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;
Expand Down
16 changes: 14 additions & 2 deletions src/alpaca-map-marker.js
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,15 @@ export default class AlpacaMapMarker extends LitElement {
font-size: medium;
}
.icon {
position: relative;
margin-left: 0.5rem;
}
.link-arrow {
top: 0.25rem;
}
/********* Farm styles in highlighted state *********/
/* .farm.highlight {
Expand Down Expand Up @@ -147,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>`;
Expand Down

0 comments on commit 918e603

Please sign in to comment.