From 4312fae3970e99240d0662cc202e350614661085 Mon Sep 17 00:00:00 2001 From: Anita Lipsky Date: Fri, 5 Jul 2024 12:46:29 +0200 Subject: [PATCH 01/17] style: Usage, responsive font, alpaca-map tag aligned within index.html, index.html has own content --- public/index.html | 22 +++++++++++++++------- src/alpaca-map.js | 8 ++++++++ 2 files changed, 23 insertions(+), 7 deletions(-) diff --git a/public/index.html b/public/index.html index db7d24e..3d4aec7 100644 --- a/public/index.html +++ b/public/index.html @@ -2,20 +2,28 @@ Home + + - + +

Alpaca Map web component - index.html page header

+ diff --git a/src/alpaca-map.js b/src/alpaca-map.js index f86d65b..245a8f0 100644 --- a/src/alpaca-map.js +++ b/src/alpaca-map.js @@ -26,8 +26,16 @@ export default class AlpacaMap extends LitElement { iconStyles, css` :host { + /* Ref: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design#responsive_typography */ + font-size: calc(1rem + 0.75vw); + display: block; + border: 1px solid black; + width: auto; + height: auto; + padding: 0rem; } + #map { top: 0; bottom: 0; From 808e4630054b78acc5aa1563b3dcf2675f84f9b6 Mon Sep 17 00:00:00 2001 From: Anita Lipsky Date: Fri, 5 Jul 2024 13:04:59 +0200 Subject: [PATCH 02/17] style: Responsive toggles - work in progress --- src/alpaca-map.js | 82 ++++++++++++++++++++++++++++++++++------------- 1 file changed, 59 insertions(+), 23 deletions(-) diff --git a/src/alpaca-map.js b/src/alpaca-map.js index 245a8f0..48ca1a5 100644 --- a/src/alpaca-map.js +++ b/src/alpaca-map.js @@ -36,6 +36,21 @@ export default class AlpacaMap extends LitElement { padding: 0rem; } + .toggles { + /* Ref: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids#the_minmax_function */ + display: grid; + grid-template-columns: repeat(2, minmax(2rem, 1fr)); + grid-auto-rows: minmax(2rem, auto); + gap: 0.25rem; + + /* + Ref: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox#horizontal_and_vertical_alignment + + display: flex; + align-items: center; + justify-content: space-around; */ + } + #map { top: 0; bottom: 0; @@ -169,6 +184,7 @@ export default class AlpacaMap extends LitElement { } _filterMarkers(element) { + // TODO bugfix to get form directly as added style tags breaks parent logic const form = new FormData(element.target.parentElement); const templatePublicPrivate = { @@ -215,29 +231,49 @@ export default class AlpacaMap extends LitElement { return html`
- - - - - - - - - - - - - - - - - - - - - - - +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
From f1aba38a5fcdc78c788e14bd09b1ad1a6ad10402 Mon Sep 17 00:00:00 2001 From: Anita Lipsky Date: Sat, 6 Jul 2024 13:07:13 +0200 Subject: [PATCH 03/17] style: Skeleton for web component + map containers --- public/skeleton.html | 61 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 public/skeleton.html diff --git a/public/skeleton.html b/public/skeleton.html new file mode 100644 index 0000000..b7015b9 --- /dev/null +++ b/public/skeleton.html @@ -0,0 +1,61 @@ + + + Skeleton style + + + + +
+

This is the external website content

+

It contains some info then shows the web component below

+
+
+ Header container for holding the search toggles + Item one + Item two + Item three +
+
+ +
My Map goes here
+
+
+ +

+ This is the external website which has content below the web component. +

+
+ + From d6b1eb34ebfbc392489401c15899cd27ebc57b1a Mon Sep 17 00:00:00 2001 From: Anita Lipsky Date: Sat, 6 Jul 2024 13:52:54 +0200 Subject: [PATCH 04/17] style: Skeleton with actual map --- public/skeleton.html | 57 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/public/skeleton.html b/public/skeleton.html index b7015b9..638ecfa 100644 --- a/public/skeleton.html +++ b/public/skeleton.html @@ -25,6 +25,7 @@ .map-container { background-color: lightgreen; height: 50%; + position: relative; } #map { @@ -33,6 +34,11 @@ height: 100%; width: auto; background-color: darkkhaki; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; } @@ -57,5 +63,56 @@

This is the external website content

This is the external website which has content below the web component.

+ + From f319a47f9547f2ca3736f4679575afe21d945363 Mon Sep 17 00:00:00 2001 From: Anita Lipsky Date: Sat, 6 Jul 2024 13:55:54 +0200 Subject: [PATCH 05/17] style: Remove not needed --- public/skeleton.html | 6 ------ 1 file changed, 6 deletions(-) diff --git a/public/skeleton.html b/public/skeleton.html index 638ecfa..83adb1e 100644 --- a/public/skeleton.html +++ b/public/skeleton.html @@ -25,7 +25,6 @@ .map-container { background-color: lightgreen; height: 50%; - position: relative; } #map { @@ -34,11 +33,6 @@ height: 100%; width: auto; background-color: darkkhaki; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; } From 7799469c1aa6b616f3772ce22218042a6de2fa58 Mon Sep 17 00:00:00 2001 From: Anita Lipsky Date: Mon, 8 Jul 2024 16:01:35 +0200 Subject: [PATCH 06/17] style: Map height 100%, no header, container height --- public/skeleton.html | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/public/skeleton.html b/public/skeleton.html index 83adb1e..96633f3 100644 --- a/public/skeleton.html +++ b/public/skeleton.html @@ -15,7 +15,7 @@ .header-container { background-color: red; - height: 10%; + /* height: 10%; */ } span { @@ -24,12 +24,10 @@ .map-container { background-color: lightgreen; - height: 50%; + /* height: 50%; */ } #map { - top: 0; - bottom: 0; height: 100%; width: auto; background-color: darkkhaki; From 9c9dc799e39019f646a2d812040c0bc4758c3264 Mon Sep 17 00:00:00 2001 From: Anita Lipsky Date: Tue, 9 Jul 2024 14:47:59 +0200 Subject: [PATCH 07/17] style: Overall grid layout for header, map, footer --- public/skeleton.html | 25 ++++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/public/skeleton.html b/public/skeleton.html index 96633f3..b3cbf62 100644 --- a/public/skeleton.html +++ b/public/skeleton.html @@ -3,30 +3,37 @@ Skeleton style - -

Alpaca Map web component - index.html page header

- - +

+ This is the external website which has content below the web component. +

+ + diff --git a/src/alpaca-map.js b/src/alpaca-map.js index 8a36cf3..7316ce2 100644 --- a/src/alpaca-map.js +++ b/src/alpaca-map.js @@ -25,17 +25,36 @@ export default class AlpacaMap extends LitElement { stylesGoogle, iconStyles, css` + /* Overall layout */ + :host { /* Ref: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design#responsive_typography */ - font-size: calc(1rem + 0.75vw); + /* font-size: calc(1rem + 0.75vw); */ + } - display: block; + .web-component-container { border: 1px solid black; - width: auto; - height: auto; - padding: 0rem; } + .header-container { + background-color: lightcoral; + padding: 0.5em; + } + + .map-container { + background-color: lightgreen; + } + + .footer-container { + background-color: purple; + + p { + margin: 0px; + } + } + + /* Toggles */ + .toggle-group { /* Ref: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids#the_minmax_function display: grid; @@ -59,10 +78,8 @@ export default class AlpacaMap extends LitElement { .toggle { background-color: orange; - box-sizing: border-box; border: solid #5b6dcd 10px; padding: 5px; - width: 100%; } #map { @@ -159,10 +176,10 @@ export default class AlpacaMap extends LitElement { center: center, zoomControl: true, mapTypeControl: false, - scaleControl: false, - streetViewControl: false, - rotateControl: false, - fullscreenControl: false, + scaleControl: true, + streetViewControl: true, + rotateControl: true, + fullscreenControl: true, mapId: "ALPACA_MAP_ID", }); @@ -242,54 +259,72 @@ export default class AlpacaMap extends LitElement { render() { return html` -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
+
+
+

Header container for holding the search toggles

+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+

This is the footer for the web component

+

Will have logo and links

+
+
`; } } From 205c5a0fba9a9f5711c24cc3009f47eec4df17dc Mon Sep 17 00:00:00 2001 From: Anita Lipsky Date: Wed, 10 Jul 2024 14:56:36 +0200 Subject: [PATCH 14/17] style: Ghost font size code --- src/alpaca-map.js | 20 ++++++-------------- 1 file changed, 6 insertions(+), 14 deletions(-) diff --git a/src/alpaca-map.js b/src/alpaca-map.js index 7316ce2..685edcc 100644 --- a/src/alpaca-map.js +++ b/src/alpaca-map.js @@ -29,7 +29,12 @@ export default class AlpacaMap extends LitElement { :host { /* Ref: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design#responsive_typography */ - /* font-size: calc(1rem + 0.75vw); */ + /* font-size: calc(1.5rem + 3vw); */ + + /* Sets a min font size, ie the max of the two values, so sets a floor for the size */ + /* + font-size: max(5vw, 10px); + */ } .web-component-container { @@ -56,19 +61,6 @@ export default class AlpacaMap extends LitElement { /* Toggles */ .toggle-group { - /* Ref: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids#the_minmax_function - display: grid; - grid-template-columns: repeat(2, minmax(2rem, 1fr)); - grid-auto-rows: minmax(2rem, auto); - gap: 0.25rem;*/ - - /* - Ref: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox#horizontal_and_vertical_alignment - - display: flex; - align-items: center; - justify-content: space-around; */ - /* Scroll across for more toggles*/ display: flex; flex-direction: row; From 4e80b2c1744d98010ed2406b86af8558b8cd985d Mon Sep 17 00:00:00 2001 From: Anita Lipsky Date: Wed, 10 Jul 2024 15:02:20 +0200 Subject: [PATCH 15/17] docs: Readme --- README.md | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index a978ddf..9db06eb 100644 --- a/README.md +++ b/README.md @@ -9,13 +9,24 @@ To try out creating web components using [lit](https://lit.dev/) ## For end users đŸĒŠ -1. Copy and paste the following code on your website +1. Copy and paste the lines below directly inside the `` tag of website -`` + ``` + + + ``` -1. Optional. To center the map on your favourite farm, replace the latitude and longitude with your coordinates +1. Copy and paste the following code inside the `` tag of website where the component should appear -`` + ``` + + ``` + +1. Optional. To center the map on a favourite farm, replace the latitude and longitude with its `centerLat` and `centerLng` coordinates + + ``` + + ``` ## For developers 🤖 From cfc44e30c97186196e3ec575a34a6dadb8bb0a88 Mon Sep 17 00:00:00 2001 From: Anita Lipsky Date: Wed, 10 Jul 2024 15:21:09 +0200 Subject: [PATCH 16/17] style: Map placement and bg-color --- src/alpaca-map.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/alpaca-map.js b/src/alpaca-map.js index 685edcc..1d738dd 100644 --- a/src/alpaca-map.js +++ b/src/alpaca-map.js @@ -75,10 +75,9 @@ export default class AlpacaMap extends LitElement { } #map { - top: 0; - bottom: 0; height: 100%; - width: 100%; + width: auto; + background-color: darkkhaki; } `, ]; From 18b6a10c3c2b709e972362be565b88c9c63bb7c8 Mon Sep 17 00:00:00 2001 From: Anita Lipsky Date: Wed, 10 Jul 2024 15:22:09 +0200 Subject: [PATCH 17/17] chore: Remove skeleton layout helper --- public/skeleton.html | 213 ------------------------------------------- 1 file changed, 213 deletions(-) delete mode 100644 public/skeleton.html diff --git a/public/skeleton.html b/public/skeleton.html deleted file mode 100644 index 8f3af52..0000000 --- a/public/skeleton.html +++ /dev/null @@ -1,213 +0,0 @@ - - - Skeleton style - - - - -
-

This is the external website content

-

It contains some info then shows the web component below

-
-
-

Header container for holding the search toggles

-
-
-
Checkbox
-
Public farms
-
đŸĻ™
-
-
-
Checkbox
-
Overnight stay and more text here
-
🛌
-
-
-
Checkbox
-
Alpaca sales
-
🤝
-
- -
-
Checkbox
-
Public farms
-
đŸĻ™
-
-
-
Checkbox
-
Overnight stay and more text here
-
🛌
-
-
-
Checkbox
-
Alpaca sales
-
🤝
-
- -
-
Checkbox
-
Public farms
-
đŸĻ™
-
-
-
Checkbox
-
Overnight stay and more text here
-
🛌
-
-
-
Checkbox
-
Alpaca sales
-
🤝
-
-
-
-
- -
My Map goes here
-
-
-

This is the footer for the web component

-

Will have logo and links

-
-
- -

- This is the external website which has content below the web component. -

-
- - - -