mirror of
https://github.com/DRYTRIX/TimeTracker.git
synced 2026-05-04 19:40:04 -05:00
Dries Peeters
110 lines
3.5 KiB
Markdown
110 lines
3.5 KiB
Markdown
# Kanban Board & Cards Improvements
|
|
|
|
## Overview
|
|
Completely redesigned the kanban board and cards with a modern, clean aesthetic while maintaining the light theme preference.
|
|
|
|
## Key Improvements
|
|
|
|
### 🎨 Visual Design
|
|
- **Modern Card Layout**: Cards now have a cleaner, more professional appearance with better spacing
|
|
- **Enhanced Shadows**: Subtle shadows with smooth hover effects create depth
|
|
- **Priority Indicators**: Visual left-border priority indicators with gradient colors
|
|
- **Improved Typography**: Better font hierarchy and spacing for readability
|
|
|
|
### 🎯 User Experience
|
|
- **Hidden Actions**: Action buttons (Start/Stop/Edit) now appear on hover to reduce clutter
|
|
- **Better Visual Hierarchy**: Clear separation between card sections (header, content, footer)
|
|
- **Smooth Transitions**: All interactions have smooth, polished animations
|
|
- **Improved Drag & Drop**: Better visual feedback when dragging cards
|
|
|
|
### 🏷️ Card Components
|
|
|
|
#### Card Header
|
|
- Task ID display in subtle gray
|
|
- Action buttons that appear on hover
|
|
- Clean, minimal design
|
|
|
|
#### Priority Indicator
|
|
- 4px colored left border on each card
|
|
- Gradient colors for each priority level:
|
|
- Low: Green gradient
|
|
- Medium: Orange gradient
|
|
- High: Deep orange gradient
|
|
- Urgent: Red gradient with glow effect
|
|
|
|
#### Card Content
|
|
- Task title with hover effect
|
|
- Description with 2-line clamp
|
|
- Badges for priority, active status, and overdue
|
|
- Progress bar with percentage
|
|
|
|
#### Card Footer
|
|
- Assignee information
|
|
- Due date display
|
|
- Overdue highlighting
|
|
|
|
### 📊 Column Improvements
|
|
- **Column Headers**: Enhanced with gradient backgrounds and better icons
|
|
- **Status Icons**: Color-coded icons with gradients for each status
|
|
- **Count Badges**: Modern pill-shaped badges with status colors
|
|
- **Scrollbars**: Custom styled scrollbars for better aesthetics
|
|
|
|
### 🎨 Color System
|
|
- **Todo**: Gray gradient
|
|
- **In Progress**: Yellow/amber gradient
|
|
- **Review**: Blue gradient
|
|
- **Done**: Green gradient
|
|
|
|
### 📱 Responsive Design
|
|
- Proper mobile layout with stacked columns
|
|
- Touch-friendly button sizes
|
|
- Optimized spacing for smaller screens
|
|
|
|
### 🌙 Dark Mode Support
|
|
- Full dark mode compatibility
|
|
- Adjusted colors and contrasts for dark theme
|
|
- Proper gradient updates for dark backgrounds
|
|
|
|
## Technical Changes
|
|
|
|
### HTML Structure
|
|
- Reorganized card layout into logical sections
|
|
- Added semantic class names
|
|
- Removed redundant elements
|
|
|
|
### CSS Architecture
|
|
- Modern CSS with custom properties
|
|
- Organized into clear sections with comments
|
|
- Optimized transitions and animations
|
|
- Better use of gradients and shadows
|
|
|
|
### JavaScript Updates
|
|
- Updated to work with new class names
|
|
- Maintained drag-and-drop functionality
|
|
- Improved count update logic
|
|
|
|
## Files Modified
|
|
- `app/templates/tasks/_kanban.html` - Complete redesign of kanban board and cards
|
|
|
|
## Usage
|
|
The kanban board is automatically used in:
|
|
- Project view (`templates/projects/view.html`)
|
|
- Task list view (`app/templates/tasks/list.html`)
|
|
|
|
## Design Principles
|
|
1. **Clean & Modern**: Minimalist design with focus on content
|
|
2. **Light Theme**: Maintains the preferred light aesthetic
|
|
3. **Visual Hierarchy**: Clear distinction between elements
|
|
4. **Smooth Interactions**: Polished animations and transitions
|
|
5. **Accessible**: Good contrast ratios and touch targets
|
|
6. **Responsive**: Works well on all screen sizes
|
|
|
|
## Result
|
|
The kanban board now provides a much more professional and pleasant user experience with:
|
|
- Better visual appeal
|
|
- Clearer information hierarchy
|
|
- Smoother interactions
|
|
- More modern aesthetics
|
|
- Improved usability
|
|
|