mirror of
https://github.com/DRYTRIX/TimeTracker.git
synced 2026-01-05 19:20:21 -06:00
3c3faf13d4
Migrate frontend from custom CSS to Tailwind CSS framework with comprehensive template updates and improved component structure. Breaking Changes: - Remove legacy CSS files (base.css, calendar.css, ui.css, etc.) - Replace with Tailwind-based styling system New Features: - Add Tailwind CSS configuration with PostCSS pipeline - Create new template components for admin, clients, invoices, projects, reports - Add form-bridge.css for smooth transition between legacy and Tailwind styles - Add default avatar SVG asset - Implement Tailwind-based kanban board template - Add comprehensive UI quick wins documentation Infrastructure: - Add package.json with Tailwind dependencies - Configure PostCSS and Tailwind build pipeline - Update .gitignore for Node modules and build artifacts Testing: - Add template rendering tests (test_tasks_templates.py) - Add UI component tests (test_ui_quick_wins.py) Templates Added: - Admin: dashboard, settings, system info, user management - Clients: list and detail views - Invoices: full CRUD templates with payment recording - Projects: list, detail, and Tailwind kanban views - Reports: comprehensive reporting templates - Timer: manual entry interface This commit represents the first phase of the UI redesign initiative, maintaining backward compatibility where needed while establishing the foundation for modern, responsive interfaces.
1.5 KiB
1.5 KiB
UI Quick Wins (October 2025)
This document summarizes the lightweight improvements applied to the new UI.
What changed
- Added minimal design tokens, button classes, focus ring utility, table helpers, and chips in
app/static/form-bridge.css. - Added an accessible skip link and a main content anchor in
app/templates/base.html. - Enhanced
app/templates/tasks/list.htmlwith sticky header treatment (CSS-only), zebra rows, and numeric alignment for date/progress columns. - Polished
app/templates/auth/login.htmlwith primary button styling and an inline user icon for the username field. - Added smoke tests in
tests/test_ui_quick_wins.pyto ensure presence of these enhancements.
How to use
- Buttons: use
btn btn-primary,btn btn-secondary, orbtn btn-ghost. Sizes: addbtn-smorbtn-lg. - Focus: add
focus-ringto any interactive element that needs a consistent visible focus. - Tables: add
table table-zebrato tables; usetable-compactfor denser rows andtable-numberon numeric cells/headers. - Chips: use
chipplus variant likechip-neutral,chip-success,chip-warning,chip-danger.
Notes
- The sticky header effect relies on
position: stickyapplied to the<th>elements via.tableclass. Ensure the table is inside a scrolling container (already true for the list view wrapper). - Token values are minimal fallbacks; prefer Tailwind theme tokens when available. These helpers are safe to remove once the templates are fully converted to Tailwind component primitives.