rubberducky/milinda-pitch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add action list

Browse Source
This commit is contained in:
Tim Rijkse
2026-01-16 09:23:37 +01:00
parent 337f5dbf5b
commit 5755d43cfc
12 changed files with 761 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
js/components/book-details.js
View File

@@ -2,7 +2,6 @@
* Book Details Component
* Displays book information with cover, metadata, and purchase buttons
*/
import { shoppingBagIcon } from "../icons/shopping-bag.js";
class BookDetails extends HTMLElement {
static get observedAttributes() {
@@ -43,7 +42,7 @@ class BookDetails extends HTMLElement {
const favoriteBtn = this.shadowRoot?.querySelector(".favorite-btn");
if (addToCartBtn) {
addToCartBtn.addEventListener("click", () => {
addToCartBtn.addEventListener("button-click", () => {
this.dispatchEvent(
new CustomEvent("add-to-cart", {
bubbles: true,
@@ -59,7 +58,7 @@ class BookDetails extends HTMLElement {
}
if (ebookBtn) {
ebookBtn.addEventListener("click", () => {
ebookBtn.addEventListener("button-click", () => {
this.dispatchEvent(
new CustomEvent("buy-ebook", {
bubbles: true,
@@ -325,50 +324,6 @@ class BookDetails extends HTMLElement {
flex-direction: column;
gap: var(--spacing-sm, 0.5rem);
}
.btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm, 0.5rem);
padding: 14px var(--spacing-md, 1rem);
border: none;
border-radius: var(--radius-lg, 0.75rem);
font-family: var(--font-family-outfit, "Outfit", sans-serif);
font-size: 16px;
font-weight: 400;
line-height: 24px;
cursor: pointer;
transition: opacity var(--transition-fast, 150ms ease);
}
.btn:hover {
opacity: 0.9;
}
.btn:active {
opacity: 0.8;
}
.btn-cart {
background-color: var(--color-purple, #951d51);
color: var(--color-text-inverse, #ffffff);
}
.btn-cart svg {
width: 20px;
height: 20px;
}
.btn-ebook {
background-color: var(--color-push-box-bg, #EBEEF4);
color: var(--color-text, #1e293b);
}
.btn-ebook svg {
width: 20px;
height: 20px;
}
</style>
<div class="book-details">
@@ -433,19 +388,15 @@ class BookDetails extends HTMLElement {
<!-- Buttons -->
<div class="buttons">
<button class="btn btn-cart">
${shoppingBagIcon({ size: 20, color: "#ffffff" })}
<span>In winkelwagen</span>
</button>
<icon-cta-button class="btn-cart" icon="cart" variant="primary">
In winkelwagen
</icon-cta-button>
${
this.ebookAvailable
? `
<button class="btn btn-ebook">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"></path>
</svg>
<span>Koop eBook</span>
</button>
<icon-cta-button class="btn-ebook" icon="ebook" variant="secondary">
Koop eBook
</icon-cta-button>
`
: ""
}