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:
sdarbinyan
@@ -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
|
||||
|
||||
@@ -11,17 +11,17 @@
|
||||
<!-- Navigation Buttons (desktop) -->
|
||||
<nav class="platform-nav">
|
||||
<div class="platform-nav-group">
|
||||
<a [routerLink]="'/' | langRoute" routerLinkActive="platform-active" [routerLinkActiveOptions]="{exact: true}"
|
||||
(click)="closeMenu()" class="platform-nav-btn platform-nav-btn-left">
|
||||
<a [routerLink]="'/' | langRoute" routerLinkActive="platform-active" [routerLinkActiveOptions]="{exact: true}"
|
||||
(click)="closeMenu()" class="platform-nav-btn">
|
||||
{{ 'header.home' | translate }}
|
||||
</a>
|
||||
@if (headerConfig().showCategories) {
|
||||
<button type="button" (click)="navigateToCatalog()" class="platform-nav-btn platform-nav-btn-left">
|
||||
<button type="button" (click)="navigateToCatalog()" class="platform-nav-btn">
|
||||
{{ 'header.catalog' | translate }}
|
||||
</button>
|
||||
}
|
||||
@for (page of headerPages(); track page.id) {
|
||||
<button type="button" (click)="navigateToStatic(page.route)" class="platform-nav-btn platform-nav-btn-left">
|
||||
<button type="button" (click)="navigateToStatic(page.route)" class="platform-nav-btn">
|
||||
{{ page.title }}
|
||||
</button>
|
||||
}
|
||||
|
||||
@@ -553,34 +553,30 @@
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease;
|
||||
white-space: nowrap;
|
||||
|
||||
|
||||
&:not(:first-child) {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-radius: 10px 0 0 10px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 10px 10px 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #a1b4b5;
|
||||
color: #1e3c38;
|
||||
}
|
||||
|
||||
|
||||
&.platform-active {
|
||||
background: #497671;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.platform-nav-btn-left {
|
||||
border-radius: 10px 0 0 10px;
|
||||
padding: 6px 32px;
|
||||
}
|
||||
|
||||
.platform-nav-btn-middle {
|
||||
padding: 6px 40px;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.platform-nav-btn-right {
|
||||
border-radius: 0 10px 10px 0;
|
||||
padding: 6px 28px;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
// Search Box
|
||||
.platform-search-wrapper {
|
||||
flex: 1;
|
||||
@@ -975,7 +971,7 @@
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
// Mobile Menu Backdrop — full-screen, blurred, blocks interaction
|
||||
// Mobile Menu Backdrop <EFBFBD> full-screen, blurred, blocks interaction
|
||||
.platform-menu-backdrop {
|
||||
display: block;
|
||||
position: fixed;
|
||||
|
||||
@@ -8,6 +8,30 @@
|
||||
background: var(--bg-primary, #fff);
|
||||
box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06));
|
||||
min-height: 108px;
|
||||
transition: box-shadow var(--transition-normal, 180ms ease), border-color var(--transition-normal, 180ms ease), transform var(--transition-normal, 180ms ease);
|
||||
animation: dashboard-card-in 320ms ease-out both;
|
||||
}
|
||||
|
||||
.dashboard-card:hover {
|
||||
border-color: var(--primary-color, #497671);
|
||||
box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1));
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
@keyframes dashboard-card-in {
|
||||
from { opacity: 0; transform: translateY(6px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.dashboard-card {
|
||||
animation: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.dashboard-card:hover {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-card--error {
|
||||
|
||||
@@ -25,13 +25,29 @@
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
|
||||
}
|
||||
|
||||
.dashboard-quick-actions__item:hover,
|
||||
.dashboard-quick-actions__item:focus-visible {
|
||||
border-color: var(--primary-color, #497671);
|
||||
box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.1));
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.dashboard-quick-actions__item:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.dashboard-quick-actions__item {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.dashboard-quick-actions__item:hover,
|
||||
.dashboard-quick-actions__item:focus-visible {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
|
||||
@@ -14,7 +14,35 @@ input[type='checkbox'] { width: auto; }
|
||||
.gallery-grid { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
|
||||
.gallery-item { position: relative; width: 64px; height: 64px; }
|
||||
.gallery-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-color, #d3dad9); }
|
||||
.gallery-item button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: none; background: #d9433c; color: #fff; cursor: pointer; }
|
||||
.gallery-item button {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -6px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: #d9433c;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
transition: transform var(--transition-fast, 120ms ease), background-color var(--transition-fast, 120ms ease);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -12px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #b8352f;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid #d9433c;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
|
||||
.price-preview { font-weight: 600; }
|
||||
.actions { display: flex; justify-content: flex-end; }
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
@if (draftRestored()) {
|
||||
<div class="project-editor-save-bar-notice">
|
||||
<span>{{ 'builder.draftRestored' | translate }}</span>
|
||||
<button type="button" (click)="dismissDraftRestoredNotice()">{{ 'builder.dismiss' | translate }}</button>
|
||||
<app-button variant="ghost" size="sm" (click)="dismissDraftRestoredNotice()">{{ 'builder.dismiss' | translate }}</app-button>
|
||||
</div>
|
||||
}
|
||||
<div class="project-editor-save-bar-status">
|
||||
@@ -21,8 +21,8 @@
|
||||
}
|
||||
</div>
|
||||
<div class="project-editor-save-bar-actions">
|
||||
<button type="button" class="project-editor-save-bar-reset" (click)="resetDraft()">{{ 'builder.resetDraft' | translate }}</button>
|
||||
<button type="button" (click)="save()">{{ 'builder.save' | translate }}</button>
|
||||
<button type="button" [disabled]="issues().length > 0" (click)="publish()">{{ 'builder.publish' | translate }}</button>
|
||||
<app-button variant="danger" size="sm" (click)="resetDraft()">{{ 'builder.resetDraft' | translate }}</app-button>
|
||||
<app-button variant="secondary" size="sm" (click)="save()">{{ 'builder.save' | translate }}</app-button>
|
||||
<app-button variant="primary" size="sm" [disabled]="issues().length > 0" (click)="publish()">{{ 'builder.publish' | translate }}</app-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -22,8 +22,10 @@
|
||||
color: var(--danger, #b91c1c);
|
||||
}
|
||||
|
||||
.project-editor-save-bar-actions button + button {
|
||||
margin-left: 0.5rem;
|
||||
.project-editor-save-bar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.project-editor-save-bar-saved-at {
|
||||
@@ -45,7 +47,3 @@
|
||||
color: var(--info, #1d4ed8);
|
||||
border-bottom: 1px solid var(--border, #ddd);
|
||||
}
|
||||
|
||||
.project-editor-save-bar-reset {
|
||||
color: var(--danger, #b91c1c);
|
||||
}
|
||||
|
||||
@@ -2,11 +2,12 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
|
||||
import { TranslatePipe } from '../../../../i18n/translate.pipe';
|
||||
import { TranslateService } from '../../../../i18n/translate.service';
|
||||
import { ProjectEditorFacade } from '../../facade/project-editor.facade';
|
||||
import { ButtonComponent } from '../../../../shared/ui/button/button.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-project-editor-save-bar',
|
||||
standalone: true,
|
||||
imports: [TranslatePipe],
|
||||
imports: [TranslatePipe, ButtonComponent],
|
||||
templateUrl: './project-editor-save-bar.component.html',
|
||||
styleUrls: ['./project-editor-save-bar.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
|
||||
@@ -23,6 +23,27 @@
|
||||
.project-editor-stack {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
|
||||
> * {
|
||||
animation: project-editor-section-in 220ms ease-out both;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes project-editor-section-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(6px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.project-editor-stack > * {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
.project-editor-section-actions {
|
||||
@@ -37,6 +58,23 @@
|
||||
border-radius: 8px;
|
||||
padding: 6px 12px;
|
||||
cursor: pointer;
|
||||
transition: background-color var(--transition-fast, 120ms ease), border-color var(--transition-fast, 120ms ease);
|
||||
|
||||
&:hover {
|
||||
background: rgba(185, 28, 28, 0.08);
|
||||
border-color: #b91c1c;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid #b91c1c;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.project-editor-section-actions button {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.project-editor-empty {
|
||||
|
||||
@@ -111,12 +111,58 @@ button {
|
||||
padding: 0 14px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: background-color var(--transition-fast, 120ms ease),
|
||||
border-color var(--transition-fast, 120ms ease),
|
||||
transform var(--transition-fast, 120ms ease),
|
||||
box-shadow var(--transition-fast, 120ms ease);
|
||||
|
||||
&:hover {
|
||||
background: var(--primary-hover, #3d635f);
|
||||
border-color: var(--primary-hover, #3d635f);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid #497671;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
button.secondary {
|
||||
background: #fff;
|
||||
color: #1e3c38;
|
||||
border-color: var(--border-color, #d3dad9);
|
||||
|
||||
&:hover {
|
||||
background: var(--bg-secondary, #f5f5f5);
|
||||
border-color: #497671;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline-color: #497671;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
button {
|
||||
transition: none;
|
||||
|
||||
&:hover {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.editor-error {
|
||||
|
||||
@@ -12,7 +12,7 @@ import { CategoriesWidgetData } from '../contracts/widget-data.contract';
|
||||
<section class="categories-widget">
|
||||
@if (data; as widgetData) {
|
||||
@if (widgetData.title) {
|
||||
<h2>{{ widgetData.title }}</h2>
|
||||
<h2 class="categories-widget__title">{{ widgetData.title }}</h2>
|
||||
}
|
||||
|
||||
@if (widgetData.categories.length) {
|
||||
@@ -28,7 +28,15 @@ import { CategoriesWidgetData } from '../contracts/widget-data.contract';
|
||||
`,
|
||||
styles: [
|
||||
`
|
||||
.categories-widget { display: grid; gap: 1rem; }
|
||||
.categories-widget { display: grid; gap: var(--space-lg, 24px); }
|
||||
|
||||
.categories-widget__title {
|
||||
margin: 0;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary, #1e3c38);
|
||||
}
|
||||
|
||||
.categories-widget__empty { margin: 0; color: var(--text-secondary, #667a77); }
|
||||
`
|
||||
],
|
||||
|
||||
@@ -28,9 +28,32 @@ export interface FooterNavigationLink {
|
||||
`,
|
||||
styles: [
|
||||
`
|
||||
.footer-nav-widget { padding: 1rem; border-top: 1px solid var(--border-color, #d3dad9); }
|
||||
ul { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
|
||||
button { background: transparent; border: none; color: var(--text-secondary, #667a77); cursor: pointer; }
|
||||
.footer-nav-widget { padding: 1rem 0; border-top: 1px solid var(--border-color, #d3dad9); }
|
||||
ul { display: flex; gap: var(--space-sm, 8px); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
|
||||
|
||||
button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: none;
|
||||
border-radius: var(--radius-md, 12px);
|
||||
background: transparent;
|
||||
color: var(--text-secondary, #667a77);
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
transition: background-color var(--transition-fast, 120ms ease), color var(--transition-fast, 120ms ease);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: var(--bg-secondary, #f5f5f5);
|
||||
color: var(--primary-color, #497671);
|
||||
}
|
||||
|
||||
button:focus-visible {
|
||||
outline: 2px solid var(--primary-color, #497671);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
`
|
||||
],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
|
||||
@@ -22,10 +22,72 @@ import { HeroWidgetData } from '../contracts/widget-data.contract';
|
||||
`,
|
||||
styles: [
|
||||
`
|
||||
.hero-widget { padding: 2rem; border-radius: var(--radius-lg, 16px); background: var(--bg-secondary, #f5f5f5); }
|
||||
.hero-widget__title { margin: 0 0 0.5rem; font-size: 2rem; color: var(--text-primary, #1e3c38); }
|
||||
.hero-widget__subtitle { margin: 0 0 1rem; color: var(--text-secondary, #667a77); }
|
||||
.hero-widget__cta { border: none; border-radius: var(--radius-md, 12px); padding: 0.75rem 1rem; cursor: pointer; background: var(--primary-color, #497671); color: #fff; }
|
||||
.hero-widget {
|
||||
padding: var(--space-xl, 32px);
|
||||
border-radius: var(--radius-lg, 16px);
|
||||
background: linear-gradient(135deg, var(--bg-secondary, #f5f5f5) 0%, var(--bg-tertiary, #eef1f0) 100%);
|
||||
animation: hero-widget-in 420ms ease-out both;
|
||||
}
|
||||
|
||||
.hero-widget__title {
|
||||
margin: 0 0 var(--space-sm, 8px);
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary, #1e3c38);
|
||||
animation: hero-widget-in 480ms ease-out 60ms both;
|
||||
}
|
||||
|
||||
.hero-widget__subtitle {
|
||||
margin: 0 0 var(--space-lg, 24px);
|
||||
color: var(--text-secondary, #667a77);
|
||||
font-size: 1.05rem;
|
||||
animation: hero-widget-in 480ms ease-out 120ms both;
|
||||
}
|
||||
|
||||
.hero-widget__cta {
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-md, 12px);
|
||||
padding: 0.75rem 1.5rem;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
background: var(--primary-color, #497671);
|
||||
color: #fff;
|
||||
transition: transform var(--transition-normal, 180ms ease), box-shadow var(--transition-normal, 180ms ease), background-color var(--transition-normal, 180ms ease);
|
||||
animation: hero-widget-in 480ms ease-out 180ms both;
|
||||
|
||||
&:hover {
|
||||
background: var(--primary-hover, #3d635f);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.15));
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--primary-color, #497671);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hero-widget-in {
|
||||
from { opacity: 0; transform: translateY(12px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.hero-widget,
|
||||
.hero-widget__title,
|
||||
.hero-widget__subtitle,
|
||||
.hero-widget__cta {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.hero-widget__cta {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
`
|
||||
],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
|
||||
@@ -11,7 +11,7 @@ import { ProductCollectionWidgetData } from '../contracts/widget-data.contract';
|
||||
template: `
|
||||
<section class="product-carousel-widget">
|
||||
@if (data?.title) {
|
||||
<h2>{{ data?.title }}</h2>
|
||||
<h2 class="product-carousel-widget__title">{{ data?.title }}</h2>
|
||||
}
|
||||
|
||||
@if (data?.products?.length) {
|
||||
@@ -23,7 +23,15 @@ import { ProductCollectionWidgetData } from '../contracts/widget-data.contract';
|
||||
`,
|
||||
styles: [
|
||||
`
|
||||
.product-carousel-widget { display: grid; gap: 1rem; }
|
||||
.product-carousel-widget { display: grid; gap: var(--space-lg, 24px); }
|
||||
|
||||
.product-carousel-widget__title {
|
||||
margin: 0;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary, #1e3c38);
|
||||
}
|
||||
|
||||
.product-carousel-widget__empty { margin: 0; color: var(--text-secondary, #667a77); }
|
||||
`
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user