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

this broke nice UI for more clear usage of penguin ui

Browse Source
This commit is contained in:
Priec
2026-06-17 22:52:07 +02:00
parent 0754e014a3
commit ae99ec079f
14 changed files with 72 additions and 57 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

4
assets/views/admin/catalog/categories.html
View File

@@ -10,7 +10,7 @@
<h1 class="text-2xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="admin-categories", lang=lang | default(value='sk')) }}</h1>
<p class="text-sm text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="admin-categories-desc", lang=lang | default(value='sk')) }}</p>
</div>
{{ ui::button_primary(label=t(key="new-category", lang=lang | default(value='sk')), href="/admin/catalog/categories/new") }}
{{ ui::button(label=t(key="new-category", lang=lang | default(value='sk')), href="/admin/catalog/categories/new") }}
</div>
<div class="mt-6 overflow-hidden rounded-radius border border-outline dark:border-outline-dark">
@@ -58,7 +58,7 @@
{% else %}
<div class="flex flex-col items-center gap-3 px-4 py-16 text-center">
<p class="text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="admin-no-categories", lang=lang | default(value='sk')) }}</p>
{{ ui::button_primary(label=t(key="new-category", lang=lang | default(value='sk')), href="/admin/catalog/categories/new") }}
{{ ui::button(label=t(key="new-category", lang=lang | default(value='sk')), href="/admin/catalog/categories/new") }}
</div>
{% endif %}
</div>

6
assets/views/admin/catalog/category_form.html
View File

@@ -9,7 +9,7 @@
<h1 class="text-2xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">
{% if category %}{{ t(key="edit-category", lang=lang | default(value='sk')) }}{% else %}{{ t(key="new-category", lang=lang | default(value='sk')) }}{% endif %}
</h1>
{{ ui::button_outline(label=t(key="cancel", lang=lang | default(value='sk')), href="/admin/catalog/categories") }}
{{ ui::button(variant="outline-secondary", label=t(key="cancel", lang=lang | default(value='sk')), href="/admin/catalog/categories", pad="px-3 py-2") }}
</div>
<form method="post" enctype="multipart/form-data"
@@ -71,8 +71,8 @@
</label>
<div class="flex gap-3 pt-2">
{{ ui::button_primary(label=t(key="save", lang=lang | default(value='sk')), type="submit") }}
{{ ui::button_outline(label=t(key="cancel", lang=lang | default(value='sk')), href="/admin/catalog/categories") }}
{{ ui::button(label=t(key="save", lang=lang | default(value='sk')), type="submit") }}
{{ ui::button(variant="outline-secondary", label=t(key="cancel", lang=lang | default(value='sk')), href="/admin/catalog/categories") }}
</div>
</form>
{% endblock content %}

6
assets/views/admin/catalog/product_form.html
View File

@@ -9,7 +9,7 @@
<h1 class="text-2xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">
{% if product %}{{ t(key="edit-product", lang=lang | default(value='sk')) }}{% else %}{{ t(key="new-product", lang=lang | default(value='sk')) }}{% endif %}
</h1>
{{ ui::button_outline(label=t(key="cancel", lang=lang | default(value='sk')), href="/admin/catalog/products") }}
{{ ui::button(variant="outline-secondary", label=t(key="cancel", lang=lang | default(value='sk')), href="/admin/catalog/products", pad="px-3 py-2") }}
</div>
<form method="post" enctype="multipart/form-data"
@@ -89,8 +89,8 @@
</label>
<div class="flex gap-3 pt-2">
{{ ui::button_primary(label=t(key="save", lang=lang | default(value='sk')), type="submit") }}
{{ ui::button_outline(label=t(key="cancel", lang=lang | default(value='sk')), href="/admin/catalog/products") }}
{{ ui::button(label=t(key="save", lang=lang | default(value='sk')), type="submit") }}
{{ ui::button(variant="outline-secondary", label=t(key="cancel", lang=lang | default(value='sk')), href="/admin/catalog/products") }}
</div>
</form>
{% endblock content %}

4
assets/views/admin/catalog/products.html
View File

@@ -10,7 +10,7 @@
<h1 class="text-2xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="admin-products", lang=lang | default(value='sk')) }}</h1>
<p class="text-sm text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="admin-products-desc", lang=lang | default(value='sk')) }}</p>
</div>
{{ ui::button_primary(label=t(key="new-product", lang=lang | default(value='sk')), href="/admin/catalog/products/new") }}
{{ ui::button(label=t(key="new-product", lang=lang | default(value='sk')), href="/admin/catalog/products/new") }}
</div>
<div class="mt-6 overflow-hidden rounded-radius border border-outline dark:border-outline-dark">
@@ -69,7 +69,7 @@
{% else %}
<div class="flex flex-col items-center gap-3 px-4 py-16 text-center">
<p class="text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="admin-no-products", lang=lang | default(value='sk')) }}</p>
{{ ui::button_primary(label=t(key="new-product", lang=lang | default(value='sk')), href="/admin/catalog/products/new") }}
{{ ui::button(label=t(key="new-product", lang=lang | default(value='sk')), href="/admin/catalog/products/new") }}
</div>
{% endif %}
</div>

2
assets/views/admin/login.html
View File

@@ -45,7 +45,7 @@
class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-none focus:ring-2 focus:ring-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark dark:focus:ring-primary-dark">
</div>
{{ ui::button_primary(label=t(key="login-auth", lang=lang | default(value='sk')), type="submit", extra="mt-1 w-full") }}
{{ ui::button(label=t(key="login-auth", lang=lang | default(value='sk')), type="submit", extra="mt-1 w-full") }}
</form>
</div>
</div>

6
assets/views/admin/orders/show.html
View File

@@ -7,7 +7,7 @@
{% block content %}
<div class="flex flex-wrap items-center justify-between gap-3">
<h1 class="font-mono text-2xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ order.order_number }}</h1>
{{ ui::button_outline(label=t(key="admin-orders", lang=lang | default(value='sk')), href="/admin/orders") }}
{{ ui::button(variant="outline-secondary", label=t(key="admin-orders", lang=lang | default(value='sk')), href="/admin/orders", pad="px-3 py-2") }}
</div>
{% if ship_error %}
@@ -96,7 +96,7 @@
onsubmit="return confirm('{{ t(key="order-send-confirm", lang=lang | default(value='sk')) }}')">
{% set carrier_up = carrier | upper %}
{% set ship_label = t(key="order-send-to-carrier", lang=lang | default(value='sk')) ~ " " ~ carrier_up %}
{{ ui::button_primary(label=ship_label, type="submit", extra="w-full") }}
{{ ui::button(label=ship_label, type="submit", extra="w-full") }}
</form>
{% endif %}
</div>
@@ -109,7 +109,7 @@
<option value="{{ status }}" {% if order.status == status %}selected{% endif %}>{{ t(key="order-status-" ~ status, lang=lang | default(value='sk')) }}</option>
{% endfor %}
</select>
{{ ui::button_primary(label=t(key="order-update-status", lang=lang | default(value='sk')), type="submit", extra="w-full") }}
{{ ui::button(label=t(key="order-update-status", lang=lang | default(value='sk')), type="submit", extra="w-full") }}
</form>
</aside>
</div>

2
assets/views/admin/shipping/index.html
View File

@@ -28,7 +28,7 @@
class="size-4 rounded border-outline text-primary focus:ring-primary dark:border-outline-dark">
<span class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="shipping-enabled", lang=lang | default(value='sk')) }}</span>
</label>
{{ ui::button_primary(label=t(key="save", lang=lang | default(value='sk')), type="submit", extra="ml-auto") }}
{{ ui::button(label=t(key="save", lang=lang | default(value='sk')), type="submit", extra="ml-auto") }}
</form>
{% endfor %}
</div>

56
assets/views/macros/ui.html
View File

@@ -6,36 +6,46 @@
Usage:
{% import "macros/ui.html" as ui %}
{{ ui::button_primary(label=t(key="save", lang=lang)) }}
{{ ui::button_primary(label="Add", attrs='hx-post="/x"' | safe) }}
{{ ui::button_outline(label="Cancel", href="/back") }}
{{ ui::button(label=t(key="save", lang=lang)) }} {# default primary #}
{{ ui::button(label="Add", attrs='hx-post="/x"' | safe) }}
{{ ui::button(label="Cancel", variant="outline-secondary", href="/back") }}
{{ ui::button(label="Send", pad="px-6 py-2.5") }} {# keep a non-default size #}
{{ ui::badge(label="Published", variant="success") }}
Notes:
- Macros can't see template context vars (e.g. `lang`); pass already-translated
strings as `label`.
- `attrs` is injected raw (caller must pass it through `| safe`); use it for
htmx / name / value / @click etc. For buttons whose attrs carry nested
quotes (e.g. hx-on with toast(...)), keep them inline instead.
- Source: penguinui/buttons/{default,outline,ghost}-button.html and
penguinui/badge/soft-color-badge.html. Upstream's color-button typos
(text-onDanger etc.) are fixed to our real tokens (text-on-danger). #}
htmx / name / value / @click / :disabled etc. For buttons whose attrs carry
nested quotes (e.g. hx-on with toast(...)), keep them inline instead.
- `pad` is the size (default Penguin "px-4 py-2"); override to preserve an
existing size rather than normalizing it.
- The button class strings are the **verbatim** Penguin variants from
penguinui/buttons/{default,outline,ghost}-button.html (only `inline-flex
items-center justify-center` is added so <a> and w-full render correctly,
and the upstream `text-onDanger`/`text-onSuccess`… token typos are fixed to
our real `text-on-*` tokens). `variant` selects a Penguin variant:
solid : primary (default) | secondary | danger | success | warning | info
outline : outline-primary | outline-secondary | outline-alternate | outline-danger
ghost : ghost-primary | ghost-secondary | ghost-danger #}
{% macro button_primary(label, type="button", href="", attrs="", extra="") -%}
{% if href %}<a href="{{ href }}"{% else %}<button type="{{ type }}"{% endif %} class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-radius border border-primary bg-primary px-4 py-2 text-center text-sm font-medium tracking-wide text-on-primary transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 dark:border-primary-dark dark:bg-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark {{ extra }}" {{ attrs | safe }}>{{ label }}</{% if href %}a{% else %}button{% endif %}>
{%- endmacro button_primary %}
{% macro button_outline(label, type="button", href="", attrs="", extra="") -%}
{% if href %}<a href="{{ href }}"{% else %}<button type="{{ type }}"{% endif %} class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-radius border border-outline bg-surface-alt px-4 py-2 text-center text-sm font-medium tracking-wide text-on-surface transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-outline-strong active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark dark:focus-visible:outline-outline-dark-strong {{ extra }}" {{ attrs | safe }}>{{ label }}</{% if href %}a{% else %}button{% endif %}>
{%- endmacro button_outline %}
{% macro button_danger(label, type="button", href="", attrs="", extra="") -%}
{% if href %}<a href="{{ href }}"{% else %}<button type="{{ type }}"{% endif %} class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-radius border border-danger bg-danger px-4 py-2 text-center text-sm font-medium tracking-wide text-on-danger transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-danger active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 dark:focus-visible:outline-danger {{ extra }}" {{ attrs | safe }}>{{ label }}</{% if href %}a{% else %}button{% endif %}>
{%- endmacro button_danger %}
{% macro button_ghost(label, type="button", href="", attrs="", extra="") -%}
{% if href %}<a href="{{ href }}"{% else %}<button type="{{ type }}"{% endif %} class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-radius bg-transparent px-4 py-2 text-center text-sm font-medium tracking-wide text-primary transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 dark:text-primary-dark dark:focus-visible:outline-primary-dark {{ extra }}" {{ attrs | safe }}>{{ label }}</{% if href %}a{% else %}button{% endif %}>
{%- endmacro button_ghost %}
{% macro button(label, variant="primary", type="button", href="", attrs="", extra="", pad="px-4 py-2") -%}
{%- if variant == "secondary" -%}{% set cls = "border border-secondary bg-secondary text-on-secondary focus-visible:outline-secondary dark:border-secondary-dark dark:bg-secondary-dark dark:text-on-secondary-dark dark:focus-visible:outline-secondary-dark" -%}
{%- elif variant == "danger" -%}{% set cls = "border border-danger bg-danger text-on-danger focus-visible:outline-danger dark:bg-danger dark:border-danger dark:text-on-danger dark:focus-visible:outline-danger" -%}
{%- elif variant == "success" -%}{% set cls = "border border-success bg-success text-on-success focus-visible:outline-success dark:bg-success dark:border-success dark:text-on-success dark:focus-visible:outline-success" -%}
{%- elif variant == "warning" -%}{% set cls = "border border-warning bg-warning text-on-warning focus-visible:outline-warning dark:bg-warning dark:border-warning dark:text-on-warning dark:focus-visible:outline-warning" -%}
{%- elif variant == "info" -%}{% set cls = "border border-info bg-info text-on-info focus-visible:outline-info dark:bg-info dark:border-info dark:text-on-info dark:focus-visible:outline-info" -%}
{%- elif variant == "outline-primary" -%}{% set cls = "border border-primary bg-transparent text-primary focus-visible:outline-primary dark:border-primary-dark dark:text-primary-dark dark:focus-visible:outline-primary-dark" -%}
{%- elif variant == "outline-secondary" -%}{% set cls = "border border-secondary bg-transparent text-secondary focus-visible:outline-secondary dark:border-secondary-dark dark:text-secondary-dark dark:focus-visible:outline-secondary-dark" -%}
{%- elif variant == "outline-alternate" -%}{% set cls = "border border-outline bg-transparent text-outline focus-visible:outline-outline dark:border-outline-dark dark:text-outline-dark dark:focus-visible:outline-outline-dark" -%}
{%- elif variant == "outline-danger" -%}{% set cls = "border border-danger bg-transparent text-danger focus-visible:outline-danger dark:border-danger dark:text-danger dark:focus-visible:outline-danger" -%}
{%- elif variant == "ghost-primary" -%}{% set cls = "bg-transparent text-primary focus-visible:outline-primary dark:text-primary-dark dark:focus-visible:outline-primary-dark" -%}
{%- elif variant == "ghost-secondary" -%}{% set cls = "bg-transparent text-secondary focus-visible:outline-secondary dark:text-secondary-dark dark:focus-visible:outline-secondary-dark" -%}
{%- elif variant == "ghost-danger" -%}{% set cls = "bg-transparent text-danger focus-visible:outline-danger dark:text-danger dark:focus-visible:outline-danger" -%}
{%- else -%}{% set cls = "border border-primary bg-primary text-on-primary focus-visible:outline-primary dark:border-primary-dark dark:bg-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark" -%}
{%- endif -%}
{% if href %}<a href="{{ href }}"{% else %}<button type="{{ type }}"{% endif %} class="inline-flex items-center justify-center whitespace-nowrap rounded-radius {{ pad }} text-center text-sm font-medium tracking-wide transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 {{ cls }} {{ extra }}" {{ attrs | safe }}>{{ label }}</{% if href %}a{% else %}button{% endif %}>
{%- endmacro button %}
{# Compact danger alert (form/inline errors). Adapted from
penguinui/alert/default-alert.html (danger variant), trimmed to a single line

6
assets/views/shop/_cart_body.html
View File

@@ -61,12 +61,12 @@
</div>
<div class="mt-6 flex flex-wrap justify-between gap-3">
{{ ui::button_outline(label=t(key="cart-continue", lang=lang | default(value='sk')), href="/shop") }}
{{ ui::button_primary(label=t(key="cart-checkout", lang=lang | default(value='sk')), href="/checkout") }}
{{ ui::button(variant="outline-secondary", label=t(key="cart-continue", lang=lang | default(value='sk')), href="/shop") }}
{{ ui::button(label=t(key="cart-checkout", lang=lang | default(value='sk')), href="/checkout", pad="px-5 py-2") }}
</div>
{% else %}
<div class="rounded-radius border border-outline px-6 py-16 text-center dark:border-outline-dark">
<p class="text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="cart-empty", lang=lang | default(value='sk')) }}</p>
{{ ui::button_primary(label=t(key="cart-continue", lang=lang | default(value='sk')), href="/shop", extra="mt-4") }}
{{ ui::button(label=t(key="cart-continue", lang=lang | default(value='sk')), href="/shop", extra="mt-4") }}
</div>
{% endif %}

2
assets/views/shop/checkout.html
View File

@@ -212,7 +212,7 @@
<span>{{ t(key="cart-total", lang=lang | default(value='sk')) }}</span>
<span class="tabular-nums text-primary dark:text-primary-dark" x-text="fmt(subtotal + carrierPrice) + ' {{ currency }}'"></span>
</div>
{{ ui::button_primary(label=t(key="checkout-place-order", lang=lang | default(value='sk')), type="submit", attrs=':disabled="!canSubmit"', extra="w-full disabled:opacity-40") }}
{{ ui::button(label=t(key="checkout-place-order", lang=lang | default(value='sk')), type="submit", attrs=':disabled="!canSubmit"', extra="w-full", pad="px-6 py-2.5") }}
</aside>
</form>
{% endblock content %}

2
assets/views/shop/order_confirmed.html
View File

@@ -56,7 +56,7 @@
{% endif %}
<div class="text-center">
{{ ui::button_outline(label=t(key="cart-continue", lang=lang | default(value='sk')), href="/shop") }}
{{ ui::button(variant="outline-secondary", label=t(key="cart-continue", lang=lang | default(value='sk')), href="/shop", pad="px-5 py-2") }}
</div>
</div>
{% endblock content %}

2
assets/views/shop/show.html
View File

@@ -48,7 +48,7 @@
<input id="quantity" name="quantity" type="number" min="1" max="{{ product.stock }}" value="1"
class="w-24 rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
</div>
{{ ui::button_primary(label=t(key="add-to-cart", lang=lang | default(value='sk')), type="submit") }}
{{ ui::button(label=t(key="add-to-cart", lang=lang | default(value='sk')), type="submit", pad="px-5 py-2") }}
</form>
<p class="text-sm text-on-surface/60 dark:text-on-surface-dark/60">{{ t(key="in-stock", lang=lang | default(value='sk')) }}: {{ product.stock }}</p>
{% else %}

29
hardcoded-inventory.md
View File

@@ -285,22 +285,27 @@ This is copy-pasted 5 times.
---
## 17. Buttons — ✅ DONE (canonical macros + adopted)
## 17. Buttons — ✅ DONE
**Penguin UI: `buttons/default-button.html`, `outline-button.html`, `ghost-button.html`, `button-with-icon.html`**
- Exact upstream mirrors at `assets/views/penguinui/buttons/*.html` (reference only).
- Canonical button macros in `assets/views/macros/ui.html`:
`ui::button_primary`, `ui::button_outline` (neutral secondary), `ui::button_danger`,
`ui::button_ghost`. Each takes `label`, `type`, `href` (renders `<a>` vs `<button>`),
`attrs` (raw — htmx / `:disabled` / name / value), `extra` (extra classes).
Upstream's color-button token typos (`text-onDanger` etc.) are fixed to our real
tokens (`text-on-danger`).
- One macro `ui::button(label, variant="primary", type, href, attrs, extra, pad="px-4 py-2")`
in `assets/views/macros/ui.html`. The per-variant class strings are the
**verbatim** Penguin variants (solid `primary|secondary|danger|success|warning|info`,
`outline-*`, `ghost-*`) — only `inline-flex items-center justify-center` is added
so `<a>`/`w-full` render, and upstream's `text-onDanger`/`text-onSuccess`… token
typos are fixed to our real `text-on-*` tokens. `href` → `<a>` else `<button>`;
`attrs` is raw (htmx / `:disabled` / name / value).
- **Sizes are NOT normalized**: `pad` defaults to Penguin's `px-4 py-2` but each
call site that was a different size keeps it (`px-3 py-2` form-header cancels &
order back, `px-5 py-2` add-to-cart / cart-checkout / order-confirmed continue,
`px-6 py-2.5` checkout place-order).
- Adopted across every standard filled/outline/submit button: login, product &
category forms (save/cancel), products/categories "new" + empty-state CTAs,
orders detail (back/ship/status), shipping save, cart (continue/checkout/empty),
checkout place-order (`:disabled` via `attrs`), product detail add-to-cart,
order-confirmed continue.
- Intentionally left inline (different components, not the standard button):
category forms (save / cancel = `outline-secondary`), products/categories "new" +
empty-state CTAs, orders detail (back/ship/status), shipping save, cart
(continue/checkout/empty), checkout place-order (`:disabled` via `attrs`),
product detail add-to-cart, order-confirmed continue.
- Left inline (these are other Penguin variants/components, not this button):
icon-only ghost buttons (#51 gear/hamburger/chevron), compact table row-action
buttons (`edit`/`view`/`delete`, `px-3 py-1.5 text-xs`), the `text-danger`
"Remove" text link (#52), the file-input button (#13), and nav menu links.