From a69005dbb58de6619fdf71515c80838b3f369130 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Tue, 27 Feb 2024 12:03:11 +0100
Subject: [PATCH] feature: handle imports, producer page
---
index.html | 1 -
src/components/main.js | 44 ++++++++-----------
.../widgets/display-firstnationsled.js | 5 ++-
.../widgets/display-householdurl.js | 26 +++++++++++
src/components/widgets/multiple-badge-list.js | 3 +-
src/index.js | 12 +----
src/styles/index.scss | 5 ++-
7 files changed, 56 insertions(+), 40 deletions(-)
create mode 100644 src/components/widgets/display-householdurl.js
diff --git a/index.html b/index.html
index 6ace924..537cf1e 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,6 @@
<link rel="icon" type="image/png" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
- <link rel="stylesheet" href="./src/styles/index.scss" />
<script
type="module"
src="https://cdn.skypack.dev/@startinblox/router@0.11"
diff --git a/src/components/main.js b/src/components/main.js
index aa22ed6..9507001 100644
--- a/src/components/main.js
+++ b/src/components/main.js
@@ -671,31 +671,23 @@ import("@helpers/utils.js").then((utils) => {
class-country="col s12 text-16 text-light"
></solid-display>
</div>
- <div class="row">
- <solid-display
- bind-resources=""
- fields="ofn:First_Nations_country"
- widget-ofn:First_Nations_country="custom-display-firstnationsled"
- ></solid-display>
- </div>
- <div class="row text-link valign-wrapper">
- <div class="col s12">
+ <solid-display
+ bind-resources=""
+ fields="ofn:First_Nations_country"
+ widget-ofn:First_Nations_country="custom-display-firstnationsled"
+ ></solid-display>
+ <!-- <div class="row valign-wrapper">
+ <div class="col s12 text-link text-link-red">
View map <icon-mdi-open-in-new
></icon-mdi-open-in-new>
</div>
- </div>
+ </div> -->
<h5 class="margin-top-50">Useful links</h5>
- <div class="row no-margin-bottom">
- <div class="col s12">
- <solid-display
- bind-resources=""
- fields="ofn:Household_URL"
- link-text-ofn:Household_URL="Producer website"
- class-ofn:Household_URL="text-link text-red"
- widget-ofn:Household_URL="solid-display-link-blank"
- ></solid-display>
- </div>
- </div>
+ <solid-display
+ bind-resources=""
+ fields="ofn:Household_URL"
+ widget-ofn:Household_URL="custom-display-householdurl"
+ ></solid-display>
<div class="row no-margin-bottom">
<solid-display
bind-resources=""
@@ -709,11 +701,13 @@ import("@helpers/utils.js").then((utils) => {
<div
class="col hide-on-small-only m12 margin-top-10"
>
- <img
- class="responsive-img"
+ <solid-display
+ bind-resources=""
+ fields="ofn:promo_image_url"
+ widget-ofn:promo_image_url="solid-display-img"
+ class-ofn:promo_image_url="responsive-img"
style="width: 100%"
- src="/kialla_silos.png"
- />
+ ></solid-display>
</div>
</div>
<div class="row">
diff --git a/src/components/widgets/display-firstnationsled.js b/src/components/widgets/display-firstnationsled.js
index 0c7cb50..55d08fc 100644
--- a/src/components/widgets/display-firstnationsled.js
+++ b/src/components/widgets/display-firstnationsled.js
@@ -9,9 +9,12 @@ customElements.define(
static properties = {
value: { attribute: "value" },
};
+ createRenderRoot() {
+ return this;
+ }
render() {
return html`${this.value.length > 0
- ? html`<div class="col s12 text-14 bold">First Nations Led</div><div class="col s12 text-14">${this.value}</div>`
+ ? html`<div class="row"><div class="col s12 text-14 bold">First Nations Led</div><div class="col s12 text-14">${this.value}</div></div>`
: ""}`;
}
}
diff --git a/src/components/widgets/display-householdurl.js b/src/components/widgets/display-householdurl.js
new file mode 100644
index 0000000..1adb1d4
--- /dev/null
+++ b/src/components/widgets/display-householdurl.js
@@ -0,0 +1,26 @@
+import { LitElement, html } from "lit";
+
+customElements.define(
+ "custom-display-householdurl",
+ class extends LitElement {
+ constructor() {
+ super();
+ }
+ static properties = {
+ value: { attribute: "value" },
+ };
+ createRenderRoot() {
+ return this;
+ }
+ render() {
+ return html`${this.value.length > 0
+ ? html`
+ <div class="row no-margin-bottom valign-wrapper">
+ <div class="col s12 text-link text-link-red">
+ <a href="${this.value}" target="_blank">Producer website <icon-mdi-open-in-new></icon-mdi-open-in-new></a>
+ </div>
+ </div>`
+ : ""}`;
+ }
+ }
+);
diff --git a/src/components/widgets/multiple-badge-list.js b/src/components/widgets/multiple-badge-list.js
index c1fcfb2..5e599eb 100644
--- a/src/components/widgets/multiple-badge-list.js
+++ b/src/components/widgets/multiple-badge-list.js
@@ -17,7 +17,8 @@ customElements.define(
line-height: 16px;
height: auto;
text-align: left;
- background-color: #ede7e2;
+ background-color: white;
+ border: 1px solid black;
color: #191c1d;
border-radius: 41px;
text-transform: uppercase;
diff --git a/src/index.js b/src/index.js
index 8a60d89..db8ec97 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,12 +1,2 @@
import "materialize-css/dist/js/materialize.min.js";
-import "@widgets/badge-firstnationsled.js";
-import "@widgets/display-firstnationsled.js";
-import "@widgets/multiple-badge-list.js";
-import "@widgets/multiple-badge-small.js";
-import "@widgets/multiple-badge.js";
-import "@widgets/safe-html-value-short.js";
-import "@widgets/safe-html-value.js";
-import "@widgets/search-firstnationsled.js";
-import "@widgets/social-links.js";
-import "@partials/wholesale-buy.js";
-import "@components/main.js";
+import.meta.glob('./components/**/*.js', {eager: true});
diff --git a/src/styles/index.scss b/src/styles/index.scss
index af4096d..9628f91 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -349,6 +349,9 @@ solid-ofn-rpp {
}
&.text-link-red {
color: #9A4444;
+ a {
+ color: #9A4444;
+ }
}
}
@@ -424,7 +427,7 @@ solid-ofn-rpp {
}
.social-link {
- color: #4B250F;
+ color: #9A4444;
.icon {
font-size: 28px;
}
--
GitLab