FSST/Geizkragen
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

add vertical list layout for wishlist with responsive design and animations

Browse Source
This commit is contained in:
Fabian Schieder 2026-02-27 23:24:49 +01:00
parent 9e9c18cbaa
commit ef9fbcb26a
2 changed files with 108 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
assets/css/compcard.css
View File

@ -320,3 +320,109 @@
display: none;
}
}
/* ==========================================================
WISHLIST – Vertical List Layout
========================================================== */
.wishlist-grid {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 0.5rem 2rem 2.5rem;
max-width: 900px;
margin: 0 auto;
}
.wishlist-card.product-card {
flex-direction: row;
min-height: auto;
height: 120px;
}
.wishlist-card.product-card img {
width: 150px;
height: 100%;
flex: 0 0 150px;
border-bottom: none;
border-right: 1px solid var(--border-subtle);
border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.wishlist-card.product-card .product-card__content {
justify-content: center;
padding: 1rem 1.5rem;
}
.wishlist-card.product-card:hover {
transform: translateX(6px) scale(1.01);
}
.wishlist-card.product-card:hover img {
transform: scale(1.05);
}
/* Stagger animation for wishlist items */
.wishlist-grid .wishlist-card:nth-child(1) { animation-delay: 0.05s; }
.wishlist-grid .wishlist-card:nth-child(2) { animation-delay: 0.1s; }
.wishlist-grid .wishlist-card:nth-child(3) { animation-delay: 0.15s; }
.wishlist-grid .wishlist-card:nth-child(4) { animation-delay: 0.2s; }
.wishlist-grid .wishlist-card:nth-child(5) { animation-delay: 0.25s; }
.wishlist-grid .wishlist-card:nth-child(6) { animation-delay: 0.3s; }
.wishlist-grid .wishlist-card:nth-child(7) { animation-delay: 0.35s; }
.wishlist-grid .wishlist-card:nth-child(8) { animation-delay: 0.4s; }
@media (max-width: 768px) {
.wishlist-grid {
padding: 0.5rem 1rem 1.5rem;
gap: 0.8rem;
}
.wishlist-card.product-card {
height: 100px;
}
.wishlist-card.product-card img {
width: 110px;
flex: 0 0 110px;
padding: 10px;
}
.wishlist-card.product-card .product-card__content {
padding: 0.75rem 1rem;
}
.wishlist-card .product-card__content h3 {
font-size: 0.85rem;
}
.wishlist-card .product-card__content p {
font-size: 0.72rem;
-webkit-line-clamp: 2;
}
}
@media (max-width: 480px) {
.wishlist-card.product-card {
height: 90px;
}
.wishlist-card.product-card img {
width: 90px;
flex: 0 0 90px;
padding: 8px;
}
.wishlist-card.product-card .product-card__content {
padding: 0.5rem 0.75rem;
}
.wishlist-card .product-card__content h3 {
font-size: 0.78rem;
-webkit-line-clamp: 1;
}
.wishlist-card .product-card__content p {
display: none;
}
}

4
wunschliste.php
View File

@ -40,10 +40,10 @@ $result = $stmt->get_result();
<main>
<section class="product-section">
<h2>Deine Wunschliste</h2>
<div class="product-scroll">
<div class="wishlist-grid">
<?php while ($product = $result->fetch_assoc()): ?>
<?php $productId = (int)$product['productID']; ?>
<a class="product-card" href="productpage.php?id=<?= $productId ?>">
<a class="product-card wishlist-card" href="productpage.php?id=<?= $productId ?>">
<img
src="<?= isset($product['imagePath']) ? $product['imagePath'] : 'assets/images/placeholder.png' ?>"
alt="<?= htmlspecialchars($product['model']) ?>">