From b17abe33ee973bd46fdb07b1a2973e7a8150127c Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Thu, 7 Mar 2024 12:18:53 +0100
Subject: [PATCH] fix:
https://github.com/openfoodfoundation/openfoodnetwork/issues/12245
---
src/components/main.js | 8 ++++----
src/components/widgets/display-image.js | 21 +++++++++++++++++++++
src/styles/index.scss | 8 ++++++++
3 files changed, 33 insertions(+), 4 deletions(-)
create mode 100644 src/components/widgets/display-image.js
diff --git a/src/components/main.js b/src/components/main.js
index b5902d6..ee2f6ff 100644
--- a/src/components/main.js
+++ b/src/components/main.js
@@ -532,12 +532,12 @@ utils.importCore().then(async (core) => {
widget-set-card-row="div"
class-set-card-row="row"
widget-set-card-col="div"
- class-set-card-col="col s6 m3"
+ class-set-card-col="col s6 l4 xl3"
widget-set-card-panel="div"
class-set-card-panel="card-panel"
widget-set-card-wrapper="div"
class-ofn:image="img-168"
- widget-ofn:image="solid-display-img"
+ widget-ofn:image="custom-display-image"
default-ofn:image="https://placehold.co/168"
widget-set-name="div"
class-set-name="row no-margin-bottom"
@@ -694,12 +694,12 @@ utils.importCore().then(async (core) => {
widget-set-card-row="div"
class-set-card-row="row"
widget-set-card-col="div"
- class-set-card-col="col s12 m4"
+ class-set-card-col="col s12 l6 xl4"
widget-set-card-panel="div"
class-set-card-panel="card-panel"
widget-set-card-wrapper="div"
class-ofn:image="img-200"
- widget-ofn:image="solid-display-img"
+ widget-ofn:image="custom-display-image"
default-ofn:image="https://placehold.co/200"
widget-set-name="div"
class-set-name="row no-margin-bottom"
diff --git a/src/components/widgets/display-image.js b/src/components/widgets/display-image.js
new file mode 100644
index 0000000..38fffe6
--- /dev/null
+++ b/src/components/widgets/display-image.js
@@ -0,0 +1,21 @@
+import { LitElement, html, nothing } from "lit";
+
+customElements.define(
+ "custom-display-image",
+ class extends LitElement {
+ constructor() {
+ super();
+ }
+ static properties = {
+ value: { attribute: "value" },
+ };
+ createRenderRoot() {
+ return this;
+ }
+ render() {
+ return html`${this.value.length > 0
+ ? html`<div class="background-img" style="background-image:url(${this.value})"></div>`
+ : nothing}`;
+ }
+ }
+);
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 1bae096..a96daf3 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -498,6 +498,14 @@ solid-ofn-rpp {
}
}
+ .background-img {
+ width: 100%;
+ height: 100%;
+ background-position: center;
+ background-size: cover;
+ background-repeat: no-repeat;
+ }
+
@media #{$small-and-down} {
[name="set-card-panel"] {
.img-on-mobile {
--
GitLab