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 */