Valogeo/loko
Valogeo/loko
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: improve typography and contrast for member names in calendar UI

Browse source
This commit is contained in:
kdeterme 2026-09-14 10:19:44 +02:00
parent 099043ea8b
commit 9522eed8f8
2 changed files with 17 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
loko/interventions/static/interventions/calendar/interventions_calendar.css
View file

@ -476,7 +476,7 @@
} }
.members-timeline__row--member .members-timeline__label-col { .members-timeline__row--member .members-timeline__label-col {
font-weight: 500; font-weight: 700;
color: #0f172a; color: #0f172a;
} }
@ -924,7 +924,7 @@
background: #f8fafc; background: #f8fafc;
border-radius: 0.35rem; border-radius: 0.35rem;
padding: 0.35rem 0.5rem; padding: 0.35rem 0.5rem;
color: #334155; color: #1e293b;
font-weight: 500; font-weight: 500;
line-height: 1.35; line-height: 1.35;
border-left: 3px solid #cbd5e1; border-left: 3px solid #cbd5e1;
@ -933,6 +933,12 @@
transition: background-color 0.15s ease, box-shadow 0.15s ease; transition: background-color 0.15s ease, box-shadow 0.15s ease;
} }
.team-members-list strong,
.team-members-list .member-name {
font-weight: 700;
color: #0f172a;
}
.team-members-list:hover { .team-members-list:hover {
background: #f1f5f9; background: #f1f5f9;
box-shadow: 0 2px 5px rgba(0,0,0,0.08); box-shadow: 0 2px 5px rgba(0,0,0,0.08);

18
loko/interventions/static/interventions/calendar/interventions_calendar.js
View file

@ -539,7 +539,7 @@ document.addEventListener('DOMContentLoaded', function () {
const isMultiTeam = typeof m === 'object' && m ? Boolean(m.is_multi_team) : false; const isMultiTeam = typeof m === 'object' && m ? Boolean(m.is_multi_team) : false;
const otherTeams = typeof m === 'object' && m && m.other_teams ? m.other_teams : []; const otherTeams = typeof m === 'object' && m && m.other_teams ? m.other_teams : [];
let memberNameHtml = escapeHtml(name); let memberNameHtml = `<strong class="fw-bold text-dark member-name">${escapeHtml(name)}</strong>`;
if (isMultiTeam) { if (isMultiTeam) {
const otherNames = otherTeams.map(t => t.name).join(', '); const otherNames = otherTeams.map(t => t.name).join(', ');
const tooltip = otherNames ? `${gettext('Planifié aussi dans')} : ${otherNames}` : gettext('Planifié dans plusieurs équipes ce jour'); const tooltip = otherNames ? `${gettext('Planifié aussi dans')} : ${otherNames}` : gettext('Planifié dans plusieurs équipes ce jour');
@ -550,7 +550,7 @@ document.addEventListener('DOMContentLoaded', function () {
} }
return memberNameHtml; return memberNameHtml;
}).join(', '); }).join(', ');
membersHTML = `<div class="team-members-list clickable-team-members text-muted small fst-italic mb-2" style="border-left: 3px solid ${teamColor}; cursor: pointer;" title="${escapeHtml(titleTooltip)}" data-team-id="${team.id}" data-date="${day.date}" data-team-name="${escapeHtml(team.name)}"> membersHTML = `<div class="team-members-list clickable-team-members small mb-2" style="border-left: 3px solid ${teamColor}; cursor: pointer;" title="${escapeHtml(titleTooltip)}" data-team-id="${team.id}" data-date="${day.date}" data-team-name="${escapeHtml(team.name)}">
<i class="bi bi-people-fill me-1" style="color: ${teamColor};"></i>${formattedMembers} <i class="bi bi-people-fill me-1" style="color: ${teamColor};"></i>${formattedMembers}
</div>`; </div>`;
} else if (team.id !== null) { } else if (team.id !== null) {
@ -585,8 +585,8 @@ document.addEventListener('DOMContentLoaded', function () {
${escapeHtml(itv.title)} ${escapeHtml(itv.title)}
</div> </div>
${itv.member_name ? ` ${itv.member_name ? `
<div class="teams-daily-itv-member text-muted small mt-1"> <div class="teams-daily-itv-member small mt-1">
<i class="bi bi-person me-1"></i>${(isMemberHistoryAllowed && itv.member_id) ? `<a href="#" class="member-history-link text-decoration-none text-muted fw-medium" data-member-id="${itv.member_id}">${escapeHtml(itv.member_name)}</a>` : escapeHtml(itv.member_name)} <i class="bi bi-person me-1"></i>${(isMemberHistoryAllowed && itv.member_id) ? `<a href="#" class="member-history-link text-decoration-none fw-bold text-dark" data-member-id="${itv.member_id}">${escapeHtml(itv.member_name)}</a>` : `<strong class="fw-bold text-dark">${escapeHtml(itv.member_name)}</strong>`}
</div> </div>
` : ''} ` : ''}
</div> </div>
@ -3169,7 +3169,7 @@ document.addEventListener('DOMContentLoaded', function () {
} }
ctx.fillStyle = '#0f172a'; ctx.fillStyle = '#0f172a';
ctx.font = '600 13px "Inter", "Segoe UI", sans-serif'; ctx.font = '700 13px "Inter", "Segoe UI", sans-serif';
ctx.textBaseline = 'middle'; ctx.textBaseline = 'middle';
ctx.fillText(row.label || gettext('Membre'), 16, drawTop + row.height / 2 - 6); ctx.fillText(row.label || gettext('Membre'), 16, drawTop + row.height / 2 - 6);
if (row.teamName) { if (row.teamName) {
@ -4615,7 +4615,7 @@ document.addEventListener('DOMContentLoaded', function () {
if (intervention.member_name) { if (intervention.member_name) {
const assigneeBadge = document.createElement('span'); const assigneeBadge = document.createElement('span');
assigneeBadge.className = 'badge rounded-pill text-bg-light text-secondary border border-secondary'; assigneeBadge.className = 'badge rounded-pill text-bg-light text-dark border border-secondary fw-bold';
assigneeBadge.style.fontSize = '0.7rem'; assigneeBadge.style.fontSize = '0.7rem';
assigneeBadge.textContent = intervention.member_name; assigneeBadge.textContent = intervention.member_name;
badgesColumn.appendChild(assigneeBadge); badgesColumn.appendChild(assigneeBadge);
@ -5358,7 +5358,7 @@ function updateTeamsDailyGridCell(teamId, dateStr, currentMembers, teamObj) {
const isMultiTeam = typeof m === 'object' && m ? Boolean(m.is_multi_team) : false; const isMultiTeam = typeof m === 'object' && m ? Boolean(m.is_multi_team) : false;
const otherTeams = typeof m === 'object' && m && m.other_teams ? m.other_teams : []; const otherTeams = typeof m === 'object' && m && m.other_teams ? m.other_teams : [];
let memberNameHtml = escapeHtml(name); let memberNameHtml = `<strong class="fw-bold text-dark member-name">${escapeHtml(name)}</strong>`;
if (isMultiTeam) { if (isMultiTeam) {
const otherNames = otherTeams.map(t => t.name).join(', '); const otherNames = otherTeams.map(t => t.name).join(', ');
const tooltip = otherNames ? `${gettext('Planifié aussi dans')} : ${otherNames}` : gettext('Planifié dans plusieurs équipes ce jour'); const tooltip = otherNames ? `${gettext('Planifié aussi dans')} : ${otherNames}` : gettext('Planifié dans plusieurs équipes ce jour');
@ -5370,7 +5370,7 @@ function updateTeamsDailyGridCell(teamId, dateStr, currentMembers, teamObj) {
return memberNameHtml; return memberNameHtml;
}).join(', '); }).join(', ');
membersContainer.className = 'team-members-list clickable-team-members text-muted small fst-italic mb-2'; membersContainer.className = 'team-members-list clickable-team-members small mb-2';
membersContainer.style.borderLeft = `3px solid ${teamColor}`; membersContainer.style.borderLeft = `3px solid ${teamColor}`;
membersContainer.style.cursor = 'pointer'; membersContainer.style.cursor = 'pointer';
membersContainer.innerHTML = `<i class="bi bi-people-fill me-1" style="color: ${teamColor};"></i>${formattedMembers}`; membersContainer.innerHTML = `<i class="bi bi-people-fill me-1" style="color: ${teamColor};"></i>${formattedMembers}`;
@ -5489,7 +5489,7 @@ function loadTeamDailyMembersModalData(teamId, dateStr) {
${escapeHtml(initials)} ${escapeHtml(initials)}
</div> </div>
<div class="overflow-hidden"> <div class="overflow-hidden">
<span class="fw-semibold text-dark ${isAbsent ? 'text-decoration-line-through opacity-75' : ''}">${escapeHtml(m.name)}</span> <span class="fw-bold text-dark ${isAbsent ? 'text-decoration-line-through opacity-75' : ''}">${escapeHtml(m.name)}</span>
${badgesHtml} ${badgesHtml}
</div> </div>
</div> </div>