style(ui): full UX/UI + motion pass across storefront, admin, editor
Some checks failed
Architecture Governance / architecture (push) Has been cancelled
Some checks failed
Architecture Governance / architecture (push) Has been cancelled
- fix save-bar buttons to use shared app-button primitive (were unstyled) - fix platform-nav-group border/radius via structural selectors, drop dead -middle/-right classes - storefront widgets (hero/categories/product-carousel/footer-nav): design tokens, hover/focus states, 44px touch targets, entrance motion, reduced- motion guards - admin dashboard cards + quick-actions: hover lift, entrance animation - admin product-form gallery remove badge: hover/focus + expanded hit area - project-editor section.shared button styles: hover/active/focus/disabled states + reduced-motion; section-switch fade-in motion Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -6,7 +6,14 @@ don't fix inline unless asked.
|
||||
|
||||
## Open
|
||||
|
||||
1. **~179 untranslated raw i18n keys across the entire admin backoffice CRUD
|
||||
1. **Homepage hero-to-categories dead space gap on the storefront home
|
||||
page.** Traces to bootstrap mock config (widget/section padding values
|
||||
in the dev bootstrap fixture), not a code defect in
|
||||
`dynamic-page-layout.component.ts` or the widget components - not fixed
|
||||
this session, needs config-side investigation if it reproduces with
|
||||
real tenant data rather than mock config.
|
||||
|
||||
2. **~179 untranslated raw i18n keys across the entire admin backoffice CRUD
|
||||
UI (products/categories/orders/transactions/users/monitoring/analytics).**
|
||||
`translations.ts`/`en.ts`/`ru.ts`/`hy.ts` have no `adminProducts.*`,
|
||||
`adminCategories.*`, `adminOrders.*`, `adminTransactions.*`,
|
||||
@@ -40,7 +47,59 @@ don't fix inline unless asked.
|
||||
|
||||
## Fixed
|
||||
|
||||
1. **Project Editor footer: payment icons and social links had no validation.**
|
||||
1. **Full-project UX/UI + motion pass across storefront, admin dashboard,
|
||||
admin CRUD, and project-editor.**
|
||||
User asked (2026-07-16) for a full UX/UI audit across admin, dashboard,
|
||||
and storefront, sequenced: storefront -> admin dashboard -> admin CRUD ->
|
||||
project-editor. All 4 phases completed:
|
||||
- Fixed: `project-editor-save-bar` buttons were plain unstyled `<button>`s
|
||||
(`project-editor-save-bar.component.html/.scss`) - now use the shared
|
||||
`app-button` primitive.
|
||||
- Fixed: `.platform-nav-group` (`header.component.html/.scss`) applied
|
||||
`platform-nav-btn-left` to every nav button regardless of position,
|
||||
causing double borders and wrong end-radius; replaced with
|
||||
`:first-child`/`:last-child`/`:not(:first-child)` structural selectors,
|
||||
dropped the dead `-middle`/`-right` classes.
|
||||
- Polished: storefront widgets used on every page -
|
||||
`hero-widget.component.ts`, `categories-widget.component.ts`,
|
||||
`product-carousel-widget.component.ts`,
|
||||
`footer-navigation-widget.component.ts` - added design tokens, hover/
|
||||
focus states, 44px touch targets, entrance motion, all gated behind
|
||||
`prefers-reduced-motion`.
|
||||
- Polished: `admin-dashboard-card.component.scss` and
|
||||
`admin-dashboard-quick-actions.component.scss` - hover lift, entrance
|
||||
animation, reduced-motion guard.
|
||||
- Audited: admin backoffice CRUD (products/categories/orders/users/
|
||||
transactions/monitoring/analytics) - already consistently built on the
|
||||
shared `app-button`/`app-table`/`app-badge`/`app-empty-state`/
|
||||
`app-pagination` primitives from earlier sprints; grepped all 7 areas
|
||||
for raw unstyled `<button>`s (the save-bar bug pattern) and found only
|
||||
one: the gallery-image remove badge in
|
||||
`admin-product-form.component.scss` (`.gallery-item button`) had no
|
||||
hover/focus state and a 20x20px hit area below the 44px touch-target
|
||||
minimum - fixed with hover/focus-visible states and an invisible
|
||||
`::before` inset to expand the hit area without changing the visual
|
||||
badge size.
|
||||
- Fixed: `section.shared.scss` (used by all 11 project-editor sections)
|
||||
had a bare `button`/`button.secondary` style with zero hover, focus, or
|
||||
transition - added hover/active/focus-visible/disabled states plus
|
||||
`prefers-reduced-motion` guard, applied uniformly across every section.
|
||||
- Added: `project-editor-page.component.scss` `.project-editor-stack > *`
|
||||
now fades/slides in (220ms) whenever `@switch` swaps the active
|
||||
section component; `.project-editor-section-actions button` (reset
|
||||
section) got the same hover/focus treatment as the rest of the shared
|
||||
button styles.
|
||||
- Verified: `tsc --noEmit` clean after every batch of edits; live-checked
|
||||
in browser at each phase (homepage nav-group render, save-bar render,
|
||||
dashboard cards, project-editor section switch + reset button).
|
||||
- One dev-server crash occurred mid-session (unrelated pre-existing
|
||||
`ng serve` process died independently of these edits, confirmed via
|
||||
`curl` connection-refused before restart) - restarted via
|
||||
`npm run dexar`, not a regression from this work.
|
||||
- See item 1 below (homepage dead-space gap) for the one issue found
|
||||
but not fixed (config data, not code).
|
||||
|
||||
2. **Project Editor footer: payment icons and social links had no validation.**
|
||||
`footer-section.component.ts` parsed both fields from pipe-delimited
|
||||
`<textarea>` strings (`icon.src|icon.alt`, `link.id|link.label|link.url`)
|
||||
with zero validation - malformed rows silently produced empty `src`/`alt`/
|
||||
@@ -51,7 +110,7 @@ don't fix inline unless asked.
|
||||
pattern used in `project-validator.service.ts`) and a missing footer-logo
|
||||
media picker.
|
||||
|
||||
2. **Project Editor navigation: nav link labels only editable for the default locale.**
|
||||
3. **Project Editor navigation: nav link labels only editable for the default locale.**
|
||||
`navigation-section.component.ts`'s `labelOf` helper (and the facade's
|
||||
`updateNavLinkLabel`) always read/wrote the default locale's key on a
|
||||
`NavigationLocalizedText` label map, so switching locales elsewhere in the
|
||||
@@ -63,7 +122,7 @@ don't fix inline unless asked.
|
||||
gained an optional `locale` parameter (defaults to the current default
|
||||
locale, so existing callers are unaffected).
|
||||
|
||||
3. **Quick Actions: 3 untranslated raw i18n keys.**
|
||||
4. **Quick Actions: 3 untranslated raw i18n keys.**
|
||||
`dashboard.actionUsers`, `dashboard.actionMonitoring`,
|
||||
`dashboard.actionAnalytics` rendered as literal key strings instead of
|
||||
translated labels on the admin dashboard's Quick Actions section, because
|
||||
|
||||
Reference in New Issue
Block a user