4086f413c1
- Fix: resolve search dropdown clickability by increasing z-index. The DocSearch button and dropdown were not clickable due to z-index conflict with sticky sidebar elements. Added position: relative and z-index: 501 to .docsearch .DocSearch-Button, and z-index: 500 to .docsearch wrapper to ensure proper stacking context. - Docs: add UI Standards documentation for developer guidelines - Docs: add Routing documentation for developer reference - Docs: add Affiliates documentation for marketing section
59 lines
2.7 KiB
Plaintext
59 lines
2.7 KiB
Plaintext
---
|
|
title: Admin SPA UI & CRUD Standards
|
|
description: Design principles, layout structure, and behavioral patterns for the WooNooW Admin interface.
|
|
---
|
|
|
|
WooNooW enforces a strict UI pattern for the Admin SPA to ensure predictable UX, maintainability, and responsiveness. When building custom modules or addons, adhere to these standards.
|
|
|
|
## Template Pattern
|
|
|
|
The WooNooW Admin SPA follows a consistent layout structure:
|
|
|
|
* **App Bar**: Persistent across all routes. Contains global controls like fullscreen toggle, server connectivity, and the user menu.
|
|
* **Menu Bar**: Primary navigation (Dashboard, Orders, Products). Sticky with overflow-x scroll. In Fullscreen mode, it becomes a collapsible sidebar.
|
|
* **Submenu Bar**: Context-sensitive secondary tabs under the main menu.
|
|
* **Page Tool Bar**: Functional filters and actions relevant to the current page.
|
|
* **Page Content**: Hosts data tables, analytics, and CRUD forms.
|
|
|
|
## CRUD Module Pattern
|
|
|
|
All entity management modules (Orders, Products, Customers) use a consistent **Submenu Tabs Pattern**:
|
|
|
|
`[All {Entity}] [New] [Categories] [Tags]`
|
|
|
|
### Implementation Rules
|
|
* **Use Submenu Tabs**: The primary action (e.g., "New") is a tab, NOT a toolbar button.
|
|
* **Toolbar for Actions & Filters**: Use the toolbar for bulk actions (Delete, Export), filter dropdowns, and search inputs. **Do not** put primary CRUD buttons here.
|
|
* **No Mixing**: Keep filters in the toolbar and navigation in the submenu.
|
|
|
|
## Toolbar Button Standards
|
|
|
|
* **Delete**: Always use a red background (`bg-red-600`), and only show when items are selected.
|
|
* **Refresh**: Mandatory on all CRUD list pages (`hover:bg-accent`).
|
|
* **Reset Filters**: Use a text link style with underline (`hover:text-foreground underline`), not a button block.
|
|
* **Icons**: Use `inline-flex items-center gap-2`.
|
|
|
|
## Table and List UI Standards
|
|
|
|
Tables must gracefully degrade to tappable cards on mobile devices.
|
|
|
|
### Desktop Tables
|
|
* Use `bg-muted/50` for table headers and `font-medium`.
|
|
* Body rows should have `hover:bg-muted/30`.
|
|
* Table cells use consistent padding (`p-3`).
|
|
|
|
### Mobile Cards
|
|
Mobile cards are fully tappable links wrapping the entire card body.
|
|
* Hide on desktop (`md:hidden`) and show on mobile.
|
|
* Add a visual indicator like a chevron to indicate tappability.
|
|
* Include active scale animation (`active:scale-[0.98]`) for tap feedback.
|
|
|
|
## Dialog Behavior Pattern
|
|
|
|
WooNooW prevents accidental dismissal of heavy forms and complex edits using Radix UI Dialog patterns.
|
|
|
|
* **Prevent outside click & escape key** for heavy edits (Email builder, multi-field forms, destructive actions).
|
|
* **Allow dismissal** for simple info dialogs or quick single-field edits.
|
|
|
|
Always provide explicit 'Cancel' and 'Save' buttons.
|