diff --git a/loko/interventions/static/interventions/calendar/interventions_calendar.css b/loko/interventions/static/interventions/calendar/interventions_calendar.css index 8af292d..f2c89fc 100644 --- a/loko/interventions/static/interventions/calendar/interventions_calendar.css +++ b/loko/interventions/static/interventions/calendar/interventions_calendar.css @@ -828,13 +828,24 @@ .teams-daily-table th, .teams-daily-table td { - padding: 0.75rem; + padding: 0.6rem 0.75rem; vertical-align: top; - border: 1px solid rgba(15, 23, 42, 0.08); + border: 1px solid rgba(15, 23, 42, 0.12); } -.teams-daily-table tbody td { - border-bottom: 2px solid rgba(15, 23, 42, 0.16); +/* Lignes de séparation très marquées entre équipes */ +.teams-daily-table tbody tr.teams-daily-team-row td { + border-bottom: 3px solid #64748b !important; + padding-top: 8px; + padding-bottom: 10px; +} + +.teams-daily-table tbody tr.teams-daily-team-row:nth-child(even) td.sticky-left { + background-color: #f1f5f9 !important; +} + +.teams-daily-table tbody tr.teams-daily-team-row:nth-child(even) td.teams-daily-grid-cell:not(.today-cell) { + background-color: #f8fafc; } .teams-daily-table thead th { @@ -848,24 +859,37 @@ top: 0; z-index: 5; box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08); + border-bottom: 2px solid #cbd5e1; +} + +.teams-daily-table thead th.day-header { + min-width: 180px; + width: 200px; + max-width: 200px; } /* Left sticky team column */ .teams-daily-table .sticky-left { position: sticky; left: 0; - background-color: #f8fafc !important; + background-color: #ffffff; z-index: 6; - box-shadow: 2px 0 5px rgba(15, 23, 42, 0.05); + box-shadow: 2px 0 5px rgba(15, 23, 42, 0.06); + border-right: 2px solid #94a3b8 !important; + min-width: 220px; + width: 220px; + max-width: 240px; } .teams-daily-table thead th.sticky-left { z-index: 7; + background-color: #f8fafc !important; box-shadow: 2px 2px 0 rgba(15, 23, 42, 0.08); + border-right: 2px solid #94a3b8 !important; } .team-cell-title { - font-size: 0.95rem; + font-size: 0.92rem; color: #0f172a; font-weight: 700; } @@ -879,30 +903,32 @@ /* Grid cells & today highlighted column */ .teams-daily-grid-cell { background-color: #fff; - min-width: 220px; - width: 220px; - transition: background-color 0.2s ease; + min-width: 180px; + width: 200px; + max-width: 200px; + transition: background-color 0.15s ease; } .teams-daily-grid-cell.today-cell { - background-color: rgba(13, 110, 253, 0.02) !important; + background-color: #f3f8ff !important; } .today-column-header { - background: rgba(13, 110, 253, 0.08) !important; - color: #0d6efd !important; + background: linear-gradient(180deg, #e7f1ff 0%, #d0e2ff 100%) !important; + color: #0b5ed7 !important; border-bottom: 2px solid #0d6efd !important; } /* Team composition list */ .team-members-list { - background: #f1f5f9; - border-radius: 0.5rem; - padding: 0.4rem 0.6rem; - color: #475569; + background: #f8fafc; + border-radius: 0.35rem; + padding: 0.35rem 0.5rem; + color: #334155; font-weight: 500; - line-height: 1.4; - border-left: 2px solid #cbd5e1; + line-height: 1.35; + border-left: 3px solid #cbd5e1; + box-shadow: 0 1px 2px rgba(0,0,0,0.03); } /* Stack of interventions */ diff --git a/loko/interventions/static/interventions/calendar/interventions_calendar.js b/loko/interventions/static/interventions/calendar/interventions_calendar.js index 5af5e42..815b163 100644 --- a/loko/interventions/static/interventions/calendar/interventions_calendar.js +++ b/loko/interventions/static/interventions/calendar/interventions_calendar.js @@ -417,6 +417,14 @@ document.addEventListener('DOMContentLoaded', function () { } } + const TEAM_PALETTE = [ + '#0d6efd', '#6610f2', '#6f42c1', '#d63384', '#fd7e14', + '#198754', '#20c997', '#0dcaf0', '#495057', '#e83e8c' + ]; + function getTeamColor(teamId) { + return TEAM_PALETTE[Math.abs(teamId || 0) % TEAM_PALETTE.length]; + } + function renderTeamsDailyGrid(data) { const todayStr = formatDateISO(new Date()); const headerRow = document.getElementById('teams-daily-table-header'); @@ -454,14 +462,15 @@ document.addEventListener('DOMContentLoaded', function () { data.days.forEach(day => { const th = document.createElement('th'); th.className = 'day-header text-center align-middle'; - th.style.minWidth = '200px'; + th.style.minWidth = '180px'; th.style.width = '200px'; + th.style.maxWidth = '200px'; const dateObj = new Date(day.date); th.textContent = dayFormatter.format(dateObj); if (day.is_today) { - th.classList.add('bg-primary-subtle', 'border-primary', 'text-primary', 'today-column-header'); + th.classList.add('today-column-header'); } headerRow.appendChild(th); }); @@ -477,15 +486,30 @@ document.addEventListener('DOMContentLoaded', function () { data.teams.forEach(team => { const tr = document.createElement('tr'); + tr.className = 'teams-daily-team-row'; + + const teamColor = getTeamColor(team.id); const tdTeam = document.createElement('td'); - tdTeam.className = 'sticky-left bg-light font-weight-bold align-middle'; + tdTeam.className = 'sticky-left align-middle'; tdTeam.style.zIndex = '2'; - let teamHTML = `
| + | {% translate "Équipes / Jours" %} |
|---|