feat(catalog): sprint 10.2 ux responsive empty-states polish
Some checks failed
Architecture Governance / architecture (push) Has been cancelled
Some checks failed
Architecture Governance / architecture (push) Has been cancelled
This commit is contained in:
@@ -146,3 +146,72 @@ npm run build
|
||||
## Stop Point
|
||||
|
||||
Catalog Module implementation is complete for Sprint 5. Stop here for approval before starting the next module or any Builder/Backoffice work.
|
||||
|
||||
## Sprint 10.2 Catalog UX Polish
|
||||
|
||||
Sprint 10.2 improves catalog UX and responsiveness without changing facades, business logic, bootstrap flow, runtime architecture, routing, authentication, or payment.
|
||||
|
||||
### Empty State Behavior
|
||||
|
||||
Two separate states are now rendered in the catalog container:
|
||||
|
||||
- Empty category state (`rawProducts.length === 0`):
|
||||
- hides filter/sort/layout/result controls
|
||||
- shows dedicated empty category component with icon, category context, friendly message, and "Browse Categories" action
|
||||
- Filtered empty state (`rawProducts.length > 0 && products.length === 0`):
|
||||
- shows "no filter match" message
|
||||
- provides "Clear Filters" action
|
||||
- keeps filter access available (sidebar on desktop, drawer trigger on tablet/mobile)
|
||||
|
||||
### Mobile Filter Drawer
|
||||
|
||||
- Desktop keeps visible sticky sidebar filters.
|
||||
- Tablet and mobile switch to a drawer-based filter UI.
|
||||
- Drawer includes filter groups, Reset, and Apply actions.
|
||||
- Apply closes the drawer.
|
||||
- Accessibility:
|
||||
- drawer uses dialog semantics (`role="dialog"`, `aria-modal="true"`)
|
||||
- focus trap is enabled while drawer is open
|
||||
- `Esc` closes the drawer
|
||||
|
||||
### Mobile Sort
|
||||
|
||||
- Desktop keeps dropdown sort control.
|
||||
- Tablet keeps compact dropdown with drawer-based filters.
|
||||
- Mobile opens a bottom-sheet sort modal.
|
||||
- Supported mobile sort options:
|
||||
- Recommended
|
||||
- Newest
|
||||
- Price Low -> High
|
||||
- Price High -> Low
|
||||
- Rating
|
||||
- Popularity
|
||||
|
||||
### Responsive Grid Modes and Toolbar
|
||||
|
||||
- Grid selector uses icon buttons and keeps active-state highlighting.
|
||||
- Mobile sticky toolbar added with quick actions:
|
||||
- Filters
|
||||
- Sort
|
||||
- Grid cycle
|
||||
- Grid cycle rotates through supported layouts while preserving existing layout architecture.
|
||||
|
||||
### Responsive Spacing and Overflow
|
||||
|
||||
Catalog spacing and controls were polished for desktop/tablet/mobile:
|
||||
|
||||
- filter/input/button spacing
|
||||
- sort/reset row behavior (single row on desktop, stacked naturally on mobile)
|
||||
- card and grid spacing
|
||||
- search block spacing
|
||||
- drawer/sheet interaction surfaces
|
||||
- horizontal overflow prevention
|
||||
|
||||
### Localization and Accessibility
|
||||
|
||||
- New strings for empty states, drawer/sheet UI, and toolbar were added to all languages:
|
||||
- `src/app/i18n/en.ts`
|
||||
- `src/app/i18n/ru.ts`
|
||||
- `src/app/i18n/hy.ts`
|
||||
- `src/app/i18n/translations.ts`
|
||||
- No hardcoded catalog UX strings were introduced for Sprint 10.2 additions.
|
||||
|
||||
Reference in New Issue
Block a user