new ui2
This commit is contained in:
Priec
176
design-parity.md
Normal file
176
design-parity.md
Normal file
@@ -0,0 +1,176 @@
|
||||
# Design parity — Kompress mockup vs current storefront
|
||||
|
||||
Tracks the gap between the imported Claude Design mockup (`Kompress-eshop.html`,
|
||||
project `eshop` on claude.ai/design) and the live storefront. The home page body
|
||||
(featured grid + right rail) and the medical‑blue accent are **done**; this file
|
||||
lists everything else from the mockup that is still missing or only half‑wired, so
|
||||
it can be picked up incrementally.
|
||||
|
||||
Constraints for all items: **htmx + Alpine + PenguinUI + Tailwind tokens only.**
|
||||
Express colors with the existing design tokens (`bg-primary`, `bg-surface-alt`,
|
||||
`border-outline`, `dark:*` …) — never inline hex — so light **and** dark both work.
|
||||
PenguinUI is copy‑paste: lift markup out of `penguinui-components/<name>/…`
|
||||
(read‑only, never `{% include %}`'d) and adapt at the use‑site.
|
||||
|
||||
Legend: 🟢 backend already exists, only UI missing · 🟡 partial · 🔴 net‑new.
|
||||
|
||||
---
|
||||
|
||||
## A. Global chrome (`assets/views/base.html`)
|
||||
|
||||
These affect every page, so they live in `base.html`, not the home template.
|
||||
|
||||
> **✅ Implemented (pass 2)** — A1–A6 are now built in `base.html`, with i18n keys
|
||||
> added to `assets/i18n/{sk,en}/main.ftl` (`top-contact`, `search-button`,
|
||||
> `welcome`, `brand-subtitle`, `footer-*`, `hotline`, …). Verified: `/`, `/shop`,
|
||||
> `/login`, `/register`, `/cart`, `/search?q=` all 200, no render errors.
|
||||
> The `Kontakt` / `Mapa stránky` top-bar links and the footer info links point to
|
||||
> `#` until real pages exist.
|
||||
|
||||
### A1. Top utility bar — ✅ done
|
||||
Mockup: thin white bar above the header, right‑aligned links *Kontakt* · *Mapa
|
||||
stránky*.
|
||||
- New `<div>` strip at the very top of `base.html`, `border-b border-outline
|
||||
bg-surface text-xs text-on-surface/70`.
|
||||
- Links to a future `/kontakt` and `/sitemap` (or existing pages).
|
||||
- Low effort, no backend.
|
||||
|
||||
### A2. In‑header search bar — ✅ done
|
||||
Mockup: full‑width search input with a magnifier icon + blue **Hľadať** submit
|
||||
button, centered in the header.
|
||||
- **Backend already exists**: `GET /search` (`src/controllers/shop.rs:353`,
|
||||
`run_search` at `:90`, fragment `assets/views/shop/_search.html`). Just needs a
|
||||
header form: `<form action="/search" method="get">` with `name="q"`, optionally
|
||||
`hx-get="/search" hx-trigger="keyup changed delay:300ms"` for live results.
|
||||
- Copy markup from `penguinui-components/navbar/with-search.html` and/or
|
||||
`penguinui-components/text-input/search-input.html`.
|
||||
- Medium effort — mostly wiring the existing endpoint into the header layout.
|
||||
|
||||
### A3. Logo lockup with subtitle — ✅ done
|
||||
Mockup: rounded blue tile with a "+" cross glyph + **KOMPRESS** + uppercase
|
||||
subtitle *zdravotnícke potreby*.
|
||||
- Current logo is a plain text wordmark in `base.html`. Add the icon tile
|
||||
(`bg-primary text-on-primary`, `rounded-radius`) and the muted subtitle line.
|
||||
- Cross SVG is in the mockup (two rounded `<rect>`s). Low effort.
|
||||
|
||||
### A4. Account button (two‑line) — ✅ done
|
||||
Mockup: person icon + stacked *Vitajte* / *Prihláste sa* (or the customer name when
|
||||
logged in).
|
||||
- Logged‑in/out state already available via `logged_in_customer` /
|
||||
`customer_name` and the existing `partials/profile_menu.html`.
|
||||
- Restyle the login link / profile menu trigger into the two‑line button. Low effort.
|
||||
|
||||
### A5. Cart button with text label — ✅ done
|
||||
Mockup: cart icon + red count badge + stacked *Košík* / *N produktov* label.
|
||||
- The icon + cookie‑driven badge already exist in `base.html` (`cartCount()` JS).
|
||||
Add the text label beside it; pluralize "produkt/produkty/produktov" (mirror the
|
||||
mockup's `plural()` helper, or add an i18n key).
|
||||
- Low effort.
|
||||
|
||||
### A6. Footer — ✅ done
|
||||
Mockup: 4‑column footer (brand blurb · Informácie · Účet · Kontakt) + copyright bar.
|
||||
- **No footer exists anywhere** (`grep "<footer"` → none). Add once to `base.html`
|
||||
after `<main>`.
|
||||
- Static links; reuse the same i18n keys as the nav. Low effort, high visual payoff.
|
||||
|
||||
---
|
||||
|
||||
## B. Listing layout (`shop/category.html`, `shop/_product_grid.html`)
|
||||
|
||||
The mockup's body is really a **category/listing** layout. The home page borrows its
|
||||
look; the real listing pages should adopt the rest.
|
||||
|
||||
### B1. Breadcrumbs — 🟢
|
||||
Mockup: *Domov › Zdravotnícke › {kategória}* with chevron separators.
|
||||
- **Already implemented** on category pages: `breadcrumbs` loop in
|
||||
`assets/views/shop/category.html:12`. Just needs the mockup's chevron styling and
|
||||
to be surfaced on more pages (e.g. product detail, optionally a "Domov" crumb on
|
||||
home).
|
||||
- Copy from `penguinui-components/breadcrumbs/breadcrumb-with-chevron.html`.
|
||||
- Low effort (restyle existing).
|
||||
|
||||
### B2. Category banner card — 🔴
|
||||
Mockup: white card with a 148px image placeholder + category description paragraph +
|
||||
**Viac ›** link, shown above the product list.
|
||||
- Per‑category copy/image. Needs a `description` (and optional banner image) field on
|
||||
the category model, or static copy keyed by slug for now.
|
||||
- Render as the app card idiom (`border border-outline bg-surface-alt dark:…`).
|
||||
- Medium effort (model field) or low (static placeholder first).
|
||||
|
||||
### B3. Sort control ("Zoradiť podľa") — 🟢
|
||||
Mockup: styled `<select>` — Predvolené / Cena ↑ / Cena ↓ / Názov A–Z /
|
||||
Najpredávanejšie.
|
||||
- **Backend already exists**: `sort` query param (`src/controllers/shop.rs:41,81,
|
||||
179‑181`). Needs the styled select wired to it (`hx-get` on `change`, preserving
|
||||
the query + filters via the existing `build_query` helper at `shop.rs:63`).
|
||||
- Copy from `penguinui-components/select/default-select.html`.
|
||||
- Low effort.
|
||||
|
||||
### B4. View grid/list toggle — 🟢 (done elsewhere)
|
||||
- **Already implemented** in `assets/views/shop/_product_grid.html` (Alpine `view`
|
||||
state, persisted to `localStorage`). The mockup's toggle is the same idea; just
|
||||
align the icon/segmented‑button styling with the mockup. Cosmetic only.
|
||||
|
||||
### B5. "Porovnať" (compare) — 🔴
|
||||
Mockup: a *Porovnať* button in the listing toolbar.
|
||||
- **No compare feature exists.** Net‑new: select‑to‑compare state (Alpine + a cookie
|
||||
or server list) and a compare view. Largest item here — defer unless wanted.
|
||||
|
||||
### B6. List‑view product card — 🟡
|
||||
Mockup list rows are richer (left thumbnail, description, stock pill, price block,
|
||||
add/options/out‑of‑stock button on the right).
|
||||
- `shop/_card.html` already has a `view === 'list'` horizontal layout. Close already;
|
||||
optionally add the stock pill (*Skladom* / *Vypredané*) and discount badge to match.
|
||||
- Low effort.
|
||||
|
||||
---
|
||||
|
||||
## C. Left sidebar (`assets/views/partials/categories.html` via `/partials/categories`)
|
||||
|
||||
Mockup left column = two white cards: a collapsible **Kategórie** tree and an
|
||||
**Informácie** links card. base.html already renders `#category-sidebar` from
|
||||
`/partials/categories`, so this is a restyle of that partial.
|
||||
|
||||
### C1. Collapsible category tree — 🟡
|
||||
Mockup: top‑level groups with +/− chevrons; expanded group shows leaf links, active
|
||||
leaf highlighted (`bg-primary/10 text-primary font-bold`).
|
||||
- Style the existing categories partial as a white card with Alpine‑toggled
|
||||
sub‑lists (`x-data="{ open: … }"`). Active state via `aria-current` + the existing
|
||||
`markActiveNav()` pattern.
|
||||
- Medium effort.
|
||||
|
||||
### C2. "Informácie" links card — 🔴
|
||||
Mockup: second sidebar card with Obchodné podmienky / O našej spoločnosti / Naše
|
||||
obchody / Doprava a platba.
|
||||
- Static links card; same markup as the contact/stores cards already added to the
|
||||
home right rail. Low effort.
|
||||
|
||||
---
|
||||
|
||||
## D. Right rail — mostly done
|
||||
|
||||
Implemented on the home page: **Najpredávanejšie** (from featured products), **Naše
|
||||
obchody** placeholder, **Kontaktujte nás** blue card.
|
||||
|
||||
Remaining 🟡:
|
||||
- **D1. Bestsellers from real sales data** — currently reuses the featured query;
|
||||
wire to actual order/sales counts when available.
|
||||
- **D2. "Naše obchody" real photo + page** — replace the placeholder block and link
|
||||
to a real stores page.
|
||||
- **D3. Contact hotline** — phone number is hardcoded; move to config/i18n.
|
||||
|
||||
---
|
||||
|
||||
## Suggested order (quick wins first)
|
||||
1. Footer (A6) + top utility bar (A1) — pure markup, big visual lift.
|
||||
2. Header search (A2) + cart label (A5) + logo lockup (A3) — wire existing data.
|
||||
3. Sort select (B3) + breadcrumb restyle (B1) — backends already exist.
|
||||
4. Sidebar restyle (C1, C2).
|
||||
5. Category banner (B2), richer list card (B6).
|
||||
6. Compare (B5) — only if the feature is actually wanted.
|
||||
|
||||
## Reference
|
||||
- Mockup source extracted to (scratch, regenerate via DesignSync if needed):
|
||||
`DesignSync get_file` on project `015b8bf5-fd27-4a7e-82d9-d1864a59578c`,
|
||||
file `Kompress-eshop.html` → `__bundler/template` script holds the real markup.
|
||||
- PenguinUI workflow: see `penguinui-workflow` memory + `hardcoded-inventory.md`.
|
||||
Reference in New Issue
Block a user