91 lines
3.2 KiB
Markdown
91 lines
3.2 KiB
Markdown
# RTL Progress Bar Fix Documentation
|
|
|
|
## Problem
|
|
When switching the application language to Arabic (RTL mode), all progress bars were disappearing from the interface.
|
|
|
|
## Root Cause
|
|
The issue was caused by the RTL CSS file (`app-rtl.min.css`) which applies right-to-left layout transformations. Progress bars in Bootstrap are designed to fill from left to right, and the RTL transformations were causing them to become invisible or not render properly.
|
|
|
|
## Solution
|
|
Created a custom CSS override file (`static/css/rtl-fixes.css`) that is loaded specifically when Arabic language is selected. This file contains targeted fixes for progress bars in RTL mode.
|
|
|
|
## Implementation Details
|
|
|
|
### Files Modified/Created:
|
|
|
|
1. **`static/css/rtl-fixes.css`** (NEW)
|
|
- Contains CSS rules to fix progress bar rendering in RTL mode
|
|
- Forces progress bars to maintain LTR direction
|
|
- Ensures visibility and proper styling
|
|
|
|
2. **`templates/base.html`** (MODIFIED)
|
|
- Added conditional loading of `rtl-fixes.css` when `LANGUAGE_CODE == 'ar'`
|
|
- The fix file is loaded after `app-rtl.min.css` to override problematic styles
|
|
|
|
### Key CSS Fixes Applied:
|
|
|
|
```css
|
|
/* Force progress container to use LTR direction */
|
|
.progress {
|
|
direction: ltr !important;
|
|
}
|
|
|
|
/* Ensure progress bar fills from left to right */
|
|
.progress-bar {
|
|
transform-origin: left center !important;
|
|
}
|
|
|
|
/* Ensure all progress bar color variants are visible */
|
|
.progress-bar.bg-success,
|
|
.progress-bar.bg-info,
|
|
.progress-bar.bg-warning,
|
|
.progress-bar.bg-danger,
|
|
.progress-bar.bg-primary,
|
|
.progress-bar.bg-secondary {
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
}
|
|
```
|
|
|
|
## How It Works
|
|
|
|
1. When a user selects Arabic language, the `base.html` template detects `LANGUAGE_CODE == 'ar'`
|
|
2. The template loads:
|
|
- `app-rtl.min.css` (main RTL styles)
|
|
- `rtl-fixes.css` (progress bar fixes) ← **NEW**
|
|
3. The `rtl-fixes.css` overrides specific RTL styles that were breaking progress bars
|
|
4. Progress bars now render correctly while the rest of the page remains in RTL layout
|
|
|
|
## Testing
|
|
|
|
To test the fix:
|
|
|
|
1. Switch language to Arabic in the application
|
|
2. Navigate to any page with progress bars (e.g., Leave Requests page)
|
|
3. Verify that:
|
|
- Progress bars are visible
|
|
- Progress bars show the correct percentage
|
|
- Color coding (success/warning/danger) works correctly
|
|
- Animations work smoothly
|
|
|
|
## Affected Pages
|
|
|
|
This fix applies globally to all pages that use Bootstrap progress bars, including:
|
|
- Employee Leave Requests
|
|
- HR Dashboard
|
|
- Any custom pages with progress indicators
|
|
|
|
## Maintenance Notes
|
|
|
|
- The `rtl-fixes.css` file should be kept in sync if the main CSS framework is updated
|
|
- If new progress bar issues appear in RTL mode, add additional rules to `rtl-fixes.css`
|
|
- The file is intentionally kept separate from `app-rtl.min.css` for easier maintenance
|
|
|
|
## Alternative Approaches Considered
|
|
|
|
1. **Modifying `app-rtl.min.css` directly**: Not feasible due to file being minified and very large
|
|
2. **JavaScript-based fix**: Would add unnecessary complexity and performance overhead
|
|
3. **Individual template fixes**: Would require changes to multiple files and be harder to maintain
|
|
|
|
The chosen CSS override approach is the cleanest and most maintainable solution.
|