demo2
This commit is contained in:
483
RESPONSIVE_BEHAVIOR_DIAGRAM.md
Normal file
483
RESPONSIVE_BEHAVIOR_DIAGRAM.md
Normal file
@@ -0,0 +1,483 @@
|
||||
# Responsive Behavior Diagram
|
||||
|
||||
Visual guide to understand how your application adapts across different screen sizes.
|
||||
|
||||
---
|
||||
|
||||
## 📱 Layout Behavior by Screen Size
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ MOBILE (320px - 767px) │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌───────────────────────────────────────────────────────────┐ │
|
||||
│ │ ☰ لوحة التحكم أحمد [خروج] │ │
|
||||
│ │ Header (z-index: 50) │ │
|
||||
│ └───────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌───────────────────────────────────────────────────────────┐ │
|
||||
│ │ │ │
|
||||
│ │ Content Area (Full Width) │ │
|
||||
│ │ - Single column grid │ │
|
||||
│ │ - Stacked cards │ │
|
||||
│ │ - Full-width buttons │ │
|
||||
│ │ │ │
|
||||
│ └───────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ When hamburger (☰) clicked: │
|
||||
│ ┌──────────────────────┐ │
|
||||
│ │ [Overlay: 50% black] │ ┌────────────────────────┐ │
|
||||
│ │ │ │ نظام الصيانة [×] │ │
|
||||
│ │ │ ├────────────────────────┤ │
|
||||
│ │ │ │ 📊 لوحة التحكم │ │
|
||||
│ │ │ │ 👥 العملاء │ │
|
||||
│ │ │ │ 🚗 المركبات │ │
|
||||
│ │ │ │ 🔧 زيارات الصيانة │ │
|
||||
│ │ │ │ 💰 المصروفات │ │
|
||||
│ │ │ │ 📈 التقارير المالية │ │
|
||||
│ │ │ │ 👤 إدارة المستخدمين │ │
|
||||
│ │ │ │ ⚙️ إعدادات النظام │ │
|
||||
│ │ │ └────────────────────────┘ │
|
||||
│ │ (z-index: 45) │ Sidebar (z-index: 40) │
|
||||
│ └──────────────────────┘ Width: 320px (max 85vw) │
|
||||
│ Slides in from right │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
|
||||
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ TABLET (768px - 1023px) │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌───────────────────────────────────────────────────────────┐ │
|
||||
│ │ ☰ نظام الصيانة أحمد محمد [خروج] │ │
|
||||
│ │ Header (z-index: 50) │ │
|
||||
│ └───────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌───────────────────────────────────────────────────────────┐ │
|
||||
│ │ │ │
|
||||
│ │ Content Area (Full Width) │ │
|
||||
│ │ - 2-3 column grids │ │
|
||||
│ │ - Side-by-side cards │ │
|
||||
│ │ - Inline buttons │ │
|
||||
│ │ │ │
|
||||
│ └───────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ Behavior: Same as mobile (overlay menu) │
|
||||
│ Reason: Prevents sidebar from taking too much space │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
|
||||
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ DESKTOP (1024px - 1279px) │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌──────────┬──────────────────────────────────────────────────┐ │
|
||||
│ │ نظام │ مرحباً، أحمد محمد [خروج] │ │
|
||||
│ │ الصيانة │ مدير عام │ │
|
||||
│ │ [<] │ Header (z-index: 50) │ │
|
||||
│ ├──────────┴──────────────────────────────────────────────────┤ │
|
||||
│ │ 📊 لوحة │ │ │
|
||||
│ │ التحكم│ │ │
|
||||
│ │ │ Content Area │ │
|
||||
│ │ 👥 العملاء│ - 3-4 column grids │ │
|
||||
│ │ │ - Multi-column layouts │ │
|
||||
│ │ 🚗 المركبات│ - Optimized spacing │ │
|
||||
│ │ │ │ │
|
||||
│ │ 🔧 زيارات │ │ │
|
||||
│ │ الصيانة│ │ │
|
||||
│ │ │ │ │
|
||||
│ │ 💰 المصروفات│ │ │
|
||||
│ │ │ │ │
|
||||
│ │ 📈 التقارير│ │ │
|
||||
│ │ المالية│ │ │
|
||||
│ │ │ │ │
|
||||
│ │ 👤 إدارة │ │ │
|
||||
│ │ المستخدمين│ │ │
|
||||
│ │ │ │ │
|
||||
│ │ ⚙️ إعدادات│ │ │
|
||||
│ │ النظام │ │ │
|
||||
│ │ │ │ │
|
||||
│ └──────────┴──────────────────────────────────────────────────┘ │
|
||||
│ Sidebar: 256px (expanded) │
|
||||
│ Click [<] to collapse to 64px │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
|
||||
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ DESKTOP COLLAPSED (1024px+, Sidebar Collapsed) │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌──┬────────────────────────────────────────────────────────────┐ │
|
||||
│ │🏢│ مرحباً، أحمد محمد [خروج] │ │
|
||||
│ │ │ مدير عام │ │
|
||||
│ │[>]│ Header (z-index: 50) │ │
|
||||
│ ├──┴────────────────────────────────────────────────────────────┤ │
|
||||
│ │📊│ │ │
|
||||
│ │ │ │ │
|
||||
│ │👥│ Content Area (More Space) │ │
|
||||
│ │ │ - 4-6 column grids possible │ │
|
||||
│ │🚗│ - Maximum content width │ │
|
||||
│ │ │ - Optimal for data tables │ │
|
||||
│ │🔧│ │ │
|
||||
│ │ │ │ │
|
||||
│ │💰│ │ │
|
||||
│ │ │ │ │
|
||||
│ │📈│ │ │
|
||||
│ │ │ │ │
|
||||
│ │👤│ │ │
|
||||
│ │ │ │ │
|
||||
│ │⚙️│ │ │
|
||||
│ │ │ │ │
|
||||
│ └──┴────────────────────────────────────────────────────────────┘ │
|
||||
│ Sidebar: 64px (collapsed, icons only) │
|
||||
│ Hover over icons shows tooltip │
|
||||
│ Click [>] to expand back to 256px │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
|
||||
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ ULTRA-WIDE (1920px+) │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌──────────┬──────────────────────────────────────────────────┐ │
|
||||
│ │ نظام │ مرحباً، أحمد محمد بن علي [خروج] │ │
|
||||
│ │ الصيانة │ مدير عام - المستوى 1 │ │
|
||||
│ │ [<] │ Header (z-index: 50) │ │
|
||||
│ ├──────────┴──────────────────────────────────────────────────┤ │
|
||||
│ │ 📊 لوحة │ │ │
|
||||
│ │ التحكم│ │ │
|
||||
│ │ │ Content Area (Max Width Container) │ │
|
||||
│ │ 👥 العملاء│ - Centered with max-width │ │
|
||||
│ │ │ - 4-6 column grids │ │
|
||||
│ │ 🚗 المركبات│ - Prevents content from being too wide │ │
|
||||
│ │ │ - Optimal reading width │ │
|
||||
│ │ 🔧 زيارات │ │ │
|
||||
│ │ الصيانة│ │ │
|
||||
│ │ │ │ │
|
||||
│ │ 💰 المصروفات│ │ │
|
||||
│ │ │ │ │
|
||||
│ │ 📈 التقارير│ │ │
|
||||
│ │ المالية│ │ │
|
||||
│ │ │ │ │
|
||||
│ │ 👤 إدارة │ │ │
|
||||
│ │ المستخدمين│ │ │
|
||||
│ │ │ │ │
|
||||
│ │ ⚙️ إعدادات│ │ │
|
||||
│ │ النظام │ │ │
|
||||
│ │ │ │ │
|
||||
│ └──────────┴──────────────────────────────────────────────────┘ │
|
||||
│ Sidebar: 256px (expanded) │
|
||||
│ Content: Centered with comfortable max-width │
|
||||
│ No layout breaks or overflow │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Grid Behavior Examples
|
||||
|
||||
### Dashboard Stats Cards
|
||||
|
||||
```
|
||||
Mobile (xs):
|
||||
┌─────────────────┐
|
||||
│ Card 1 │
|
||||
├─────────────────┤
|
||||
│ Card 2 │
|
||||
├─────────────────┤
|
||||
│ Card 3 │
|
||||
├─────────────────┤
|
||||
│ Card 4 │
|
||||
└─────────────────┘
|
||||
cols={{ xs: 1 }}
|
||||
|
||||
Tablet (sm):
|
||||
┌─────────┬─────────┐
|
||||
│ Card 1 │ Card 2 │
|
||||
├─────────┼─────────┤
|
||||
│ Card 3 │ Card 4 │
|
||||
└─────────┴─────────┘
|
||||
cols={{ sm: 2 }}
|
||||
|
||||
Desktop (lg):
|
||||
┌────┬────┬────┬────┐
|
||||
│ C1 │ C2 │ C3 │ C4 │
|
||||
└────┴────┴────┴────┘
|
||||
cols={{ lg: 4 }}
|
||||
|
||||
Usage:
|
||||
<Grid cols={{ xs: 1, sm: 2, lg: 4 }} gap="md">
|
||||
<StatCard />
|
||||
<StatCard />
|
||||
<StatCard />
|
||||
<StatCard />
|
||||
</Grid>
|
||||
```
|
||||
|
||||
### Form Layout
|
||||
|
||||
```
|
||||
Mobile (xs):
|
||||
┌─────────────────┐
|
||||
│ Name │
|
||||
├─────────────────┤
|
||||
│ Email │
|
||||
├─────────────────┤
|
||||
│ Phone │
|
||||
├─────────────────┤
|
||||
│ Address │
|
||||
└─────────────────┘
|
||||
|
||||
Desktop (md):
|
||||
┌─────────┬─────────┐
|
||||
│ Name │ Email │
|
||||
├─────────┼─────────┤
|
||||
│ Phone │ Address │
|
||||
└─────────┴─────────┘
|
||||
|
||||
Usage:
|
||||
<Grid cols={{ xs: 1, md: 2 }} gap="md">
|
||||
<FormField label="الاسم" />
|
||||
<FormField label="البريد" />
|
||||
<FormField label="الهاتف" />
|
||||
<FormField label="العنوان" />
|
||||
</Grid>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Z-Index Layering
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ Toast Notifications (z-index: 70) │ ← Highest
|
||||
├─────────────────────────────────────────┤
|
||||
│ Modals (z-index: 60) │
|
||||
├─────────────────────────────────────────┤
|
||||
│ Header (z-index: 50) │
|
||||
├─────────────────────────────────────────┤
|
||||
│ Overlay (z-index: 45) │
|
||||
├─────────────────────────────────────────┤
|
||||
│ Sidebar (z-index: 40) │
|
||||
├─────────────────────────────────────────┤
|
||||
│ Content (z-index: 0) │ ← Base
|
||||
└─────────────────────────────────────────┘
|
||||
|
||||
This ensures:
|
||||
✅ Modals appear above everything
|
||||
✅ Header stays on top during scroll
|
||||
✅ Overlay appears between sidebar and content
|
||||
✅ No z-index conflicts
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📱 Touch Target Sizes
|
||||
|
||||
```
|
||||
Minimum Touch Target: 44x44px (WCAG Guidelines)
|
||||
|
||||
❌ Too Small:
|
||||
┌──────┐
|
||||
│ [×] │ 30x30px - Hard to tap
|
||||
└──────┘
|
||||
|
||||
✅ Good:
|
||||
┌──────────┐
|
||||
│ [×] │ 44x44px - Easy to tap
|
||||
└──────────┘
|
||||
|
||||
✅ Better:
|
||||
┌────────────┐
|
||||
│ [×] │ 48x48px - Very comfortable
|
||||
└────────────┘
|
||||
|
||||
Implementation:
|
||||
<button className="min-h-[44px] min-w-[44px] p-2">
|
||||
<Icon />
|
||||
</button>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔄 Sidebar Transition States
|
||||
|
||||
```
|
||||
Desktop Sidebar Toggle Animation:
|
||||
|
||||
Expanded (256px) Collapsing Collapsed (64px)
|
||||
┌──────────────┐ ┌────────┐ ┌──┐
|
||||
│ نظام الصيانة │ → │ نظام │ → │🏢│
|
||||
│ [<] │ │ [<] │ │[>]│
|
||||
├──────────────┤ ├────────┤ ├──┤
|
||||
│ 📊 لوحة التحكم│ │ 📊 لوحة│ │📊│
|
||||
│ 👥 العملاء │ │ 👥 العم│ │👥│
|
||||
│ 🚗 المركبات │ │ 🚗 المر│ │🚗│
|
||||
└──────────────┘ └────────┘ └──┘
|
||||
300ms transition with ease-out easing
|
||||
GPU-accelerated (transform: translateX)
|
||||
|
||||
Mobile Menu Animation:
|
||||
|
||||
Closed Opening Open
|
||||
┌──────────┐ ┌──────────────┐
|
||||
│[Overlay] │ │ [Overlay] │
|
||||
│ │ │ │
|
||||
│ ┌───┤ │ ┌───────────┤
|
||||
│ │نظام│ │ │ نظام │
|
||||
│ │[×]│ │ │ الصيانة [×]│
|
||||
│ ├───┤ │ ├───────────┤
|
||||
│ │📊 │ │ │📊 لوحة │
|
||||
│ │👥 │ │ │👥 العملاء │
|
||||
│ └───┘ │ └───────────┘
|
||||
Slides in from right with overlay fade-in
|
||||
300ms transition with ease-out easing
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Responsive Padding Scale
|
||||
|
||||
```
|
||||
Component Padding by Screen Size:
|
||||
|
||||
Mobile (xs): p-4 (16px)
|
||||
┌────────────────┐
|
||||
│ ▓▓▓▓▓▓▓▓▓▓▓▓ │
|
||||
│ ▓ Content ▓ │
|
||||
│ ▓▓▓▓▓▓▓▓▓▓▓▓ │
|
||||
└────────────────┘
|
||||
|
||||
Tablet (md): p-5 (20px)
|
||||
┌──────────────────┐
|
||||
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
|
||||
│ ▓ Content ▓ │
|
||||
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
|
||||
└──────────────────┘
|
||||
|
||||
Desktop (lg): p-6 (24px)
|
||||
┌────────────────────┐
|
||||
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
|
||||
│ ▓ Content ▓ │
|
||||
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
|
||||
└────────────────────┘
|
||||
|
||||
Large (xl): p-8 (32px)
|
||||
┌──────────────────────┐
|
||||
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
|
||||
│ ▓ Content ▓ │
|
||||
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
|
||||
└──────────────────────┘
|
||||
|
||||
Usage:
|
||||
<div className="p-4 sm:p-5 md:p-6 lg:p-8">
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📐 Typography Scale
|
||||
|
||||
```
|
||||
Heading 1:
|
||||
Mobile: text-xl (20px) ████████
|
||||
Tablet: text-2xl (24px) ██████████
|
||||
Desktop: text-3xl (30px) ████████████
|
||||
|
||||
Heading 2:
|
||||
Mobile: text-lg (18px) ██████
|
||||
Tablet: text-xl (20px) ████████
|
||||
Desktop: text-2xl (24px) ██████████
|
||||
|
||||
Body:
|
||||
Mobile: text-sm (14px) ████
|
||||
Tablet: text-base (16px) █████
|
||||
Desktop: text-base (16px) █████
|
||||
|
||||
Small:
|
||||
Mobile: text-xs (12px) ███
|
||||
Tablet: text-sm (14px) ████
|
||||
Desktop: text-sm (14px) ████
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Color & Contrast
|
||||
|
||||
```
|
||||
Background Colors:
|
||||
┌─────────────────────────────────┐
|
||||
│ bg-gray-50 (Very light gray) │ ← Page background
|
||||
├─────────────────────────────────┤
|
||||
│ bg-white (White) │ ← Cards, sidebar
|
||||
├─────────────────────────────────┤
|
||||
│ bg-blue-50 (Light blue) │ ← Active states
|
||||
└─────────────────────────────────┘
|
||||
|
||||
Text Colors:
|
||||
┌─────────────────────────────────┐
|
||||
│ text-gray-900 (Almost black) │ ← Primary text (4.5:1)
|
||||
├─────────────────────────────────┤
|
||||
│ text-gray-600 (Medium gray) │ ← Secondary text (4.5:1)
|
||||
├─────────────────────────────────┤
|
||||
│ text-gray-500 (Light gray) │ ← Tertiary text (4.5:1)
|
||||
└─────────────────────────────────┘
|
||||
|
||||
All combinations meet WCAG AA standards (4.5:1 contrast ratio)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Performance Optimizations
|
||||
|
||||
```
|
||||
Sidebar Animation:
|
||||
✅ Uses transform (GPU-accelerated)
|
||||
✅ Uses transition-transform
|
||||
❌ Avoids animating width directly
|
||||
|
||||
Before (Slow):
|
||||
.sidebar {
|
||||
width: 256px;
|
||||
transition: width 300ms; ← CPU-intensive
|
||||
}
|
||||
|
||||
After (Fast):
|
||||
.sidebar {
|
||||
width: 256px;
|
||||
transform: translateX(0);
|
||||
transition: transform 300ms; ← GPU-accelerated
|
||||
}
|
||||
|
||||
Result: Smooth 60fps animations
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📱 Breakpoint Decision Tree
|
||||
|
||||
```
|
||||
Is viewport width < 768px?
|
||||
├─ YES → Mobile Layout
|
||||
│ ├─ Hamburger menu
|
||||
│ ├─ Single column grids
|
||||
│ ├─ Stacked buttons
|
||||
│ └─ Compact header
|
||||
│
|
||||
└─ NO → Is viewport width < 1024px?
|
||||
├─ YES → Tablet Layout
|
||||
│ ├─ Hamburger menu (like mobile)
|
||||
│ ├─ 2-3 column grids
|
||||
│ ├─ Inline buttons
|
||||
│ └─ Medium header
|
||||
│
|
||||
└─ NO → Desktop Layout
|
||||
├─ Persistent sidebar
|
||||
├─ 3-4+ column grids
|
||||
├─ Full header
|
||||
└─ Collapsible sidebar option
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Use these diagrams as reference while implementing responsive design! 📐**
|
||||
Reference in New Issue
Block a user