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