Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

style: Farm marker icons, link in box, more like original site #49

Merged
merged 6 commits into from
Nov 5, 2024
Merged

style: Farm marker icons, link in box, more like original site #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
dbb7218
style: Farm marker icons, link in box, more like original site
purplebugs Nov 5, 2024
0cf38fe
style: Map marker link colours
purplebugs Nov 5, 2024
eaf10ba
style: Align directions text and icons
purplebugs Nov 5, 2024
7004b4c
style: City icon, text aligned
purplebugs Nov 5, 2024
6c718e2
style: Padding
purplebugs Nov 5, 2024
76624f3
style: Turn off shadow DOM for map marker styling, to inherit styles …
purplebugs Nov 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions src/alpaca-map-icon.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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