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 {
font-weight: 500;
font-weight: 700;
color: #0f172a;
}
@ -924,7 +924,7 @@
background: #f8fafc;
border-radius: 0.35rem;
padding: 0.35rem 0.5rem;
color: #334155;
color: #1e293b;
font-weight: 500;
line-height: 1.35;
border-left: 3px solid #cbd5e1;
@ -933,6 +933,12 @@
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 {
background: #f1f5f9;
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 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) {
const otherNames = otherTeams.map(t => t.name).join(', ');
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;
}).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}
</div>`;
} else if (team.id !== null) {
@ -585,8 +585,8 @@ document.addEventListener('DOMContentLoaded', function () {
${escapeHtml(itv.title)}
</div>
${itv.member_name ? `
<div class="teams-daily-itv-member text-muted 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)}
<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 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>
@ -3169,7 +3169,7 @@ document.addEventListener('DOMContentLoaded', function () {
}
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.fillText(row.label || gettext('Membre'), 16, drawTop + row.height / 2 - 6);
if (row.teamName) {
@ -4615,7 +4615,7 @@ document.addEventListener('DOMContentLoaded', function () {
if (intervention.member_name) {
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.textContent = intervention.member_name;
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 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) {
const otherNames = otherTeams.map(t => t.name).join(', ');
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;
}).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.cursor = 'pointer';
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)}
</div>
<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}
</div>
</div>