generated sotries

2025-12-20 21:04:23 +02:00
parent d889b24f12
commit 8f95089814
65 changed files with 9501 additions and 0 deletions
@@ -0,0 +1,90 @@
+# Story 9.8: RTL/LTR Layout Perfection
+
+## Epic Reference
+**Epic 9:** Design & Branding Implementation
+
+## User Story
+As a **user**,
+I want **perfect RTL layout for Arabic and LTR for English**,
+So that **the content is natural to read in my language**.
+
+## Acceptance Criteria
+
+### RTL (Arabic)
+- [ ] Text aligns right
+- [ ] Navigation mirrors (logo right)
+- [ ] Form labels on right
+- [ ] Icons/arrows flip appropriately
+- [ ] Margins/paddings swap
+
+### LTR (English)
+- [ ] Standard left-to-right layout
+- [ ] Proper text alignment
+
+### Transitions
+- [ ] Seamless language toggle
+- [ ] No layout breaks on switch
+
+### Component Support
+- [ ] Calendar RTL support
+- [ ] Tables RTL support
+- [ ] All components tested in both modes
+
+## Technical Notes
+
+```css
+/* Use logical properties */
+.card {
+  margin-inline-start: 1rem; /* margin-left in LTR, margin-right in RTL */
+  padding-inline-end: 1rem;  /* padding-right in LTR, padding-left in RTL */
+}
+
+/* RTL-aware utilities */
+[dir="rtl"] .flip-rtl {
+  transform: scaleX(-1);
+}
+
+/* Tailwind RTL plugin configuration */
+@theme {
+  /* Use logical properties by default */
+}
+```
+
+```blade
+<!-- RTL-aware icon -->
+<flux:icon
+    name="arrow-right"
+    @class(['flip-rtl' => app()->getLocale() === 'ar'])
+/>
+
+<!-- RTL-aware positioning -->
+<div class="{{ app()->getLocale() === 'ar' ? 'right-0' : 'left-0' }} absolute">
+    <!-- Content -->
+</div>
+
+<!-- Better: Use logical properties -->
+<div class="start-0 absolute">
+    <!-- Content -->
+</div>
+```
+
+### Testing Checklist
+- [ ] Navigation layout
+- [ ] Form layouts
+- [ ] Card layouts
+- [ ] Table layouts
+- [ ] Modal layouts
+- [ ] Dropdown menus
+- [ ] Pagination
+
+## Definition of Done
+- [ ] RTL renders correctly
+- [ ] LTR renders correctly
+- [ ] Language switch seamless
+- [ ] Icons flip correctly
+- [ ] All components tested
+- [ ] No layout breaks
+- [ ] Tests pass
+
+## Estimation
+**Complexity:** High | **Effort:** 5-6 hours