Add frontend revamp roadmap: mobile readability and UI standardization
- Focus on database results display (responsive tables, card layouts) - Standardize CSS framework (remove Bootstrap, use Tailwind only) - Mobile navigation with hamburger menu - Form responsiveness improvements - Dark mode enhancement and accessibility - Phased implementation approach
This commit is contained in:
parent
ab8db53ba6
commit
1b28021134
1 changed files with 45 additions and 0 deletions
|
|
@ -395,3 +395,48 @@ GestionTablets/
|
||||||
|
|
||||||
- **Español (Spanish)** — Default language for this internal tool
|
- **Español (Spanish)** — Default language for this internal tool
|
||||||
- **English** — Deprecated; available for legacy users but not actively maintained
|
- **English** — Deprecated; available for legacy users but not actively maintained
|
||||||
|
|
||||||
|
### Frontend Revamp (High Priority)
|
||||||
|
|
||||||
|
**Goal**: Improve mobile readability and standardize UI across all templates
|
||||||
|
|
||||||
|
#### 1. Database Results Display (Main Content Area)
|
||||||
|
- **Current issue**: Tables overflow on mobile, inconsistent styling across templates
|
||||||
|
- **Solution**:
|
||||||
|
- Responsive tables with horizontal scroll on mobile
|
||||||
|
- Card-based layouts for mobile (show data as stacked cards instead of tables)
|
||||||
|
- Standardize column widths and spacing
|
||||||
|
- Improve readability of data cells (better contrast, padding)
|
||||||
|
|
||||||
|
#### 2. CSS Framework Standardization
|
||||||
|
- **Current issue**: Mixed Bootstrap 5, Tailwind, and plain CSS across templates
|
||||||
|
- **Solution**:
|
||||||
|
- Standardize all templates on Tailwind CSS (already in use for `index.html`)
|
||||||
|
- Remove Bootstrap and Font Awesome dependencies
|
||||||
|
- Create reusable component classes for buttons, forms, cards
|
||||||
|
|
||||||
|
#### 3. Mobile Navigation
|
||||||
|
- **Current issue**: Horizontal navigation bar with 8+ links doesn't collapse on mobile
|
||||||
|
- **Solution**:
|
||||||
|
- Implement hamburger menu for mobile devices
|
||||||
|
- Responsive breakpoints for different screen sizes
|
||||||
|
|
||||||
|
#### 4. Form Responsiveness
|
||||||
|
- **Current issue**: Forms use Bootstrap grid classes, inconsistent spacing
|
||||||
|
- **Solution**:
|
||||||
|
- Tailwind responsive grid for form layouts
|
||||||
|
- Consistent input styling and validation feedback
|
||||||
|
- Mobile-friendly touch targets
|
||||||
|
|
||||||
|
#### 5. Dark Mode Enhancement
|
||||||
|
- **Current issue**: Incomplete dark mode coverage, some elements still have light backgrounds
|
||||||
|
- **Solution**:
|
||||||
|
- Comprehensive dark mode CSS variables
|
||||||
|
- Test all pages in dark mode
|
||||||
|
- Ensure proper contrast ratios
|
||||||
|
|
||||||
|
### Implementation Approach
|
||||||
|
- **Phase 1**: Fix database results tables (mobile scroll, card alternative)
|
||||||
|
- **Phase 2**: Standardize CSS framework (remove Bootstrap, use Tailwind only)
|
||||||
|
- **Phase 3**: Responsive navigation and forms
|
||||||
|
- **Phase 4**: Dark mode polish and accessibility improvements
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue