From 1a6b47c8d3291f2119241808bcf61a243963b866 Mon Sep 17 00:00:00 2001 From: Tim Rijkse Date: Thu, 15 Jan 2026 15:28:14 +0100 Subject: [PATCH] fix: add newsletter box --- css/styles.css | 12 +- index.html | 22 ++++ js/app.js | 1 + js/components/category-card.js | 5 +- js/components/newsletter-signup.js | 193 +++++++++++++++++++++++++++++ js/components/push-box.js | 37 ++++++ js/components/site-content.js | 19 ++- js/icons/index.js | 1 + js/icons/send-icon.js | 31 +++++ 9 files changed, 313 insertions(+), 8 deletions(-) create mode 100644 js/components/newsletter-signup.js create mode 100644 js/icons/send-icon.js diff --git a/css/styles.css b/css/styles.css index 4e72a74..eb86dc0 100644 --- a/css/styles.css +++ b/css/styles.css @@ -201,6 +201,8 @@ table { --color-push-box-bg: #ebeef4; --color-card-dark-bg: #ebeef4; --color-button-primary: #951d51; + --color-purple: #951d51; + --color-purple-dark: #7a1842; /* Layout */ --site-header-height: 210px; @@ -424,11 +426,15 @@ site-content { /* Category Grid */ .category-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); + display: flex; + flex-wrap: wrap; + align-items: stretch; gap: var(--spacing-md, 1rem); /* 16px */ padding-bottom: var(--spacing-md, 1rem); - align-items: stretch; +} + +.category-grid > * { + flex: 0 0 calc(50% - var(--spacing-md, 1rem) / 2); } /* ========================================================================== diff --git a/index.html b/index.html index 5b02d61..5ee83b2 100644 --- a/index.html +++ b/index.html @@ -232,6 +232,28 @@ Toon alle onderwerpen + +
+ +

+ Gespecialiseerd op het vlak van boeddhisme en aanverwante + Oost-West thema's +

+
+ Klantenservice + Neem contact op +
+ +
+ +
+ +
diff --git a/js/app.js b/js/app.js index b228149..331f601 100644 --- a/js/app.js +++ b/js/app.js @@ -17,6 +17,7 @@ import "./components/section-title.js"; import "./components/add-to-cart-button.js"; import "./components/cta-button.js"; import "./components/category-card.js"; +import "./components/newsletter-signup.js"; // App initialization (if needed) document.addEventListener("DOMContentLoaded", () => { diff --git a/js/components/category-card.js b/js/components/category-card.js index 47c413b..2f8c196 100644 --- a/js/components/category-card.js +++ b/js/components/category-card.js @@ -47,15 +47,14 @@ class CategoryCard extends HTMLElement { this.shadowRoot.innerHTML = ` +
+ +
+ `; + } +} + +customElements.define("newsletter-signup", NewsletterSignup); diff --git a/js/components/push-box.js b/js/components/push-box.js index a2cefc1..fe9dfa6 100644 --- a/js/components/push-box.js +++ b/js/components/push-box.js @@ -15,10 +15,37 @@ class PushBox extends HTMLElement { connectedCallback() { this.render(); + // Use requestAnimationFrame to ensure slots are assigned + requestAnimationFrame(() => { + this.updateLogoVisibility(); + }); } attributeChangedCallback() { this.render(); + requestAnimationFrame(() => { + this.updateLogoVisibility(); + }); + } + + updateLogoVisibility() { + const logoSlot = this.shadowRoot?.querySelector('slot[name="logo"]'); + const logoWrapper = this.shadowRoot?.querySelector(".logo-wrapper"); + + if (logoSlot && logoWrapper) { + const assignedNodes = logoSlot.assignedNodes(); + const hasContent = + assignedNodes.length > 0 && + assignedNodes.some((node) => { + return node.nodeType === Node.ELEMENT_NODE && node.tagName === "IMG"; + }); + + if (!hasContent) { + logoWrapper.classList.add("hidden"); + } else { + logoWrapper.classList.remove("hidden"); + } + } } get backgroundColor() { @@ -53,6 +80,10 @@ class PushBox extends HTMLElement { margin-bottom: 32px; } + .logo-wrapper.hidden { + display: none; + } + .logo-wrapper ::slotted(img) { width: 104px; height: auto; @@ -73,6 +104,12 @@ class PushBox extends HTMLElement { font-size: 16px; font-weight: 400; } + + .cta-wrapper ::slotted(.cta-buttons) { + display: flex; + gap: 16px; + flex-wrap: wrap; + }
diff --git a/js/components/site-content.js b/js/components/site-content.js index de55f16..3c0e6f6 100644 --- a/js/components/site-content.js +++ b/js/components/site-content.js @@ -1,6 +1,7 @@ /** * Site Content Component * Main content area wrapper with slot for page content + * Uses flexbox with gap for consistent vertical spacing */ class SiteContent extends HTMLElement { constructor() { @@ -22,8 +23,22 @@ class SiteContent extends HTMLElement { } .content { - padding-top: var(--spacing-md); - padding-bottom: var(--spacing-md); + display: flex; + flex-direction: column; + gap: var(--spacing-md, 16px); + padding-top: var(--spacing-md, 16px); + padding-bottom: var(--spacing-md, 16px); + } + + /* Remove vertical padding from direct children to let gap handle spacing */ + ::slotted(.content-padding) { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + + ::slotted(.section) { + padding-top: var(--spacing-md, 16px); + padding-bottom: var(--spacing-md, 16px); }
diff --git a/js/icons/index.js b/js/icons/index.js index 6d17b7d..6813ca2 100644 --- a/js/icons/index.js +++ b/js/icons/index.js @@ -7,3 +7,4 @@ export { searchIcon } from "./search.js"; export { menuIcon } from "./menu.js"; export { userIcon } from "./user.js"; export { shoppingBagIcon } from "./shopping-bag.js"; +export { sendIcon } from "./send-icon.js"; diff --git a/js/icons/send-icon.js b/js/icons/send-icon.js new file mode 100644 index 0000000..530f5c4 --- /dev/null +++ b/js/icons/send-icon.js @@ -0,0 +1,31 @@ +/** + * Send Icon (Lucide) + * @param {Object} props - Icon properties + * @param {number} props.size - Icon size (default: 24) + * @param {string} props.color - Icon color (default: currentColor) + * @param {number} props.strokeWidth - Stroke width (default: 2) + * @returns {string} SVG string + */ +export function sendIcon({ + size = 24, + color = "currentColor", + strokeWidth = 2, +} = {}) { + return ` + + + + + `; +}