eSales Media Git repositories
Browse code

Introduce featured to winzer-card with conditional styling

Benjamin Roth authored on06/02/2026 15:59:57
Showing2 changed files
assets/js/components/card/winzer-card.js
History View file @8047cb9
... ... 
@@ -1,10 +1,11 @@
1 1 
 import { LitElement, html, css } from 'lit';
2 2
3 3 
 export class WinzerCard extends LitElement {
4 
-    static properties = { category: { type: String }, date: { type: String }, title: { type: String }, text: { type: String }, hasAttachment: { type: Boolean } };
4 
+    static properties = { category: { type: String }, date: { type: String }, title: { type: String }, text: { type: String }, hasAttachment: { type: Boolean }, featured: { type: Boolean } };
5 5 
     static styles = css`
6 6 
         :host { display: block; margin-bottom: 35px; }
7 7 
         .card { background-color: var(--bg-card); border-radius: var(--radius-card); padding: 20px 20px 40px 20px; position: relative; color: var(--text-main); display: block; }
8 
+        .card.featured { border: 1px solid var(--primary-color); background-color: var(--primary-light); }
8 9 
         .header { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 8px; }
9 10 
         h3 { color: var(--primary-color); margin: 0 0 8px 0; font-size: 1.1rem; font-weight: 600; }
10 11 
         p { margin: 0; font-size: 0.95rem; line-height: 1.4; color: var(--text-dark); padding-right: 25px; }
... ... 
@@ -14,7 +15,7 @@ export class WinzerCard extends LitElement {
14 15 
         svg { width: 24px; height: 24px; fill: currentColor; }
15 16 
     `;
16 17 
     render() {
17 
-        return html`<div class="card"><div class="header"><span>${this.category}</span><span>${this.date}</span></div><h3>${this.title}</h3><p>${this.text}</p>${this.hasAttachment ? html`<div class="attachment-icon"><svg viewBox="0 0 24 24"><path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5a2.5 2.5 0 0 1 5 0v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5a2.5 2.5 0 0 0 5 0V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z"/></svg></div>` : ''}<div class="action-btn"><svg viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg></div></div>`;
18 
+        return html`<div class="card ${this.featured ? 'featured' : ''}"><div class="header"><span>${this.category}</span><span>${this.date}</span></div><h3>${this.title}</h3><p>${this.text}</p>${this.hasAttachment ? html`<div class="attachment-icon"><svg viewBox="0 0 24 24"><path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5a2.5 2.5 0 0 1 5 0v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5a2.5 2.5 0 0 0 5 0V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z"/></svg></div>` : ''}<div class="action-btn"><svg viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg></div></div>`;
18 19 
     }
19 20 
 }
20 21 
 customElements.define('winzer-card', WinzerCard);
public/dist/luumicore-core.js
History View file @8047cb9
... ... 
@@ -920,12 +920,13 @@ p(Z, "properties", { open: { type: Boolean }, title: { type: String } }), p(Z, "
920 920 
 customElements.define("winzer-modal", Z);
921 921 
 class K extends g {
922 922 
   render() {
923 
-    return c`<div class="card"><div class="header"><span>${this.category}</span><span>${this.date}</span></div><h3>${this.title}</h3><p>${this.text}</p>${this.hasAttachment ? c`<div class="attachment-icon"><svg viewBox="0 0 24 24"><path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5a2.5 2.5 0 0 1 5 0v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5a2.5 2.5 0 0 0 5 0V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z"/></svg></div>` : ""}<div class="action-btn"><svg viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg></div></div>`;
923 
+    return c`<div class="card ${this.featured ? "featured" : ""}"><div class="header"><span>${this.category}</span><span>${this.date}</span></div><h3>${this.title}</h3><p>${this.text}</p>${this.hasAttachment ? c`<div class="attachment-icon"><svg viewBox="0 0 24 24"><path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5a2.5 2.5 0 0 1 5 0v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5a2.5 2.5 0 0 0 5 0V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z"/></svg></div>` : ""}<div class="action-btn"><svg viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg></div></div>`;
924 924 
   }
925 925 
 }
926 
-p(K, "properties", { category: { type: String }, date: { type: String }, title: { type: String }, text: { type: String }, hasAttachment: { type: Boolean } }), p(K, "styles", f`
926 
+p(K, "properties", { category: { type: String }, date: { type: String }, title: { type: String }, text: { type: String }, hasAttachment: { type: Boolean }, featured: { type: Boolean } }), p(K, "styles", f`
927 927 
         :host { display: block; margin-bottom: 35px; }
928 928 
         .card { background-color: var(--bg-card); border-radius: var(--radius-card); padding: 20px 20px 40px 20px; position: relative; color: var(--text-main); display: block; }
929 
+        .card.featured { border: 1px solid var(--primary-color); background-color: var(--primary-light); }
929 930 
         .header { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 8px; }
930 931 
         h3 { color: var(--primary-color); margin: 0 0 8px 0; font-size: 1.1rem; font-weight: 600; }
931 932 
         p { margin: 0; font-size: 0.95rem; line-height: 1.4; color: var(--text-dark); padding-right: 25px; }