From ac2966c629f48db21ca2d997593f2ff1f3deb415 Mon Sep 17 00:00:00 2001 From: Claude Agent Date: Mon, 12 Jan 2026 16:59:01 +0000 Subject: [PATCH] =?UTF-8?q?feat(mobile-fixes-phase3):=20Complete=20US-311?= =?UTF-8?q?=20-=20Actualizare=20Documenta=C8=9Bie=20MOBILE=5FPATTERNS.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Implemented by Ralph autonomous loop. Iteration: 9 Co-Authored-By: Claude --- docs/MOBILE_PATTERNS.md | 669 +++++++++++++++++++++++++++++++++---- scripts/ralph/prd.json | 4 +- scripts/ralph/progress.txt | 6 + 3 files changed, 609 insertions(+), 70 deletions(-) diff --git a/docs/MOBILE_PATTERNS.md b/docs/MOBILE_PATTERNS.md index 76645be..13ff3c7 100644 --- a/docs/MOBILE_PATTERNS.md +++ b/docs/MOBILE_PATTERNS.md @@ -1,8 +1,8 @@ # ROA2WEB Mobile Patterns Library -**Version:** 2.0.0 +**Version:** 3.0.0 **Last Updated:** 2026-01-12 -**Status:** ✅ Complete +**Status:** ✅ Complete (Phase 3 - Mobile Navigation Overhaul) --- @@ -12,15 +12,17 @@ 2. [Mobile Layout Overview](#mobile-layout-overview) 3. [Navigation Architecture](#navigation-architecture) 4. [MobileTopBar](#mobiletopbar) -5. [MobileBottomNav](#mobilebottomnav) -6. [MobileDrawerMenu](#mobiledrawermenu) *(NEW)* -7. [MobileActionBar](#mobileactionbar) *(NEW)* -8. [MobileSelectionFooter](#mobileselectionfooter) -9. [BottomSheet](#bottomsheet) -10. [SwipeableCards](#swipeablecards) -11. [Design Tokens for Mobile](#design-tokens-for-mobile) -12. [Best Practices](#best-practices) -13. [Troubleshooting](#troubleshooting) +5. [MobileBottomNav](#mobilebottomnav) *(UPDATED - Phase 3)* +6. [MobileDrawerMenu](#mobiledrawermenu) *(UPDATED - Phase 3)* +7. [Mobile Tab Pattern](#mobile-tab-pattern) *(NEW - Phase 3)* +8. [FAB Pattern](#fab-pattern) *(NEW - Phase 3)* +9. [MobileActionBar](#mobileactionbar) +10. [MobileSelectionFooter](#mobileselectionfooter) +11. [BottomSheet](#bottomsheet) +12. [SwipeableCards](#swipeablecards) +13. [Design Tokens for Mobile](#design-tokens-for-mobile) +14. [Best Practices](#best-practices) +15. [Troubleshooting](#troubleshooting) --- @@ -104,12 +106,12 @@ import SwipeableCards from '@shared/components/mobile/SwipeableCards.vue' ## Mobile Layout Overview -### ASCII Diagram: Standard Mobile Layout +### ASCII Diagram: Standard Mobile Layout (Phase 3) ``` ┌─────────────────────────────────────────┐ │ MobileTopBar (56px) │ -│ [≡] Page Title [🔍] [⋮] │ +│ [≡] Page Title [📥] [🔍] │ ├─────────────────────────────────────────┤ │ │ │ │ @@ -119,16 +121,21 @@ import SwipeableCards from '@shared/components/mobile/SwipeableCards.vue' │ │ │ padding-top: 56px │ │ padding-bottom: 56px │ -│ │ +│ [+] │ ← FAB (contextual) │ │ ├─────────────────────────────────────────┤ │ MobileBottomNav (56px) │ -│ 📋 ☁️ 📊 ⚙️ │ -│ Bonuri Upload Rapoarte Setări │ +│ 🏠 📋 📄 ⚙️ │ +│ Dashboard Bonuri Facturi Setări │ └─────────────────────────────────────────┘ ``` -### ASCII Diagram: Drawer Menu Open +> **Phase 3 Changes:** +> - Footer Nav: 4 direct links (Dashboard, Bonuri, Facturi, Setări) +> - Upload moved to FAB on Bonuri page +> - Rapoarte removed from footer (accessible via Hamburger Menu) + +### ASCII Diagram: Drawer Menu Open (Phase 3 - Grouped Categories) ``` ┌──────────────────┬──────────────────────┐ @@ -137,11 +144,20 @@ import SwipeableCards from '@shared/components/mobile/SwipeableCards.vue' ├──────────────────┤ ░░░ OVERLAY ░░░░░░░░ │ │ 🏢 ROA2WEB │ ░░ (tap to close) ░░ │ ├──────────────────┤ ░░░░░░░░░░░░░░░░░░░░ │ +│ PRINCIPALE │ ░░░░░░░░░░░░░░░░░░░░ │ │ 🏠 Dashboard │ ░░░░░░░░░░░░░░░░░░░░ │ │ 📋 Bonuri │ ░░░░░░░░░░░░░░░░░░░░ │ +│ ────────────── │ ░░░░░░░░░░░░░░░░░░░░ │ +│ RAPOARTE │ ░░░░░░░░░░░░░░░░░░░░ │ │ 📄 Facturi │ ░░░░░░░░░░░░░░░░░░░░ │ │ 🔢 Balanță │ ░░░░░░░░░░░░░░░░░░░░ │ -│ 💰 Trezorerie │ ░░░░░░░░░░░░░░░░░░░░ │ +│ 💰 Casa și Banca│ ░░░░░░░░░░░░░░░░░░░░ │ +│ ────────────── │ ░░░░░░░░░░░░░░░░░░░░ │ +│ ANALIZE │ ░░░░░░░░░░░░░░░░░░░░ │ +│ ⏰ Scadențe │ ░░░░░░░░░░░░░░░░░░░░ │ +│ 📋 Facturi Det. │ ░░░░░░░░░░░░░░░░░░░░ │ +│ ────────────── │ ░░░░░░░░░░░░░░░░░░░░ │ +│ ADMINISTRARE │ ░░░░░░░░░░░░░░░░░░░░ │ │ ⚙️ Setări │ ░░░░░░░░░░░░░░░░░░░░ │ ├──────────────────┤ ░░░░░░░░░░░░░░░░░░░░ │ │ 👤 Username │ ░░░░░░░░░░░░░░░░░░░░ │ @@ -149,6 +165,13 @@ import SwipeableCards from '@shared/components/mobile/SwipeableCards.vue' └──────────────────┴──────────────────────┘ ``` +> **Phase 3 Changes:** +> - Navigation organized into 4 category sections with visual separators +> - PRINCIPALE: Dashboard, Bonuri +> - RAPOARTE: Facturi, Balanță, Casa și Banca +> - ANALIZE: Scadențe, Facturi Detaliate +> - ADMINISTRARE: Setări + ### ASCII Diagram: Selection Mode Layout ``` @@ -241,16 +264,70 @@ import SwipeableCards from '@shared/components/mobile/SwipeableCards.vue' └─────────────────────────────────────────┘ ``` +### ASCII Diagram: Mobile Tab Pattern (Phase 3) + +``` +┌─────────────────────────────────────────┐ +│ MobileTopBar (56px) │ +│ [≡] Facturi [📥] [🔍] │ +├─────────────────────────────────────────┤ +│┌──────────────────┬────────────────────┐│ +││ Clienți │ Furnizori ││ ← Full-width tabs +││ ═══════════ │ ││ (Material Design 3) +│└──────────────────┴────────────────────┘│ +├─────────────────────────────────────────┤ +│ │ +│ TAB CONTENT │ +│ (changes based on tab) │ +│ │ +│ padding-top: 104px (56+48) │ +│ │ +├─────────────────────────────────────────┤ +│ MobileBottomNav (56px) │ +│ 🏠 📋 📄 ⚙️ │ +│ Dashboard Bonuri Facturi Setări │ +└─────────────────────────────────────────┘ +``` + +> **Used in:** Facturi (`/reports/invoices`), Scadențe (`/reports/maturity-analysis`) + +### ASCII Diagram: FAB Pattern (Phase 3) + +``` +┌─────────────────────────────────────────┐ +│ MobileTopBar (56px) │ +│ [≡] Bonuri [📥] [🔍] │ +├─────────────────────────────────────────┤ +│ │ +│ MAIN CONTENT │ +│ │ +│ ┌─────────────┐ │ +│ │ Upload │ │ ← FAB Popup Menu +│ │ Bulk │ │ (appears on tap) +│ ├─────────────┤ │ +│ │ Bon Nou │ │ +│ └─────────────┘ │ +│ [+] │ ← FAB (56x56px) +│ │ bottom: 72px +├─────────────────────────────────────────┤ +│ MobileBottomNav (56px) │ +│ 🏠 📋 📄 ⚙️ │ +│ Dashboard Bonuri Facturi Setări │ +└─────────────────────────────────────────┘ +``` + +> **Used in:** Bonuri page (`/data-entry`) - Upload moved from footer to FAB + --- ## Navigation Architecture -### Route Map +### Route Map (Phase 3 - Updated) ``` ┌─────────────────────────────────────┐ │ / (root) │ - │ Redirects to /reports/dashboard │ + │ Redirects to /dashboard │ └───────────────┬─────────────────────┘ │ ┌───────────────────────────┼───────────────────────────┐ @@ -259,18 +336,33 @@ import SwipeableCards from '@shared/components/mobile/SwipeableCards.vue' ┌───────────────────┐ ┌───────────────────────┐ ┌─────────────────┐ │ /data-entry │ │ /reports │ │ /settings │ │ │ │ │ │ │ -│ 📋 Bonuri List │ │ 📊 dashboard │ │ ⚙️ Settings Hub │ -│ 📝 Bon Create │ │ 📄 invoices │ │ (centralized │ -│ ✏️ Bon Edit │ │ 💰 bank-cash │ │ settings) │ -│ 📊 OCR Metrics │ │ 🔢 trial-balance │ │ │ -│ │ │ 📉 maturity-analysis │ │ Links to: │ -│ │ │ 📋 detailed-invoices │ │ - OCR Settings │ -│ │ │ 📈 cache-stats │ │ - Cache Stats │ -│ │ │ 📝 server-logs │ │ - Server Logs │ -│ │ │ 📱 telegram │ │ - Telegram │ +│ 📋 Bonuri List │ │ 📄 invoices [TABS] │ │ ⚙️ Settings Hub │ +│ 📝 Bon Create │ │ 💰 bank-cash │ │ (centralized │ +│ ✏️ Bon Edit │ │ 🔢 trial-balance │ │ settings) │ +│ 📊 OCR Metrics │ │ 📉 maturity [TABS] │ │ │ +│ ☁️ Bulk Upload │ │ 📋 detailed-invoices │ │ Links to: │ +│ │ │ 📈 cache-stats │ │ - OCR Settings │ +│ [FAB: +] │ │ 📝 server-logs │ │ - Cache Stats │ +│ - Bon Nou │ │ 📱 telegram │ │ - Server Logs │ +│ - Upload Bulk │ │ │ │ - Telegram │ └───────────────────┘ └───────────────────────┘ └─────────────────┘ + + /dashboard + │ + ▼ +┌─────────────────────┐ +│ 🏠 Dashboard │ ← Primary entry point (Footer Nav) +│ SwipeableCards KPIs│ +│ (No quick-links │ +│ on mobile) │ +└─────────────────────┘ ``` +> **Phase 3 Navigation Changes:** +> - `/dashboard` is now a direct route in Footer Nav (not under `/reports`) +> - Invoices and Maturity Analysis have Clienți/Furnizori tabs +> - FAB on Bonuri page provides Bon Nou + Upload Bulk actions + ### Navigation Flow: Settings Hub Pattern The Settings Hub (`/settings`) is the centralized entry point for all administrative pages: @@ -303,58 +395,95 @@ MobileBottomNav "Setări" button └───────────────────────────────────┘ ``` -### MobileBottomNav Default Items (Updated) +### MobileBottomNav Default Items (Phase 3 - 4 Direct Links) ```javascript -// Default navigation items +// Default navigation items - Phase 3 (4 links, no action button) [ + { to: '/dashboard', icon: 'pi pi-home', label: 'Dashboard' }, { to: '/data-entry', icon: 'pi pi-receipt', label: 'Bonuri' }, - { icon: 'pi pi-cloud-upload', label: 'Upload' }, // Action button - { to: '/reports/dashboard', icon: 'pi pi-chart-bar', label: 'Rapoarte' }, - { to: '/settings', icon: 'pi pi-cog', label: 'Setări' } // → Settings Hub -] -``` - -### MobileDrawerMenu Navigation Links - -```javascript -// Drawer menu navigation items -[ - { to: '/reports/dashboard', icon: 'pi pi-home', label: 'Dashboard' }, - { to: '/data-entry', icon: 'pi pi-receipt', label: 'Bonuri' }, - { to: '/reports/invoices', icon: 'pi pi-file', label: 'Facturi' }, - { to: '/reports/trial-balance', icon: 'pi pi-calculator', label: 'Balanță' }, - { to: '/reports/bank-cash', icon: 'pi pi-money-bill', label: 'Trezorerie' }, + { to: '/reports/invoices', icon: 'pi pi-file-edit', label: 'Facturi' }, { to: '/settings', icon: 'pi pi-cog', label: 'Setări' } ] ``` -### Dashboard Mobile Quick Links +> **Phase 3 Changes:** +> - Upload button removed from footer (moved to FAB on Bonuri page) +> - Dashboard added as direct link +> - Facturi added as direct link (with Clienți/Furnizori tabs) +> - All 4 items are now router links (no action buttons) -On mobile, Dashboard shows KPI cards plus quick-link cards: +### MobileDrawerMenu Navigation Links (Phase 3 - Grouped Categories) + +```javascript +// PRINCIPALE: Primary navigation +const principaleItems = [ + { to: '/dashboard', icon: 'pi pi-home', label: 'Dashboard', exactMatch: true }, + { to: '/data-entry', icon: 'pi pi-receipt', label: 'Bonuri', exactMatch: false } +] + +// RAPOARTE: Reports section +const rapoarteItems = [ + { to: '/reports/invoices', icon: 'pi pi-file', label: 'Facturi', exactMatch: true }, + { to: '/reports/trial-balance', icon: 'pi pi-calculator', label: 'Balanță', exactMatch: true }, + { to: '/reports/bank-cash', icon: 'pi pi-money-bill', label: 'Casa și Banca', exactMatch: true } +] + +// ANALIZE: Analysis section +const analizeItems = [ + { to: '/reports/maturity-analysis', icon: 'pi pi-clock', label: 'Scadențe', exactMatch: true }, + { to: '/reports/detailed-invoices', icon: 'pi pi-list', label: 'Facturi Detaliate', exactMatch: true } +] + +// ADMINISTRARE: Admin section +const administrareItems = [ + { to: '/settings', icon: 'pi pi-cog', label: 'Setări', exactMatch: false } +] +``` + +> **Phase 3 Changes:** +> - Navigation items organized into 4 visual sections with headers +> - Visual dividers between sections (`.drawer-divider`) +> - Section headers styled as uppercase labels (PRINCIPALE, RAPOARTE, ANALIZE, ADMINISTRARE) +> - `exactMatch` flag for precise active state highlighting + +### Dashboard Mobile Layout (Phase 3 - KPIs Only) + +On mobile, Dashboard shows ONLY KPI cards (quick-links removed in Phase 3): ``` ┌─────────────────────────────────────────┐ │ MobileTopBar: Dashboard │ +│ [≡] Dashboard [📥] [🔍] │ ├─────────────────────────────────────────┤ │ │ │ ┌─────────────────────────────────┐ │ │ │ SwipeableCards (KPIs) │ │ │ │ ← Swipe → │ │ +│ │ │ │ +│ │ Total Facturi: 125,430 RON │ │ +│ │ Scadențe: 5 restante │ │ +│ │ ... │ │ +│ │ │ │ │ └─────────────────────────────────┘ │ │ │ -│ ┌─────────────┐ ┌─────────────┐ │ -│ │ 📉 Analiză │ │ 📋 Facturi │ │ -│ │ Scadențe → │ │ Detaliate → │ │ -│ └─────────────┘ └─────────────┘ │ +│ ●━━━━●───● │ │ │ -│ (Quick links to dedicated pages) │ +│ (No quick-links on mobile - use │ +│ Footer Nav or Hamburger Menu) │ │ │ ├─────────────────────────────────────────┤ -│ MobileBottomNav │ +│ MobileBottomNav (56px) │ +│ 🏠 📋 📄 ⚙️ │ +│ Dashboard Bonuri Facturi Setări │ └─────────────────────────────────────────┘ ``` +> **Phase 3 Changes:** +> - Quick-link cards removed from mobile Dashboard +> - Desktop Dashboard keeps quick-links (unchanged) +> - Navigation to other pages via Footer Nav or Hamburger Menu + --- ## MobileTopBar @@ -538,7 +667,9 @@ const handleNavClick = (item) => { ## MobileDrawerMenu -Material Design 3 inspired navigation drawer that slides in from the left. Replaces the desktop sidebar on mobile devices. +*(UPDATED - Phase 3)* + +Material Design 3 inspired navigation drawer that slides in from the left. Replaces the desktop sidebar on mobile devices. **Phase 3** reorganized navigation into grouped categories with visual separators. ### Props @@ -555,19 +686,61 @@ Material Design 3 inspired navigation drawer that slides in from the left. Repla | `update:modelValue` | `boolean` | v-model update when visibility changes | | `logout` | - | Emitted when logout is clicked (if no `onLogout` prop) | -### Navigation Items (Built-in) +### Navigation Items (Phase 3 - Grouped Categories) -The drawer contains the following navigation links: +The drawer navigation is organized into 4 sections with visual separators: ```javascript -[ - { to: '/reports/dashboard', icon: 'pi pi-home', label: 'Dashboard' }, - { to: '/data-entry', icon: 'pi pi-receipt', label: 'Bonuri' }, - { to: '/reports/invoices', icon: 'pi pi-file', label: 'Facturi' }, - { to: '/reports/trial-balance', icon: 'pi pi-calculator', label: 'Balanță' }, - { to: '/reports/bank-cash', icon: 'pi pi-money-bill', label: 'Trezorerie' }, - { to: '/settings', icon: 'pi pi-cog', label: 'Setări' } +// PRINCIPALE Section +const principaleItems = [ + { to: '/dashboard', icon: 'pi pi-home', label: 'Dashboard', exactMatch: true }, + { to: '/data-entry', icon: 'pi pi-receipt', label: 'Bonuri', exactMatch: false } ] + +// RAPOARTE Section +const rapoarteItems = [ + { to: '/reports/invoices', icon: 'pi pi-file', label: 'Facturi', exactMatch: true }, + { to: '/reports/trial-balance', icon: 'pi pi-calculator', label: 'Balanță', exactMatch: true }, + { to: '/reports/bank-cash', icon: 'pi pi-money-bill', label: 'Casa și Banca', exactMatch: true } +] + +// ANALIZE Section +const analizeItems = [ + { to: '/reports/maturity-analysis', icon: 'pi pi-clock', label: 'Scadențe', exactMatch: true }, + { to: '/reports/detailed-invoices', icon: 'pi pi-list', label: 'Facturi Detaliate', exactMatch: true } +] + +// ADMINISTRARE Section +const administrareItems = [ + { to: '/settings', icon: 'pi pi-cog', label: 'Setări', exactMatch: false } +] +``` + +### Section Structure + +``` +┌──────────────────┐ +│ 🏢 ROA2WEB │ ← Header with logo +├──────────────────┤ +│ PRINCIPALE │ ← Section header (uppercase) +│ 🏠 Dashboard │ +│ 📋 Bonuri │ +│ ────────────── │ ← Divider +│ RAPOARTE │ +│ 📄 Facturi │ +│ 🔢 Balanță │ +│ 💰 Casa și Banca│ +│ ────────────── │ +│ ANALIZE │ +│ ⏰ Scadențe │ +│ 📋 Facturi Det. │ +│ ────────────── │ +│ ADMINISTRARE │ +│ ⚙️ Setări │ +├──────────────────┤ +│ 👤 Username │ ← Profile section (footer) +│ 🚪 Deconectare │ +└──────────────────┘ ``` ### Basic Usage @@ -631,15 +804,40 @@ const handleLogout = async () => { | Class | Description | |-------|-------------| -| `.drawer-overlay` | Full-screen backdrop (50% black) | +| `.drawer-overlay` | Full-screen backdrop (50% black, 70% in dark mode) | | `.drawer-menu` | Main drawer container (280px, max 85vw) | | `.drawer-header` | Header with logo | -| `.drawer-section` | Navigation links container | +| `.drawer-sections` | Scrollable container for all navigation sections | +| `.drawer-section` | Individual section container | +| `.section-header` | Section header label (PRINCIPALE, RAPOARTE, etc.) - uppercase, small text | +| `.drawer-nav` | List container for navigation links | | `.drawer-link` | Individual navigation link (48px min-height) | | `.drawer-link.active` | Active route styling (blue background) | +| `.drawer-divider` | Visual separator between sections | | `.drawer-profile` | Profile section at bottom | +| `.profile-header` | User avatar and name row | +| `.profile-avatar` | Circular avatar with user icon | | `.logout-link` | Red logout button styling | +### Section Header Styling + +```css +.section-header { + padding: var(--space-sm) var(--space-lg); + font-size: var(--text-xs); + font-weight: var(--font-semibold); + color: var(--text-color-secondary); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.drawer-divider { + height: 1px; + background: var(--surface-border); + margin: var(--space-xs) var(--space-md); +} +``` + ### Animation Uses Vue ``: @@ -649,6 +847,330 @@ Uses Vue ``: --- +## Mobile Tab Pattern + +*(NEW - Phase 3)* + +Material Design 3 inspired full-width tabs for switching between Clienți and Furnizori views. Used in pages that display partner-related data. + +### When to Use + +Use the Mobile Tab Pattern when: +- A page shows data that can be filtered by partner type (Clienți/Furnizori) +- The tab switch should be persistent via URL query parameter +- Both tabs share the same filters (except type) + +### Implementation + +```vue + + + +``` + +### CSS Classes + +```css +/* Tab container - positioned below MobileTopBar */ +.mobile-tabs-container { + position: fixed; + top: 56px; /* Below MobileTopBar */ + left: 0; + right: 0; + z-index: 999; + background: var(--surface-card); + border-bottom: 1px solid var(--surface-border); +} + +.mobile-tabs { + display: flex; + width: 100%; +} + +.mobile-tab { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + padding: var(--space-md) var(--space-sm); + background: transparent; + border: none; + border-bottom: 2px solid transparent; + cursor: pointer; + transition: all var(--transition-fast); + color: var(--text-color-secondary); + min-height: 48px; + font-size: var(--text-base); + font-weight: var(--font-medium); +} + +.mobile-tab:active { + background: var(--surface-hover); +} + +.mobile-tab.active { + color: var(--color-primary); + border-bottom-color: var(--color-primary); + font-weight: var(--font-semibold); +} +``` + +### Content Padding + +When using tabs, increase top padding to account for both bars: + +```css +.mobile-content-with-tabs { + padding-top: 104px; /* 56px (TopBar) + 48px (Tabs) */ + padding-bottom: 56px; /* BottomNav */ +} +``` + +### Used In + +| Page | Route | Description | +|------|-------|-------------| +| **Facturi** | `/reports/invoices` | Switch between client/supplier invoices | +| **Scadențe** | `/reports/maturity-analysis` | Switch between client/supplier maturity | + +--- + +## FAB Pattern + +*(NEW - Phase 3)* + +Material Design 3 inspired Floating Action Button (FAB) for contextual actions. Positioned above MobileBottomNav with popup menu support. + +### When to Use + +Use the FAB Pattern when: +- A page has primary actions that benefit from prominent placement +- Multiple related actions can be grouped (popup menu) +- Actions were previously in footer/header but need better mobile UX + +### Design Tokens + +```javascript +// From PRD cssRules.mobileLayoutTokens +{ + fabSize: '56px', // FAB diameter + fabBottomOffset: '72px', // 56px (nav) + 16px spacing + touchTargetMin: '48px' // Minimum touch target +} +``` + +### Implementation + +```vue + + + +``` + +### CSS Classes + +```css +/* FAB Button */ +.mobile-fab { + position: fixed; + bottom: 72px; /* 56px nav + 16px spacing */ + right: var(--space-md); + width: 56px; + height: 56px; + border-radius: var(--radius-full); + background: var(--color-primary); + color: white; + border: none; + display: flex; + align-items: center; + justify-content: center; + box-shadow: var(--shadow-lg); + cursor: pointer; + z-index: 999; + transition: all var(--transition-fast); +} + +.mobile-fab:active { + transform: scale(0.95); + box-shadow: var(--shadow-md); +} + +.mobile-fab i { + font-size: var(--text-2xl); + transition: transform var(--transition-fast); +} + +/* FAB active state when menu open */ +.mobile-fab.fab-active { + background: var(--color-primary-dark); +} + +.mobile-fab .fab-icon-rotate { + transform: rotate(45deg); +} + +/* FAB Popup Menu positioning */ +.fab-popup-menu { + position: fixed !important; + bottom: 140px !important; /* 72px + 56px + 12px */ + right: var(--space-md) !important; + left: auto !important; + top: auto !important; + min-width: 180px; + z-index: 1000 !important; +} + +/* FAB slide animation */ +.fab-slide-enter-active, +.fab-slide-leave-active { + transition: transform var(--transition-normal), opacity var(--transition-normal); +} + +.fab-slide-enter-from, +.fab-slide-leave-to { + transform: translateY(100px); + opacity: 0; +} +``` + +### Behavior + +| Interaction | Result | +|-------------|--------| +| **Tap FAB** | Opens popup menu with actions | +| **Tap menu item** | Executes action, closes menu | +| **Tap outside** | Closes menu | +| **Scroll down** | FAB hides (slide down) | +| **Scroll up** | FAB shows (slide up) | +| **Scroll stops** | FAB reappears after 300ms | +| **Selection mode** | FAB hidden (replaced by selection footer) | + +### Used In + +| Page | Route | Actions | +|------|-------|---------| +| **Bonuri** | `/data-entry` | Bon Nou, Upload Bulk | + +> **Phase 3 Note:** Upload was moved from Footer Nav to FAB to reduce footer clutter and provide better contextual placement. + +--- + ## MobileActionBar Context-aware bottom action bar for forms and edit views. Positions above MobileBottomNav and displays action buttons based on current state. @@ -1355,6 +1877,17 @@ Check that `data-theme` attribute is set correctly. ## Changelog +### Version 3.0.0 (2026-01-12) - Phase 3: Mobile Navigation Overhaul + +- **NEW**: Added `Mobile Tab Pattern` section for Clienți/Furnizori switching (US-304, US-305) +- **NEW**: Added `FAB Pattern` section for contextual actions (US-303) +- **UPDATED**: `MobileBottomNav` - 4 direct links: Dashboard, Bonuri, Facturi, Setări (US-307) +- **UPDATED**: `MobileDrawerMenu` - Grouped categories: PRINCIPALE, RAPOARTE, ANALIZE, ADMINISTRARE (US-308) +- **UPDATED**: Dashboard mobile layout - KPIs only, quick-links removed (US-309) +- **UPDATED**: ASCII diagrams with new navigation structure and FAB/Tab patterns +- **UPDATED**: Navigation Architecture with Phase 3 route map +- **REMOVED**: Upload button from footer nav (moved to FAB on Bonuri page) + ### Version 2.0.0 (2026-01-12) - **NEW**: Added `MobileDrawerMenu` component documentation @@ -1371,5 +1904,5 @@ Check that `data-theme` attribute is set correctly. --- **Last Updated:** 2026-01-12 -**Version:** 2.0.0 +**Version:** 3.0.0 **Maintained By:** Frontend Team diff --git a/scripts/ralph/prd.json b/scripts/ralph/prd.json index cf2e12c..71745ad 100644 --- a/scripts/ralph/prd.json +++ b/scripts/ralph/prd.json @@ -209,8 +209,8 @@ "Diagrame ASCII actualizate cu noua structură navigare", "npm run build passes" ], - "passes": false, - "notes": "" + "passes": true, + "notes": "Completed in iteration 9" } ] } diff --git a/scripts/ralph/progress.txt b/scripts/ralph/progress.txt index 1b2f180..ae08a30 100644 --- a/scripts/ralph/progress.txt +++ b/scripts/ralph/progress.txt @@ -1068,3 +1068,9 @@ User Stories: 11 (US-301 to US-311) [2026-01-12 16:52:33] Working on story: US-310 [2026-01-12 16:52:33] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_8_US-310.log) [2026-01-12 16:53:44] SUCCESS: Story US-310 passed! +[2026-01-12 16:53:44] Changes committed +[2026-01-12 16:53:44] Progress: 10/11 stories completed +[2026-01-12 16:53:46] === Iteration 9/100 === +[2026-01-12 16:53:46] Working on story: US-311 +[2026-01-12 16:53:46] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_9_US-311.log) +[2026-01-12 16:59:01] SUCCESS: Story US-311 passed!