Skip to content

Commit

Permalink
style: Farm marker icons, link in box, more like original site (#49)
Browse files Browse the repository at this point in the history
  • Loading branch information
@purplebugs
purplebugs authored Nov 5, 2024
1 parent a8dafa5 commit 6594d13
Show file tree
Hide file tree
Showing 4 changed files with 218 additions and 118 deletions.
18 changes: 18 additions & 0 deletions src/alpaca-map-icon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,12 @@ export default class AlpacaMapIcon extends LitElement {
return html`<svg class="icon" viewBox="0 0 640 512">${path}</svg>`;
}

_iconCar() {
const path = svg`<path d="M135.2 117.4L109.1 192l293.8 0-26.1-74.6C372.3 104.6 360.2 96 346.6 96L165.4 96c-13.6 0-25.7 8.6-30.2 21.4zM39.6 196.8L74.8 96.3C88.3 57.8 124.6 32 165.4 32l181.2 0c40.8 0 77.1 25.8 90.6 64.3l35.2 100.5c23.2 9.6 39.6 32.5 39.6 59.2l0 144 0 48c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32l0-48L96 400l0 48c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32l0-48L0 256c0-26.7 16.4-49.6 39.6-59.2zM128 288a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm288 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"/>`;

return html`<svg class="icon" viewBox="0 0 640 512">${path}</svg>`;
}

_iconCalendarCheck() {
const path = svg`<path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zM329 305c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-95 95-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L329 305z"/>`;

Expand All @@ -75,6 +81,12 @@ export default class AlpacaMapIcon extends LitElement {
return html`<svg class="icon private" viewBox="0 0 640 512">${path}</svg>`;
}

_iconLocationDot() {
const path = svg`<path d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/>`;

return html`<svg class="icon" viewBox="0 0 640 512">${path}</svg>`;
}

_iconMars() {
const path = svg`<path d="M289.8 46.8c3.7-9 12.5-14.8 22.2-14.8H424c13.3 0 24 10.7 24 24V168c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-33.4-33.4L321 204.2c19.5 28.4 31 62.7 31 99.8c0 97.2-78.8 176-176 176S0 401.2 0 304s78.8-176 176-176c37 0 71.4 11.4 99.8 31l52.6-52.6L295 73c-6.9-6.9-8.9-17.2-5.2-26.2zM400 80l0 0h0v0zM176 416a112 112 0 1 0 0-224 112 112 0 1 0 0 224z"/>`;

Expand Down Expand Up @@ -102,6 +114,9 @@ export default class AlpacaMapIcon extends LitElement {
case "bed":
icon = this._iconBed();
break;
case "car":
icon = this._iconCar();
break;
case "calendarCheck":
icon = this._iconCalendarCheck();
break;
Expand All @@ -114,6 +129,9 @@ export default class AlpacaMapIcon extends LitElement {
case "key":
icon = this._iconKey();
break;
case "locationDot":
icon = this._iconLocationDot();
break;
case "mars":
icon = this._iconMars();
break;
Expand Down
162 changes: 44 additions & 118 deletions src/alpaca-map-marker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,104 +21,6 @@ export default class AlpacaMapMarker extends LitElement {
} /* If a property changes the element re-renders */,
};

static styles = [
css`
/********* Farm styles in unhighlighted state *********/
/* Ref: https://developers.google.com/maps/documentation/javascript/advanced-markers/html-markers#maps_advanced_markers_html-css */
.farm {
display: flex;
align-items: center;
justify-content: center;
background-color: white;
border-radius: 1rem;
box-shadow: 10px 10px 5px #0003;
color: var(--almost-black);
/* Avoid font flicker when load */
/* font-family: sans-serif; */
padding: 0.75rem;
width: auto;
max-width: 15rem;
}
.farm::after {
border-left: 9px solid transparent;
border-right: 9px solid transparent;
content: "";
height: 0;
left: 50%;
position: absolute;
top: 100%;
transform: translate(-50%);
width: 0;
z-index: 1;
}
.farm .summary {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
gap: 0.5rem;
}
.farm .details {
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 *********/
/* .farm.highlight {
background-color: #ffffff;
border-radius: 8px;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
height: 80px;
padding: 8px 15px;
width: auto;
} */
.farm.highlight .details {
display: flex;
}
/********* Farm category colours *********/
.farm.private {
border: 0.2em solid var(--private-farm);
}
.farm.public {
border: 0.2em solid var(--public-farm);
}
.farm.private::after {
border-top: 9px solid var(--private-farm);
}
.farm.public::after {
border-top: 9px solid var(--public-farm);
}
`,
];

constructor() {
super();
this.name;
Expand All @@ -137,31 +39,55 @@ export default class AlpacaMapMarker extends LitElement {
super.connectedCallback();
}

createRenderRoot() {
// Turns off shadow DOM.
// Since AlpacaMapMarker is not used externally, only by AlpacaMap then we want to inherit all styling, so turn off shadow DOM.
return this;
}

render() {
return html` <div class="farm ${this.category} ${this.highlight}">
return html` <div class="farm-marker ${this.category} ${this.highlight}">
<div class="summary">
<alpaca-map-icon
icon="${this.category === "private" ? "key" : "houseFlag"}"
></alpaca-map-icon>
<div class="icon">
<alpaca-map-icon
icon="${this.category === "private" ? "key" : "houseFlag"}"
></alpaca-map-icon>
</div>
<div class="count">${this.count} 🦙</div>
</div>
<div class="details">
<h4>${this.name}</h4>
<address>${this.city}</address>
<address>${this.address}</address>
<address>
<a
href="${this.directions}"
target="_blank"
rel="noreferrer"
title="Google directions"
>Directions<alpaca-map-icon
icon="arrowUpRightFromSquare"
class="icon link-arrow"
></alpaca-map-icon>
</a>
</address>
<div class="more-info ${this.highlight}">
<div class="name">
<h2>${this.name}</h2>
</div>
<div class="city">
<address>
<alpaca-map-icon icon="locationDot"></alpaca-map-icon>${this.city}
</address>
</div>
<div class="address">
<address>${this.address}</address>
</div>
<a
href="${this.directions}"
target="_blank"
rel="noreferrer"
title="Google directions"
>
<div class="farm-marker-link">
<address class="directions">
<alpaca-map-icon icon="car" class="icon"></alpaca-map-icon
><span>Directions</span
><alpaca-map-icon
icon="arrowUpRightFromSquare"
class="icon link-arrow"
></alpaca-map-icon>
</address>
</div>
</a>
</div>
</div>`;
}
Expand Down
26 changes: 26 additions & 0 deletions src/alpaca-map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { MarkerClusterer } from "@googlemaps/markerclusterer";
import { Loader } from "@googlemaps/js-api-loader";

import STYLED_MAP_TYPE from "./styles-map.js";
import stylesMapMarker from "./styles-map-marker.js";
import "./alpaca-map-marker.js";
import "./alpaca-map-icon.js";

Expand Down Expand Up @@ -63,6 +64,30 @@ export default class AlpacaMap extends LitElement {
--private-farm: var(--brown);
--public-farm: var(--green);
/* From fontawesome website design */
--rgb-gray-50: 240 241 243;
--rgb-gray-100: 224 226 232;
--rgb-gray-200: 195 198 209;
--rgb-gray-300: 165 171 187;
--rgb-gray-400: 165 171 187;
--rgb-gray-500: 97 109 138;
--rgb-gray-600: 81 94 123;
--rgb-gray-700: 54 71 103;
--rgb-gray-800: 24 49 83;
--rgb-gray-900: 0 28 64;
--white: var(--oc-white);
--black: var(--oc-black);
--gray-50: rgb(var(--rgb-gray-50));
--gray-100: rgb(var(--rgb-gray-100));
--gray-200: rgb(var(--rgb-gray-200));
--gray-300: rgb(var(--rgb-gray-300));
--gray-400: rgb(var(--rgb-gray-400));
--gray-500: rgb(var(--rgb-gray-500));
--gray-600: rgb(var(--rgb-gray-600));
--gray-700: rgb(var(--rgb-gray-700));
--gray-800: rgb(var(--rgb-gray-800));
--gray-900: rgb(var(--rgb-gray-900));
}
/* Custom minimalistic scrollbar */
Expand Down Expand Up @@ -191,6 +216,7 @@ export default class AlpacaMap extends LitElement {
background-color: var(--pale-blue);
}
`,
stylesMapMarker,
];

constructor() {
Expand Down
Loading

0 comments on commit 6594d13

Please sign in to comment.