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