more hardcodes are done
This commit is contained in:
Priec
@@ -87,20 +87,18 @@ and then use it (instead of hand-rolling):
|
||||
|
||||
---
|
||||
|
||||
## 4. Dropdown (Settings)
|
||||
**Penguin UI: `dropdown-menu/` (dropdown-with-click.html, dropdown-with-icons.html)**
|
||||
## 4. Dropdown (Settings) — ✅ DONE
|
||||
**Penguin UI: `dropdowns/dropdown-with-click.html`**
|
||||
|
||||
| # | Location | What it is | Size |
|
||||
|---|----------|------------|------|
|
||||
| 7 | `assets/views/base.html:110-162` | Language + theme settings dropdown (gear icon trigger) | ~53 lines |
|
||||
| 8 | `assets/views/admin/base.html:117-166` | **100% duplicate** of the same dropdown | ~50 lines |
|
||||
|
||||
**Details:**
|
||||
- Both dropdowns are **identical** (copy-paste), totaling ~103 lines of duplicated code
|
||||
- Alpine `x-data="{ open: false }"` + `@click.outside`
|
||||
- Language switcher: English / Slovenčina buttons in a `<form method="post" action="/lang">`
|
||||
- Theme tristate: system / light / dark with `setTheme()` and `currentTheme()` from inline JS
|
||||
- Gear cog inline SVG icon
|
||||
- Exact upstream mirror at `assets/views/penguinui/dropdowns/dropdown-with-click.html` (reference only)
|
||||
- **De-duplicated**: the ~103-line copy-paste is now one shared partial
|
||||
`assets/views/partials/settings_dropdown.html`, included by both `base.html`
|
||||
and `admin/base.html` (each host keeps its own positioning wrapper
|
||||
`<div x-data="{ open:false }" class="relative [ml-auto]">`).
|
||||
- Adopts Penguin's dropdown menu container + item treatment. Deviations: kept our
|
||||
gear icon-only trigger and core-Alpine open/@click.outside toggle (upstream's
|
||||
`x-trap`/`$focus` need the Alpine Focus plugin we don't bundle); item hover
|
||||
uses `bg-primary/5` for consistency with the rest of the UI.
|
||||
|
||||
---
|
||||
|
||||
@@ -261,51 +259,57 @@ This is copy-pasted 5 times.
|
||||
|
||||
---
|
||||
|
||||
## 15. Alert / Error Banner
|
||||
**Penguin UI: `alert/` (6 variants)**
|
||||
## 15. Alert / Error Banner — ✅ DONE
|
||||
**Penguin UI: `alert/default-alert.html`**
|
||||
|
||||
| # | Location | What it is | Size |
|
||||
|---|----------|------------|------|
|
||||
| 39 | `assets/views/admin/login.html:25-30` | Login error alert (`role="alert"`, danger border) | ~6 lines |
|
||||
| 40 | `assets/views/admin/orders/show.html:13-15` | Ship error alert (danger border) | ~3 lines |
|
||||
|
||||
**Pattern:** `rounded-radius border border-danger/40 bg-danger/10 px-3 py-2 text-sm text-danger`
|
||||
- Exact upstream mirror at `assets/views/penguinui/alert/default-alert.html` (reference only)
|
||||
- Adapted into the `ui::alert_danger(message, extra="")` macro in
|
||||
`assets/views/macros/ui.html` (compact one-line danger alert + danger icon).
|
||||
- Adopted at both sites: `admin/login.html` (login error) and
|
||||
`admin/orders/show.html` (ship error).
|
||||
|
||||
---
|
||||
|
||||
## 16. Badge / Status Pill
|
||||
**Penguin UI: `badge/` (7 variants)**
|
||||
## 16. Badge / Status Pill — ✅ DONE
|
||||
**Penguin UI: `badge/soft-color-badge.html`**
|
||||
|
||||
| # | Location | What it is | Size |
|
||||
|---|----------|------------|------|
|
||||
| 41 | `assets/views/base.html:107-108` | Cart item-count badge (absolute-positioned, number) | ~2 lines |
|
||||
| 42 | `assets/views/admin/login.html:14-16` | "Auth" badge on login card header | ~3 lines |
|
||||
| 43 | `assets/views/admin/orders/index.html:27` | Order status inline pill | ~1 line |
|
||||
| 44 | `assets/views/admin/catalog/products.html:49-53` | Published/Draft status pill | ~5 lines |
|
||||
| 45 | `assets/views/admin/catalog/categories.html:40-44` | Published/Draft status pill | ~5 lines |
|
||||
| 46 | `assets/views/shop/_card.html:27` | "Out of stock" badge (danger background) | ~1 line |
|
||||
- Exact upstream mirror at `assets/views/penguinui/badge/soft-color-badge.html` (reference only)
|
||||
- Adapted into the `ui::badge(label, variant)` macro in `assets/views/macros/ui.html`
|
||||
(variants: success | danger | warning | info | primary | neutral).
|
||||
- Adopted at the status-pill sites: "Auth" badge (`admin/login.html`), order status
|
||||
(`orders/index.html`, neutral), Published/Draft pills (`products.html` +
|
||||
`categories.html`, success/neutral).
|
||||
- Intentionally left inline (not soft-color pills): the cart item-count **notification**
|
||||
badge in `base.html` (count bubble, a different Penguin badge type) and the
|
||||
block-style "out of stock" notice in `_card.html`.
|
||||
|
||||
---
|
||||
|
||||
## 17. Buttons
|
||||
**Penguin UI: `buttons/` (6 variants)**
|
||||
## 17. Buttons — ✅ DONE (canonical macros + adopted)
|
||||
**Penguin UI: `buttons/default-button.html`, `outline-button.html`, `ghost-button.html`, `button-with-icon.html`**
|
||||
|
||||
| # | Location | What it is | Style | Count |
|
||||
|---|----------|------------|-------|-------|
|
||||
| 47 | Across all templates | Primary button | `bg-primary text-on-primary rounded-radius px-4 py-2` | 15+ |
|
||||
| 48 | Across all templates | Outline/secondary button | `border border-outline text-on-surface rounded-radius px-3 py-1.5` | 20+ |
|
||||
| 49 | `base.html:86-88`, `admin/base.html:92-95` | Danger button (logout, delete) | `text-danger` with hover bg | 4 |
|
||||
| 50 | `base.html:84` | Warning-colored button (admin link) | `text-warning` | 1 |
|
||||
| 51 | `base.html:112-113`, `admin/base.html:118-119`, ... | Icon-only ghost button (gear, hamburger, chevron) | `size-9 inline-flex items-center justify-center` | 10+ |
|
||||
| 52 | `_cart_body.html:46` | Text/link button (Remove) | `text-danger hover:underline` | 1 |
|
||||
- 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`).
|
||||
- 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):
|
||||
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.
|
||||
|
||||
Summary of button variants handcoded:
|
||||
- `bg-primary` (solid primary)
|
||||
- `border border-outline` (outline)
|
||||
- `file:bg-primary` (file input button)
|
||||
- `text-danger` / `text-warning` (semantic)
|
||||
- `hover:opacity-75` vs `hover:opacity-90` — inconsistent hover effects
|
||||
- `tracking-wide` on some, not others
|
||||
> Gotcha for future macro use: Tera renders `{% include %}` in the **includer's**
|
||||
> macro scope, so a template that includes a partial which calls `ui::` must also
|
||||
> `{% import "macros/ui.html" as ui %}` itself (see `shop/cart.html` →
|
||||
> `shop/_cart_body.html`). In an `{% extends %}` child the import must sit
|
||||
> directly after `{% extends %}` with no comment/content before it.
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user