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

better mobile3 - product cards

Browse Source
This commit is contained in:
Priec
2026-06-26 15:48:04 +02:00
parent e5ec2a2de6
commit 1fc8796389
2 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/static/css/app.css
View File

File diff suppressed because one or more lines are too long

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

@@ -12,12 +12,12 @@
that state (e.g. home) `view` is undefined, so the grid layout applies. #} that state (e.g. home) `view` is undefined, so the grid layout applies. #}
<article <article
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="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'"> :class="view === 'list' ? 'flex-col sm:flex-row' : 'flex-col'">
<a href="/shop/{{ product.slug }}" class="flex min-w-0 flex-1" <a href="/shop/{{ product.slug }}" class="flex min-w-0 flex-1"
: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' : 'aspect-[5/4]'"> :class="view === 'list' ? 'w-28 shrink-0 self-stretch min-h-36 sm:w-48' : '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' : 'px-4 pt-3 pb-1'"> :class="view === 'list' ? 'justify-center 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' : 'px-4 pb-4 pt-0'"> :class="view === 'list' ? 'w-full justify-center border-t border-outline p-4 sm:w-48 sm:self-stretch sm:border-l sm:border-t-0 sm:p-5 dark:border-outline-dark' : '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", nowrap=false) }} {{ ui::button(label=t(key="choose-option", lang=lang | default(value='sk')), href="/shop/" ~ product.slug, extra="w-full", nowrap=false) }}