romfast/roa2web-service-auto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(unified-mobile-material-design): Complete US-115 - Actualizare CSS_PATTERNS.md cu Mobile Material Design

Browse Source 
Implemented by Ralph autonomous loop.
Iteration: 4

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude Agent
2026-01-12 11:17:28 +00:00
parent 8d1d1d643d
commit fdec2ae81d
3 changed files with 82 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
docs/CSS_PATTERNS.md
View File

@@ -16,7 +16,8 @@
6. [Interactive Patterns](#interactive-patterns)
7. [Layout Patterns](#layout-patterns)
8. [Utility Classes](#utility-classes)
9. [Quick Reference](#quick-reference)
9. [Mobile Material Design](#mobile-material-design)
10. [Quick Reference](#quick-reference)
---
@@ -956,6 +957,76 @@ Responsive column layout.
---
## Mobile Material Design
> **Full Documentation:** [docs/MOBILE_PATTERNS.md](./MOBILE_PATTERNS.md)
ROA2WEB includes a complete mobile component library following Material Design 3 principles. All mobile components are designed for touch interactions and support both light and dark themes.
### Available Components
| Component | Location | Description |
|-----------|----------|-------------|
| `MobileTopBar` | `@shared/components/mobile/` | Fixed top bar with title, back/menu buttons, and actions |
| `MobileBottomNav` | `@shared/components/mobile/` | Fixed bottom navigation with router integration |
| `MobileSelectionFooter` | `@shared/components/mobile/` | Slide-up action bar for batch operations |
| `BottomSheet` | `@shared/components/mobile/` | Modal sheet for filters and forms |
| `SwipeableCards` | `@shared/components/mobile/` | Touch carousel for KPI cards |
### Mobile Breakpoints
```css
/* Mobile-first breakpoints */
@media (max-width: 768px) {
/* Mobile styles - this is where mobile components activate */
}
@media (min-width: 769px) {
/* Tablet and desktop styles */
}
@media (min-width: 1024px) {
/* Desktop-only styles */
}
```
### Key Mobile Layout Tokens
| Token | Value | Use |
|-------|-------|-----|
| `--header-height` | 56px | TopBar and BottomNav height |
| Touch target | 48×48px | Minimum button/tap area |
| `--z-fixed` | 1030 | Fixed navigation elements |
| `--z-modal` | 1050 | BottomSheet and overlays |
### Quick Example
```vue
<template>
<div class="mobile-view">
<MobileTopBar title="My View" :showMenu="true" />
<main class="mobile-content">
<!-- Content with padding for fixed bars -->
</main>
<MobileBottomNav />
</div>
</template>
<style scoped>
.mobile-content {
padding-top: 56px; /* MobileTopBar */
padding-bottom: 56px; /* MobileBottomNav */
min-height: 100vh;
}
</style>
```
**For complete documentation including all props, events, and usage patterns, see [MOBILE_PATTERNS.md](./MOBILE_PATTERNS.md).**
---
## Quick Reference
### Most Common Patterns
@@ -1059,6 +1130,6 @@ All patterns support:
---
**Last Updated:** 2025-11-19
**Version:** 2.0.0 (Post CSS Refactoring Phase 6)
**Last Updated:** 2026-01-12
**Version:** 2.1.0 (Added Mobile Material Design section)
**Maintained By:** Frontend Team