- Added dark mode styles for responsive tables (.table-responsive)
- Added dark mode styles for mobile cards (.mobile-card)
- Enhanced form element dark mode (inputs, selects, textareas)
- Added dark mode for buttons (.bg-gray-200)
- Added dark mode for footer
- Added dark mode for breadcrumb navigation
- Added dark mode for prose/markdown preview
- Improved focus states for form elements in dark mode
- Added dark mode for placeholder text
- Comprehensive contrast ratios for accessibility
- Added responsive hamburger menu button visible on mobile (sm:hidden)
- Hidden desktop navigation on mobile (hidden sm:block)
- Added mobile menu dropdown with all navigation links
- Added mobile language switcher and theme toggle in menu
- JavaScript toggle functionality for menu open/close
- Auto-close menu when clicking navigation links
- Updated theme toggle to work with both desktop and mobile toggles
- Proper ARIA attributes for accessibility (aria-expanded, aria-label)
- Add Font Awesome for moon/sun icons
- Add dark mode CSS styles for body, inputs, tables, flash messages
- Add theme toggle button next to language switcher
- Add localStorage persistence for theme preference
- Fix code/bg-gray-100 visibility in dark mode
- Fix table header text color in dark mode
- Add _() translation function to add_tablet.html, add_user.html, loan_tablet.html
- Add _() translation function to add_non_loanable_device.html, edit_non_loanable_device.html
- Add _() translation function to history.html, non_loanable_devices.html, project_management.html
- Update app.py to use cookie-based language persistence with 1-year expiry
- Add /set_language endpoint to handle language switching with cookie + session
- Update language switcher in base.html to use new endpoint
- Set Spanish (es) as default language for internal app
- Import make_response and session from Flask
- Add Schamann.png logo to static/ directory
- Update base.html header with logo (force scaled to 40px)
- Replace primary color with corporate color palette:
- Cobalt Blue (#1338BE) for headers and navigation
- Tiger Orange (#FC6A03) for accents and loading indicators
- Emerald Green (#028A0F) for success states
- Add full shade ranges (50-900) for all three colors in Tailwind config
- Create docs/CORPORATE_DESIGN.md with color specifications and usage guidelines
- Add Flask-Babel for internationalization
- Configure app for Spanish (default) and English
- Add language switcher in navigation
- Wrap all UI text in templates with gettext()
- Create translation directory structure
- Add complete Spanish translations (58 strings)
- Add English translations (template)
- Compile .po to .mo files
- Add extract_translations.py script for future updates
- Add compile_translations.py script
Spanish is now the default language, with English available via ?lang=en
Translated strings include:
- Navigation (Home, Add Tablet, Add User, etc.)
- User Loans interface (Search, Filter, Status, etc.)
- Table headers (User, Tablet, Serial Number, etc.)
- Buttons (Loan, Return, Search, etc.)
- Messages (No users found, No active loans, etc.)
- All UI text across all templates
- Add Tailwind CSS via CDN for modern styling
- Add HTMX for AJAX functionality without full page reloads
- Revamp user_loans interface with:
- Real-time search (debounced 500ms)
- Status filtering (all users, with loans, no loans)
- Pagination (20 users per page)
- Responsive table design
- Clean, modern UI with Tailwind classes
- Create user_loans_detail.html for individual user loan history
- Update index.html with Tailwind styling
- Update base.html with Tailwind + HTMX setup
- Add components/user_loans_results.html for HTMX partial updates
- Update app.py user_loans route to support search, filter, pagination
- Add user_loans_detail route for detailed user view
This addresses the issues:
- Navigation overflow (fixed with responsive Tailwind classes)
- Basic look (modern, professional UI)
- User loans UX (fast search, filtering, pagination for 500+ users)
- Add overflow-x: hidden to body to prevent horizontal scroll on zoom
- Add overflow: hidden to .container to prevent margin overflow
- Ensure .nav a has flex: 1 1 auto and min-width: 120px for proper wrapping
- Fixes issue where navigation buttons overflow through right margin when zoomed in
This ensures the navigation bar wraps properly and doesn't cause horizontal
scrolling or overflow issues on any screen size or zoom level.
The responsive CSS addition was missing the closing </style> tag,
which caused the main page to render as blank. This fix restores
the proper HTML structure.
- Add mobile-first responsive CSS to base.html
- Wrap all tables in .table-container for horizontal scrolling on mobile
- Add breakpoints for phones (576px), tablets (768px), desktops (992px, 1200px)
- Improve mobile navigation (vertical stack) and form layouts (full-width)
- Add print styles for clean printing
- Update project_management.html editor for mobile
- Document all changes in docs/RESPONSIVE_CSS.md
No backend or JavaScript changes - pure CSS solution.
For 5 internal technical users, this is simpler and more appropriate than
HTMX or SPA approaches. Solves mobile accessibility issue with minimal changes.
