filipriec/kompress_eshop
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

card can be vertical or horizontal
Some checks failed
CI / Check Style (push) Has been cancelled
Details
CI / Run Clippy (push) Has been cancelled
Details
CI / Run Tests (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Priec
2026-06-22 19:50:01 +02:00
parent a45f9ef030
commit e5cac27010
7 changed files with 59 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
assets/views/shop/_card.html
View File

@@ -3,17 +3,24 @@
wired to our product data + i18n + htmx add-to-cart + toast. The demo rating
stars, hardcoded title/price/description/image and the `max-w-sm` (which fights
the shop grid) are dropped; the whole card links to the product page. #}
{# Layout adapts to the `view` Alpine state set by _product_grid.html:
'grid' (default) → vertical card; 'list' → horizontal row. On pages without
that state (e.g. home) `view` is undefined, so the grid layout applies. #}
<article
class="group flex flex-col overflow-hidden rounded-radius border border-outline bg-surface-alt text-on-surface transition hover:border-primary dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:border-primary-dark">
<a href="/shop/{{ product.slug }}" class="flex flex-1 flex-col">
class="group flex overflow-hidden rounded-radius border border-outline bg-surface-alt text-on-surface transition hover:border-primary dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:border-primary-dark"
:class="view === 'list' ? 'flex-row flex-wrap' : 'flex-col'">
<a href="/shop/{{ product.slug }}" class="flex min-w-0 flex-1"
:class="view === 'list' ? 'flex-row' : 'flex-col'">
<!-- Image -->
<div class="h-44 overflow-hidden bg-surface-alt md:h-64 dark:bg-surface-dark">
<div class="overflow-hidden bg-surface-alt dark:bg-surface-dark"
:class="view === 'list' ? 'size-28 shrink-0 sm:size-40' : 'h-44 md:h-64'">
{% if product.image %}
<img src="/images/{{ product.image }}" alt="{{ product.name }}" class="size-full object-cover transition duration-700 ease-out group-hover:scale-105">
{% endif %}
</div>
<!-- Content -->
<div class="flex flex-1 flex-col gap-1 p-6 pb-2">
<div class="flex min-w-0 flex-1 flex-col gap-1"
:class="view === 'list' ? 'p-4 sm:p-5' : 'p-6 pb-2'">
<!-- Header: Title & Price (stacked so neither overflows the narrow card) -->
<h3 class="break-words text-lg font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ product.name }}</h3>
{% if product.on_sale %}
@@ -26,7 +33,8 @@
{% endif %}
</div>
</a>
<div class="flex flex-col gap-2 p-6 pt-0">
<div class="flex flex-col gap-2"
:class="view === 'list' ? 'w-full justify-center p-4 sm:w-56 sm:p-5' : 'p-6 pt-0'">
{% if product.has_options %}
{# Multiple variants: customer must pick on the product page. #}
{{ ui::button(label=t(key="choose-option", lang=lang | default(value='sk')), href="/shop/" ~ product.slug, extra="w-full") }}