Distributors (#31966)

* Introducing regions for distributors in CSS and JS

* Using regions for Green

* Using regions for Yellow

* Using regions for SkyConnect

* Sorting Asia and America correctly

* Distributor Updates

* Fix CSS issue
This commit is contained in:
b-uwe 2024-03-20 19:52:21 +01:00 committed by GitHub
parent a7a519a19f
commit cd1e0b336f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 1006 additions and 775 deletions

View File

@ -831,6 +831,18 @@ $ha__primary_color: #03a9f4;
} }
.distributors { .distributors {
details {
width: 100%;
justify-content: space-between;
padding: 16px 24px;
color: #222222;
margin: auto;
summary.region {
display: list-item;
}
}
a { a {
text-decoration: none; text-decoration: none;

View File

@ -2308,13 +2308,15 @@ frontpage_image: /images/frontpage/green-frontpage.png
</span> </span>
</div> </div>
<div class="distributors"> <div class="distributors">
<details id="dist_america">
<a href="https://www.alza.cz/home-assistant-green-d7998187.htm" target="_blank"> <summary class="region">Shipping to America</summary>
<div>
<a href="https://ameridroid.com/products/home-assistant-green" target="_blank">
<div class="distributor"> <div class="distributor">
<div> <div>
<div>🇨🇿</div> <div>🇺🇸</div>
<div>Alza.cz</div> <div>ameriDroid</div>
<div>Shipping from the Czech Republic</div> <div>Shipping from US</div>
</div> </div>
<svg width="24" height="24" viewBox="0 0 24 24"> <svg width="24" height="24" viewBox="0 0 24 24">
<path <path
@ -2324,11 +2326,11 @@ frontpage_image: /images/frontpage/green-frontpage.png
</div> </div>
</a> </a>
<a href="https://ameridroid.com/products/home-assistant-green" target="_blank"> <a href="https://cloudfree.shop/product/home-assistant-green/" target="_blank">
<div class="distributor"> <div class="distributor">
<div> <div>
<div>🇺🇸</div> <div>🇺🇸</div>
<div>ameriDroid</div> <div>CloudFree</div>
<div>Shipping from US</div> <div>Shipping from US</div>
</div> </div>
<svg width="24" height="24" viewBox="0 0 24 24"> <svg width="24" height="24" viewBox="0 0 24 24">
@ -2339,6 +2341,104 @@ frontpage_image: /images/frontpage/green-frontpage.png
</div> </div>
</a> </a>
<a href="https://www.seeedstudio.com/Home-Assistant-Green-p-5792.html"
target="_blank"
>
<div class="distributor">
<div>
<div>🇨🇳</div>
<div>Seeed Studio</div>
<div>Shipping from China, US and Germany</div>
</div>
<svg width="24" height="24" viewBox="0 0 24 24">
<path
d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
/>
</svg>
</div>
</a>
</div>
</details>
<details id="dist_asia">
<summary class="region">Shipping to Asia</summary>
<div>
<a href="https://www.seeedstudio.com/Home-Assistant-Green-p-5792.html"
target="_blank"
>
<div class="distributor">
<div>
<div>🇨🇳</div>
<div>Seeed Studio</div>
<div>Shipping from China, US and Germany</div>
</div>
<svg width="24" height="24" viewBox="0 0 24 24">
<path
d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
/>
</svg>
</div>
</a>
</div>
</details>
<details id="dist_australia">
<summary class="region">Shipping to Australia</summary>
<div>
<a href="https://www.ozsmartthings.com.au/products/home-assistant-green-smart-hub"
target="_blank"
>
<div class="distributor">
<div>
<div>🇦🇺</div>
<div>Oz Smart Things</div>
<div>Shipping from Australia</div>
</div>
<svg width="24" height="24" viewBox="0 0 24 24">
<path
d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
/>
</svg>
</div>
</a>
<a href="https://smartguys.com.au/home-assistant-green.html"
target="_blank"
>
<div class="distributor">
<div>
<div>🇦🇺</div>
<div>Smart Guys</div>
<div>Shipping from Australia</div>
</div>
<svg width="24" height="24" viewBox="0 0 24 24">
<path
d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
/>
</svg>
</div>
</a>
</div>
</details>
<details id="dist_europe">
<summary class="region">Shipping to Europe</summary>
<div>
<a href="https://www.alza.cz/home-assistant-green-d7998187.htm" target="_blank">
<div class="distributor">
<div>
<div>🇨🇿</div>
<div>Alza.cz</div>
<div>Shipping from the Czech Republic</div>
</div>
<svg width="24" height="24" viewBox="0 0 24 24">
<path
d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
/>
</svg>
</div>
</a>
<a <a
href="https://botland.com.pl/centralki-i-bramki-sieciowe/24319-home-assistant-green-inteligentna-centralka-nabu-casa-nc-green-1175-794677011758.html" href="https://botland.com.pl/centralki-i-bramki-sieciowe/24319-home-assistant-green-inteligentna-centralka-nabu-casa-nc-green-1175-794677011758.html"
target="_blank" target="_blank"
@ -2357,12 +2457,15 @@ frontpage_image: /images/frontpage/green-frontpage.png
</div> </div>
</a> </a>
<a href="https://cloudfree.shop/product/home-assistant-green/" target="_blank"> <a
href="https://www.domadoo.fr/fr/box-domotique/7046-nabu-casa-box-domotique-home-assistant-green-0794677011758.html"
target="_blank"
>
<div class="distributor"> <div class="distributor">
<div> <div>
<div>🇺🇸</div> <div>🇫🇷</div>
<div>CloudFree</div> <div>Domadoo</div>
<div>Shipping from US</div> <div>Shipping from France</div>
</div> </div>
<svg width="24" height="24" viewBox="0 0 24 24"> <svg width="24" height="24" viewBox="0 0 24 24">
<path <path
@ -2480,24 +2583,6 @@ frontpage_image: /images/frontpage/green-frontpage.png
</div> </div>
</a> </a>
<a
href="https://www.ozsmartthings.com.au/products/home-assistant-green-smart-hub"
target="_blank"
>
<div class="distributor">
<div>
<div>🇦🇺</div>
<div>Oz Smart Things</div>
<div>Shipping from Australia</div>
</div>
<svg width="24" height="24" viewBox="0 0 24 24">
<path
d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
/>
</svg>
</div>
</a>
<a <a
href="https://www.pi-shop.ch/home-assistant-green" href="https://www.pi-shop.ch/home-assistant-green"
target="_blank" target="_blank"
@ -2570,24 +2655,6 @@ frontpage_image: /images/frontpage/green-frontpage.png
</div> </div>
</a> </a>
<a
href="https://smartguys.com.au/home-assistant-green.html"
target="_blank"
>
<div class="distributor">
<div>
<div>🇦🇺</div>
<div>Smart Guys</div>
<div>Shipping from Australia</div>
</div>
<svg width="24" height="24" viewBox="0 0 24 24">
<path
d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
/>
</svg>
</div>
</a>
<a <a
href="https://shop.swiss-domotique.ch/smarthome-hub/2295-nabu-casa-home-assistant-green.html" href="https://shop.swiss-domotique.ch/smarthome-hub/2295-nabu-casa-home-assistant-green.html"
target="_blank" target="_blank"
@ -2625,7 +2692,7 @@ frontpage_image: /images/frontpage/green-frontpage.png
</a> </a>
<a <a
href="https://www.wifishop.ro/home-assistant-45/home-assistant-green.html" href="https://www.wifishop.ro/en/homeassistant/home-assistant-green.html"
target="_blank" target="_blank"
> >
<div class="distributor"> <div class="distributor">
@ -2642,6 +2709,8 @@ frontpage_image: /images/frontpage/green-frontpage.png
</div> </div>
</a> </a>
</div> </div>
</details>
</div>
</div> </div>
</div> </div>

View File

@ -23,6 +23,19 @@ function handleIntersect(entries, _observer) {
}); });
} }
const expandRegion = () => {
try {
const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
const continent = tz.replace( /^(Asia|America|Australia|Europe)\/.*$/, '$1' );
if ( continent != tz ) {
document.querySelector( `#dist_${continent.toLowerCase()}` ).open = true;
}
} catch ( ev ) {
// Ignore...
}
};
window.addEventListener( window.addEventListener(
"load", "load",
() => { () => {
@ -67,6 +80,8 @@ window.addEventListener(
}, },
{ passive: true } { passive: true }
); );
expandRegion();
}, },
false false
); );

View File

@ -229,12 +229,16 @@ frontpage_image: /images/skyconnect/skyconnect-cover.png
</ul> </ul>
</div> </div>
<div class="distributors"> <div class="distributors">
<a href="https://www.alza.cz/home-assistant-skyconnect-usb-hub-d7815713.htm" target="_blank"> <details id="dist_america">
<summary class="region">Shipping to America</summary>
<div>
<a href="https://ameridroid.com/products/skyconnect" target="_blank">
<div class="distributor"> <div class="distributor">
<div> <div>
<div>🇨🇿</div> <div>🇺🇸</div>
<div>ALZA</div> <div>ameriDroid</div>
<div>Shipping from the Czech Republic</div> <div>Shipping from US</div>
</div> </div>
<svg width="24" height="24" viewBox="0 0 24 24"> <svg width="24" height="24" viewBox="0 0 24 24">
<path <path
@ -244,11 +248,11 @@ frontpage_image: /images/skyconnect/skyconnect-cover.png
</div> </div>
</a> </a>
<a href="https://ameridroid.com/products/skyconnect" target="_blank"> <a href="https://cloudfree.shop/product/home-assistant-skyconnect/" target="_blank">
<div class="distributor"> <div class="distributor">
<div> <div>
<div>🇺🇸</div> <div>🇺🇸</div>
<div>ameriDroid</div> <div>CloudFree</div>
<div>Shipping from US</div> <div>Shipping from US</div>
</div> </div>
<svg width="24" height="24" viewBox="0 0 24 24"> <svg width="24" height="24" viewBox="0 0 24 24">
@ -259,6 +263,93 @@ frontpage_image: /images/skyconnect/skyconnect-cover.png
</div> </div>
</a> </a>
<a
href="https://www.seeedstudio.com/Home-Assistant-SkyConnect-p-5479.html"
target="_blank"
>
<div class="distributor">
<div>
<div>🇨🇳</div>
<div>Seeed Studio</div>
<div>Shipping from China, US and Germany</div>
</div>
<svg width="24" height="24" viewBox="0 0 24 24">
<path
d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
/>
</svg>
</div>
</a>
</div>
</details>
<details id="dist_asia">
<summary class="region">Shipping to Asia</summary>
<div>
<a
href="https://www.seeedstudio.com/Home-Assistant-SkyConnect-p-5479.html"
target="_blank"
>
<div class="distributor">
<div>
<div>🇨🇳</div>
<div>Seeed Studio</div>
<div>Shipping from China, US and Germany</div>
</div>
<svg width="24" height="24" viewBox="0 0 24 24">
<path
d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
/>
</svg>
</div>
</a>
</div>
</details>
<details id="dist_australia">
<summary class="region">Shipping to Australia</summary>
<div>
<a
href="https://smartguys.com.au/home-assistant-skyconnect.html"
target="_blank"
>
<div class="distributor">
<div>
<div>🇦🇺</div>
<div>Smart Guys</div>
<div>Shipping from Australia</div>
</div>
<svg width="24" height="24" viewBox="0 0 24 24">
<path
d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
/>
</svg>
</div>
</a>
</div>
</details>
<details id="dist_europe">
<summary class="region">Shipping to Europe</summary>
<div>
<a href="https://www.alza.cz/home-assistant-skyconnect-usb-hub-d7815713.htm" target="_blank">
<div class="distributor">
<div>
<div>🇨🇿</div>
<div>ALZA</div>
<div>Shipping from the Czech Republic</div>
</div>
<svg width="24" height="24" viewBox="0 0 24 24">
<path
d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
/>
</svg>
</div>
</a>
<a <a
href="https://botland.com.pl/centralki-i-bramki-sieciowe/22759-home-assistant-skyconnect-usb-stick-zgodny-z-zigbeematterthread-794677011635.html" href="https://botland.com.pl/centralki-i-bramki-sieciowe/22759-home-assistant-skyconnect-usb-stick-zgodny-z-zigbeematterthread-794677011635.html"
target="_blank" target="_blank"
@ -277,21 +368,6 @@ frontpage_image: /images/skyconnect/skyconnect-cover.png
</div> </div>
</a> </a>
<a href="https://cloudfree.shop/product/home-assistant-skyconnect/" target="_blank">
<div class="distributor">
<div>
<div>🇺🇸</div>
<div>CloudFree</div>
<div>Shipping from US</div>
</div>
<svg width="24" height="24" viewBox="0 0 24 24">
<path
d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
/>
</svg>
</div>
</a>
<a href="https://www.domadoo.fr/fr/box-domotique/6938-dongle-usb-zigbee-30-sky-connect-pour-home-assistant-nabu-casa-0794677011635.html" target="_blank"> <a href="https://www.domadoo.fr/fr/box-domotique/6938-dongle-usb-zigbee-30-sky-connect-pour-home-assistant-nabu-casa-0794677011635.html" target="_blank">
<div class="distributor"> <div class="distributor">
<div> <div>
@ -505,24 +581,6 @@ frontpage_image: /images/skyconnect/skyconnect-cover.png
</div> </div>
</a> </a>
<a
href="https://smartguys.com.au/home-assistant-skyconnect.html"
target="_blank"
>
<div class="distributor">
<div>
<div>🇦🇺</div>
<div>Smart Guys</div>
<div>Shipping from Australia</div>
</div>
<svg width="24" height="24" viewBox="0 0 24 24">
<path
d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
/>
</svg>
</div>
</a>
<a <a
href="https://shop.swiss-domotique.ch/de/smarthome-zentrale/2118-nabu-casa-home-assistant-skyconnect.html" href="https://shop.swiss-domotique.ch/de/smarthome-zentrale/2118-nabu-casa-home-assistant-skyconnect.html"
target="_blank" target="_blank"
@ -560,7 +618,7 @@ frontpage_image: /images/skyconnect/skyconnect-cover.png
</a> </a>
<a <a
href="https://www.wifishop.ro/home-assistant-45/home-assistant-skyconnect.html" href="https://www.wifishop.ro/en/homeassistant/home-assistant-skyconnect.html"
target="_blank" target="_blank"
> >
<div class="distributor"> <div class="distributor">
@ -577,6 +635,8 @@ frontpage_image: /images/skyconnect/skyconnect-cover.png
</div> </div>
</a> </a>
</div> </div>
</details>
</div>
</div> </div>
</div> </div>
@ -617,4 +677,15 @@ frontpage_image: /images/skyconnect/skyconnect-cover.png
if (document.location.search === "?order") { if (document.location.search === "?order") {
showBuyDialog(); showBuyDialog();
} }
try {
const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
const continent = tz.replace( /^(Asia|America|Australia|Europe)\/.*$/, '$1' );
if ( continent != tz ) {
document.querySelector( `#dist_${continent.toLowerCase()}` ).open = true;
}
} catch ( ev ) {
// Ignore...
}
</script> </script>

View File

@ -349,6 +349,9 @@ frontpage_image: /images/frontpage/yellow-frontpage.jpg
</span> </span>
</div> </div>
<div class="distributors"> <div class="distributors">
<details id="dist_america">
<summary class="region">Shipping to America</summary>
<div>
<a href="https://ameridroid.com/products/home-assistant-yellow" target="_blank"> <a href="https://ameridroid.com/products/home-assistant-yellow" target="_blank">
<div class="distributor"> <div class="distributor">
@ -395,6 +398,54 @@ frontpage_image: /images/frontpage/yellow-frontpage.jpg
</div> </div>
</a> </a>
<a
href="https://www.seeedstudio.com/Home-Assistant-Yellow-Kit-with-selectable-CM4.html"
target="_blank"
>
<div class="distributor">
<div>
<div>🇨🇳</div>
<div>Seeed Studio</div>
<div>Shipping from China, US and Germany. Also sells CM4 modules.</div>
</div>
<svg width="24" height="24" viewBox="0 0 24 24">
<path
d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
/>
</svg>
</div>
</a>
</div>
</details>
<details id="dist_asia">
<summary class="region">Shipping to Asia</summary>
<div>
<a
href="https://www.seeedstudio.com/Home-Assistant-Yellow-Kit-with-selectable-CM4.html"
target="_blank"
>
<div class="distributor">
<div>
<div>🇨🇳</div>
<div>Seeed Studio</div>
<div>Shipping from China, US and Germany. Also sells CM4 modules.</div>
</div>
<svg width="24" height="24" viewBox="0 0 24 24">
<path
d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
/>
</svg>
</div>
</a>
</div>
</details>
<details id="dist_europe">
<summary class="region">Shipping to Europe</summary>
<div>
<!--a <!--a
href="https://en.m.nu/controllers-smart-hubs-3/home-assistant-yellow-with-cm4-module" href="https://en.m.nu/controllers-smart-hubs-3/home-assistant-yellow-with-cm4-module"
target="_blank" target="_blank"
@ -503,6 +554,8 @@ frontpage_image: /images/frontpage/yellow-frontpage.jpg
</div> </div>
</a> </a>
</div> </div>
</details>
</div>
</div> </div>
</div> </div>
@ -543,4 +596,15 @@ frontpage_image: /images/frontpage/yellow-frontpage.jpg
if (document.location.search === "?order") { if (document.location.search === "?order") {
showBuyDialog(); showBuyDialog();
} }
try {
const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
const continent = tz.replace( /^(Asia|America|Australia|Europe)\/.*$/, '$1' );
if ( continent != tz ) {
document.querySelector( `#dist_${continent.toLowerCase()}` ).open = true;
}
} catch ( ev ) {
// Ignore...
}
</script> </script>