From dbb72187ad4ab5d07d849051d086e4594dcd9c04 Mon Sep 17 00:00:00 2001 From: Anita Lipsky Date: Tue, 5 Nov 2024 16:27:56 +0100 Subject: [PATCH 1/6] style: Farm marker icons, link in box, more like original site --- src/alpaca-map-icon.js | 18 ++++ src/alpaca-map-marker.js | 214 +++++++++++++++++++++++---------------- src/alpaca-map.js | 24 +++++ 3 files changed, 167 insertions(+), 89 deletions(-) diff --git a/src/alpaca-map-icon.js b/src/alpaca-map-icon.js index cd0cb2d..e8d4fd7 100644 --- a/src/alpaca-map-icon.js +++ b/src/alpaca-map-icon.js @@ -51,6 +51,12 @@ export default class AlpacaMapIcon extends LitElement { return html`${path}`; } + _iconCar() { + const path = svg``; + + return html`${path}`; + } + _iconCalendarCheck() { const path = svg``; @@ -75,6 +81,12 @@ export default class AlpacaMapIcon extends LitElement { return html`${path}`; } + _iconLocationDot() { + const path = svg``; + + return html`${path}`; + } + _iconMars() { const path = svg``; @@ -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; @@ -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; diff --git a/src/alpaca-map-marker.js b/src/alpaca-map-marker.js index 25e92d8..5eff2ea 100644 --- a/src/alpaca-map-marker.js +++ b/src/alpaca-map-marker.js @@ -23,98 +23,113 @@ export default class AlpacaMapMarker extends LitElement { static styles = [ css` - /********* Farm styles in unhighlighted state *********/ + /********* FARM MARKERS *********/ /* 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; + /* Farm markers */ + .farm-marker { + padding: 0.75rem; 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; - + transition: all 0.3s ease-out; width: auto; max-width: 15rem; - } + border-radius: 1rem; + border-width: 0.2rem; + border-style: solid; - .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; - } + &.public { + border-color: var(--public-farm); + } - .farm .summary { - display: flex; - align-items: center; - justify-content: center; + &.private { + border-color: var(--private-farm); + } - font-size: 1.5rem; - gap: 0.5rem; - } + .summary { + display: flex; + gap: 0.5rem; + align-items: center; + font-size: 1.5rem; + } - .farm .details { - display: none; - flex-direction: column; - flex: 1; - gap: 1rem; - padding: 0rem 1rem 0rem 1rem; - font-size: medium; - } + .count { + font-weight: bolder; + } - .icon { - position: relative; - margin-left: 0.5rem; - } + .more-info { + display: flex; + border-radius: 0.5rem; + flex: 1; + flex-direction: column; - .link-arrow { - top: 0.25rem; - } + &:not(.highlight) { + display: none; + } + } + + .city { + border-radius: 10px; + padding: 0.2rem 0.5rem; + border: 1px solid var(--gray-100); + max-width: fit-content; + } - /********* Farm styles in highlighted state *********/ + .address { + font-size: 1rem; + font-style: normal; + margin-top: 1rem; + } - /* .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-marker-link { + font-size: 1rem; + font-style: normal; + margin: 1rem 0 0.5rem 0; + border-radius: 1rem; + padding: 1rem 0.5rem; + border: 0.125rem solid var(--gray-500); + box-shadow: 0 0.25rem 0 0.125rem var(--gray-200); + + .text { + margin: 0 0 0 1rem; + } + } - .farm.highlight .details { - display: flex; - } + .farm-marker-link:hover { + border-color: var(--pink); + box-shadow: 0 0.25rem 0 0.125rem var(--gray-400); + } + + &.public .icon { + color: var(--green); + } - /********* Farm category colours *********/ - .farm.private { - border: 0.2em solid var(--private-farm); + &.private .icon { + color: var(--brown); + } } - .farm.public { - border: 0.2em solid var(--public-farm); + .farm-marker::after { + /* Pointer under farm marker - taken from css in https://developers.google.com/maps/documentation/javascript/advanced-markers/html-markers*/ + border-left: 8px solid transparent; + border-right: 8px solid transparent; + content: ""; + height: 0; + left: 50%; + position: absolute; + top: 100%; + transform: translateX(-50%) translateY(calc(0.1em * -1)); + /* translateY inspired from hotels.com */ + width: 0; } - .farm.private::after { - border-top: 9px solid var(--private-farm); + .farm-marker.public::after { + border-top: 8px solid var(--green); } - .farm.public::after { - border-top: 9px solid var(--public-farm); + .farm-marker.private::after { + border-top: 8px solid var(--brown); } `, ]; @@ -138,30 +153,51 @@ export default class AlpacaMapMarker extends LitElement { } render() { - return html`
+ return html`
- +
+ +
${this.count} 🦙
-
-

${this.name}

-
${this.city}
-
${this.address}
-
- Directions - -
+
+
+

${this.name}

+
+ +
+
+ ${this.city} +
+
+ +
+
${this.address}
+
+ + +
+
+ Directions + +
+
+
`; } diff --git a/src/alpaca-map.js b/src/alpaca-map.js index 8f9151b..96e6503 100644 --- a/src/alpaca-map.js +++ b/src/alpaca-map.js @@ -63,6 +63,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 */ From 0cf38fe14b79055df53c191dc59841d5a146b06a Mon Sep 17 00:00:00 2001 From: Anita Lipsky Date: Tue, 5 Nov 2024 16:41:04 +0100 Subject: [PATCH 2/6] style: Map marker link colours --- src/alpaca-map-marker.js | 25 +++++++++++++++++-------- 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/src/alpaca-map-marker.js b/src/alpaca-map-marker.js index 5eff2ea..2bea9ad 100644 --- a/src/alpaca-map-marker.js +++ b/src/alpaca-map-marker.js @@ -131,6 +131,18 @@ export default class AlpacaMapMarker extends LitElement { .farm-marker.private::after { border-top: 8px solid var(--brown); } + + /********* Links *********/ + + a { + color: var(--dark-blue); + } + + a:hover { + color: var(--pale-blue); + text-decoration: underline; + text-decoration-thickness: 0.5em; + } `, ]; @@ -186,15 +198,12 @@ export default class AlpacaMapMarker extends LitElement { >
- Directions - + >
From eaf10bab9a612701b077780365e1c7f0cbd51fdf Mon Sep 17 00:00:00 2001 From: Anita Lipsky Date: Tue, 5 Nov 2024 17:23:10 +0100 Subject: [PATCH 3/6] style: Align directions text and icons --- src/alpaca-map-marker.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/alpaca-map-marker.js b/src/alpaca-map-marker.js index 2bea9ad..e53d829 100644 --- a/src/alpaca-map-marker.js +++ b/src/alpaca-map-marker.js @@ -101,6 +101,20 @@ export default class AlpacaMapMarker extends LitElement { box-shadow: 0 0.25rem 0 0.125rem var(--gray-400); } + .directions { + display: flex; + flex-basis: auto; + align-items: center; + } + + /* Icons */ + + .icon { + &.link-arrow { + margin-left: 0.5rem; + } + } + &.public .icon { color: var(--green); } @@ -197,9 +211,9 @@ export default class AlpacaMapMarker extends LitElement { title="Google directions" >
-
+
DirectionsDirections Date: Tue, 5 Nov 2024 17:25:03 +0100 Subject: [PATCH 4/6] style: City icon, text aligned --- src/alpaca-map-marker.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/alpaca-map-marker.js b/src/alpaca-map-marker.js index e53d829..3421a45 100644 --- a/src/alpaca-map-marker.js +++ b/src/alpaca-map-marker.js @@ -101,7 +101,8 @@ export default class AlpacaMapMarker extends LitElement { box-shadow: 0 0.25rem 0 0.125rem var(--gray-400); } - .directions { + .directions, + .city address { display: flex; flex-basis: auto; align-items: center; From 6c718e2f0a20869b6b5fcd94a5c3a7b980c25fc0 Mon Sep 17 00:00:00 2001 From: Anita Lipsky Date: Tue, 5 Nov 2024 17:48:25 +0100 Subject: [PATCH 5/6] style: Padding --- src/alpaca-map-marker.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/alpaca-map-marker.js b/src/alpaca-map-marker.js index 3421a45..29b71ee 100644 --- a/src/alpaca-map-marker.js +++ b/src/alpaca-map-marker.js @@ -106,6 +106,7 @@ export default class AlpacaMapMarker extends LitElement { display: flex; flex-basis: auto; align-items: center; + padding: 0 0.25rem 0 0; } /* Icons */ From 76624f31baafaf1160700c4e782df2f76cde63df Mon Sep 17 00:00:00 2001 From: Anita Lipsky Date: Tue, 5 Nov 2024 20:08:02 +0100 Subject: [PATCH 6/6] style: Turn off shadow DOM for map marker styling, to inherit styles from map --- src/alpaca-map-marker.js | 147 ++------------------------------------- src/alpaca-map.js | 2 + src/styles-map-marker.js | 130 ++++++++++++++++++++++++++++++++++ 3 files changed, 138 insertions(+), 141 deletions(-) create mode 100644 src/styles-map-marker.js diff --git a/src/alpaca-map-marker.js b/src/alpaca-map-marker.js index 29b71ee..bb05d6e 100644 --- a/src/alpaca-map-marker.js +++ b/src/alpaca-map-marker.js @@ -21,147 +21,6 @@ export default class AlpacaMapMarker extends LitElement { } /* If a property changes the element re-renders */, }; - static styles = [ - css` - /********* FARM MARKERS *********/ - /* Ref: https://developers.google.com/maps/documentation/javascript/advanced-markers/html-markers#maps_advanced_markers_html-css */ - - /* Farm markers */ - - .farm-marker { - padding: 0.75rem; - background-color: white; - color: var(--almost-black); - transition: all 0.3s ease-out; - width: auto; - max-width: 15rem; - border-radius: 1rem; - border-width: 0.2rem; - border-style: solid; - - &.public { - border-color: var(--public-farm); - } - - &.private { - border-color: var(--private-farm); - } - - .summary { - display: flex; - gap: 0.5rem; - align-items: center; - font-size: 1.5rem; - } - - .count { - font-weight: bolder; - } - - .more-info { - display: flex; - border-radius: 0.5rem; - flex: 1; - flex-direction: column; - - &:not(.highlight) { - display: none; - } - } - - .city { - border-radius: 10px; - padding: 0.2rem 0.5rem; - border: 1px solid var(--gray-100); - max-width: fit-content; - } - - .address { - font-size: 1rem; - font-style: normal; - margin-top: 1rem; - } - - .farm-marker-link { - font-size: 1rem; - font-style: normal; - margin: 1rem 0 0.5rem 0; - border-radius: 1rem; - padding: 1rem 0.5rem; - border: 0.125rem solid var(--gray-500); - box-shadow: 0 0.25rem 0 0.125rem var(--gray-200); - - .text { - margin: 0 0 0 1rem; - } - } - - .farm-marker-link:hover { - border-color: var(--pink); - box-shadow: 0 0.25rem 0 0.125rem var(--gray-400); - } - - .directions, - .city address { - display: flex; - flex-basis: auto; - align-items: center; - padding: 0 0.25rem 0 0; - } - - /* Icons */ - - .icon { - &.link-arrow { - margin-left: 0.5rem; - } - } - - &.public .icon { - color: var(--green); - } - - &.private .icon { - color: var(--brown); - } - } - - .farm-marker::after { - /* Pointer under farm marker - taken from css in https://developers.google.com/maps/documentation/javascript/advanced-markers/html-markers*/ - border-left: 8px solid transparent; - border-right: 8px solid transparent; - content: ""; - height: 0; - left: 50%; - position: absolute; - top: 100%; - transform: translateX(-50%) translateY(calc(0.1em * -1)); - /* translateY inspired from hotels.com */ - width: 0; - } - - .farm-marker.public::after { - border-top: 8px solid var(--green); - } - - .farm-marker.private::after { - border-top: 8px solid var(--brown); - } - - /********* Links *********/ - - a { - color: var(--dark-blue); - } - - a:hover { - color: var(--pale-blue); - text-decoration: underline; - text-decoration-thickness: 0.5em; - } - `, - ]; - constructor() { super(); this.name; @@ -180,6 +39,12 @@ 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`
diff --git a/src/alpaca-map.js b/src/alpaca-map.js index 96e6503..611e805 100644 --- a/src/alpaca-map.js +++ b/src/alpaca-map.js @@ -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"; @@ -215,6 +216,7 @@ export default class AlpacaMap extends LitElement { background-color: var(--pale-blue); } `, + stylesMapMarker, ]; constructor() { diff --git a/src/styles-map-marker.js b/src/styles-map-marker.js new file mode 100644 index 0000000..ff82b8b --- /dev/null +++ b/src/styles-map-marker.js @@ -0,0 +1,130 @@ +import { css } from "lit"; + +/** + * Map marker styling + * + * Ref: https://developers.google.com/maps/documentation/javascript/advanced-markers/html-markers#maps_advanced_markers_html-css + * + */ + +export default css` + .farm-marker { + padding: 0.75rem; + background-color: white; + color: var(--almost-black); + transition: all 0.3s ease-out; + width: auto; + max-width: 15rem; + border-radius: 1rem; + border-width: 0.2rem; + border-style: solid; + + &.public { + border-color: var(--public-farm); + } + + &.private { + border-color: var(--private-farm); + } + + .summary { + display: flex; + gap: 0.5rem; + align-items: center; + font-size: 1.5rem; + } + + .count { + font-weight: bolder; + } + + .more-info { + display: flex; + border-radius: 0.5rem; + flex: 1; + flex-direction: column; + + &:not(.highlight) { + display: none; + } + } + + .city { + border-radius: 10px; + padding: 0.2rem 0.5rem; + border: 1px solid var(--gray-100); + max-width: fit-content; + } + + .address { + font-size: 1rem; + font-style: normal; + margin-top: 1rem; + } + + .farm-marker-link { + font-size: 1rem; + font-style: normal; + margin: 1rem 0 0.5rem 0; + border-radius: 1rem; + padding: 1rem 0.5rem; + border: 0.125rem solid var(--gray-500); + box-shadow: 0 0.25rem 0 0.125rem var(--gray-200); + + .text { + margin: 0 0 0 1rem; + } + } + + .farm-marker-link:hover { + border-color: var(--pink); + box-shadow: 0 0.25rem 0 0.125rem var(--gray-400); + } + + .directions, + .city address { + display: flex; + flex-basis: auto; + align-items: center; + padding: 0 0.25rem 0 0; + } + + /* Icons */ + + .icon { + &.link-arrow { + margin-left: 0.5rem; + } + } + + &.public .icon { + color: var(--green); + } + + &.private .icon { + color: var(--brown); + } + } + + .farm-marker::after { + /* Pointer under farm marker - taken from css in https://developers.google.com/maps/documentation/javascript/advanced-markers/html-markers*/ + border-left: 8px solid transparent; + border-right: 8px solid transparent; + content: ""; + height: 0; + left: 50%; + position: absolute; + top: 100%; + transform: translateX(-50%) translateY(calc(0.1em * -1)); + /* translateY inspired from hotels.com */ + width: 0; + } + + .farm-marker.public::after { + border-top: 8px solid var(--green); + } + + .farm-marker.private::after { + border-top: 8px solid var(--brown); + } +`;