less height for the product card

This commit is contained in:
Priec
2026-06-25 23:16:52 +02:00
parent 77066d660c
commit d6d4f19010
2 changed files with 4 additions and 4 deletions

File diff suppressed because one or more lines are too long

View File

@@ -17,7 +17,7 @@
:class="view === 'list' ? 'flex-row' : 'flex-col'"> :class="view === 'list' ? 'flex-row' : 'flex-col'">
<!-- Image --> <!-- Image -->
<div class="relative overflow-hidden bg-surface-alt dark:bg-surface-dark" <div class="relative overflow-hidden bg-surface-alt dark:bg-surface-dark"
:class="view === 'list' ? 'size-28 shrink-0 sm:size-40' : 'h-44 md:h-64'"> :class="view === 'list' ? 'size-28 shrink-0 sm:size-40' : 'aspect-[5/4]'">
{% if product.on_sale and product.percent_off > 0 %} {% if product.on_sale and product.percent_off > 0 %}
<span class="absolute left-2 top-2 z-10 rounded-full bg-danger px-2 py-0.5 text-[11px] font-bold text-on-danger shadow-sm">{{ product.percent_off }} %</span> <span class="absolute left-2 top-2 z-10 rounded-full bg-danger px-2 py-0.5 text-[11px] font-bold text-on-danger shadow-sm">{{ product.percent_off }} %</span>
{% endif %} {% endif %}
@@ -27,7 +27,7 @@
</div> </div>
<!-- Content --> <!-- Content -->
<div class="flex min-w-0 flex-1 flex-col gap-1" <div class="flex min-w-0 flex-1 flex-col gap-1"
:class="view === 'list' ? 'p-4 sm:p-5' : 'p-6 pb-2'"> :class="view === 'list' ? 'p-4 sm:p-5' : 'px-4 pt-3 pb-1'">
<!-- Header: Title & Price (stacked so neither overflows the narrow card) --> <!-- 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> <h3 class="break-words text-lg font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ product.name }}</h3>
{# Short blurb for the card; falls back to the full description (clamped) {# Short blurb for the card; falls back to the full description (clamped)
@@ -62,7 +62,7 @@
</div> </div>
</a> </a>
<div class="flex flex-col gap-2" <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'"> :class="view === 'list' ? 'w-full justify-center p-4 sm:w-56 sm:p-5' : 'px-4 pb-4 pt-0'">
{% if product.has_options %} {% if product.has_options %}
{# Multiple variants: customer must pick on the product page. #} {# 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") }} {{ ui::button(label=t(key="choose-option", lang=lang | default(value='sk')), href="/shop/" ~ product.slug, extra="w-full") }}