TimeTrack/static/css/TABLE_MIGRATION_GUIDE.md

Table Styles Migration Guide

This guide helps migrate from the old scattered table styles to the new consolidated table system.

Overview

The new consolidated table system provides:

• A single base .table class with all common styles
• Modifier classes for variations (hover, striped, compact, etc.)
• Consistent spacing and colors using CSS variables
• Better dark mode support
• Mobile-responsive options

Migration Steps

1. Include the new CSS file

Add to your base template (layout.html):

<link rel="stylesheet" href="{{ url_for('static', filename='css/tables-consolidated.css') }}">

2. Update Table Classes

Basic Tables

Old:

<table class="data-table">
<table class="users-table">
<table class="projects-table">

New:

<table class="table table--hover">

Time Entries Table

Old:

<table class="entries-table">

New:

<table class="table table--hover table--time-entries">

Admin Tables

Old:

<table class="users-table">
<table class="projects-table">

New:

<table class="table table--hover table--admin">

3. Add Container Classes

Wrap tables in proper containers for better styling:

<div class="table-container">
    <div class="table-responsive">
        <table class="table table--hover">
            <!-- table content -->
        </table>
    </div>
</div>

4. Update Table Components

Actions Column

Old:

<td>
    <div class="table-actions">
        <button>Edit</button>
        <button>Delete</button>
    </div>
</td>

New:

<td class="actions-cell">
    <div class="table-actions">
        <button class="btn btn--sm">Edit</button>
        <button class="btn btn--sm btn--danger">Delete</button>
    </div>
</td>

Status Badges

Old:

<span class="status-badge active">Active</span>

New:

<span class="table-badge table-badge--success">Active</span>

5. Mobile Optimization

For better mobile display, add data attributes:

<table class="table table--hover table--mobile-stack">
    <tbody>
        <tr>
            <td data-label="Name">John Doe</td>
            <td data-label="Email">john@example.com</td>
            <td data-label="Status">
                <span class="table-badge table-badge--success">Active</span>
            </td>
        </tr>
    </tbody>
</table>

Available Modifier Classes

Base Modifiers

• .table--hover - Adds hover effect to rows
• .table--striped - Alternating row colors
• .table--bordered - Adds borders to all cells
• .table--compact - Reduces padding
• .table--sm - Smaller font size
• .table--fixed - Fixed table layout

Specialized Modifiers

• .table--time-entries - Time tracking table styling
• .table--admin - Admin panel tables
• .table--data - Data-heavy tables
• .table--mobile-stack - Stacks on mobile

Responsive Options

• .table-responsive - Horizontal scroll on small screens
• .table--scroll-body - Fixed header with scrollable body

Examples

Basic Data Table

<div class="table-container">
    <table class="table table--hover table--striped">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>john@example.com</td>
                <td class="actions-cell">
                    <div class="table-actions">
                        <button class="btn btn--sm">Edit</button>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Time Entries Table

<div class="table-responsive">
    <table class="table table--hover table--time-entries">
        <thead>
            <tr>
                <th>Date</th>
                <th>Time</th>
                <th>Duration</th>
                <th>Project</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="date-cell">
                    <span class="date-day">15</span>
                    <span class="date-month">JAN</span>
                </td>
                <td class="time-cell">09:00 - 17:00</td>
                <td class="duration-cell">8h 00m</td>
                <td>TimeTrack Development</td>
            </tr>
        </tbody>
    </table>
</div>

Mobile-Friendly Table

<div class="table-container">
    <table class="table table--hover table--mobile-stack">
        <thead>
            <tr>
                <th>User</th>
                <th>Role</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td data-label="User">
                    <img src="avatar.jpg" class="table-avatar" alt="">
                    Jane Smith
                </td>
                <td data-label="Role">Administrator</td>
                <td data-label="Status">
                    <span class="table-badge table-badge--success">Active</span>
                </td>
                <td data-label="Actions" class="actions-cell">
                    <div class="table-actions">
                        <button class="btn btn--sm">Edit</button>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Removing Old Styles

Once migration is complete, the following CSS can be removed:

1. From style.css:

   • .data-table definitions (lines 1510-1537)
   • .users-table, .projects-table definitions (lines 1286-1313)
   • .time-history definitions (lines 788-815)

2. From time-tracking.css:

   • .entries-table definitions (lines 334-355)

3. From dark mode CSS:

   • Individual table class overrides can be simplified

Testing Checklist

• All tables display correctly in light mode
• All tables display correctly in dark mode
• Hover effects work
• Mobile responsiveness works
• Table actions are clickable
• Badges and status indicators display correctly
• No visual regressions from previous implementation