Arnike/duty-teller
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 14 Wiki Activity

Enhance duty timeline rendering and styling
All checks were successful
CI / lint-and-test (push) Successful in 15s
Details

Browse Source 
- Updated the HTML structure for duty timeline rows to include a date cell with a visual track, improving the layout and user experience.
- Modified CSS to define new variables for timeline date and track widths, enhancing flexibility in styling.
- Improved the styling of duty timeline elements, including today’s duties, to provide clearer visual cues and better alignment.
- Ensured consistent display of date labels and added visual enhancements for better accessibility and readability.
This commit is contained in:
Nikolay Tatarinov
2026-02-18 14:53:11 +03:00
parent 263c2fefbd
commit 1a0c49967e
2 changed files with 119 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
webapp/app.js
View File

@@ -520,17 +520,20 @@
dates.forEach(function (date) {
const isToday = date === todayKey;
const dayClass = "duty-timeline-day" + (isToday ? " duty-timeline-day--today" : "");
const dateLabel = isToday ? "Сегодня, " + dateKeyToDDMM(date) : dateKeyToDDMM(date);
const dateLabel = isToday ? dateKeyToDDMM(date) : dateKeyToDDMM(date);
const dateCellHtml = isToday
? "<span class=\"duty-timeline-date\"><span class=\"duty-timeline-date-label\">Сегодня</span><span class=\"duty-timeline-date-dot\" aria-hidden=\"true\"></span><span class=\"duty-timeline-date-day\">" + escapeHtml(dateLabel) + "</span></span>"
: "<span class=\"duty-timeline-date\">" + escapeHtml(dateLabel) + "</span>";
const dayDuties = duties.filter(function (d) { return localDateString(new Date(d.start_at)) === date; }).sort(function (a, b) { return new Date(a.start_at) - new Date(b.start_at); });
let dayHtml = "";
dayDuties.forEach(function (d) {
const start = new Date(d.start_at);
const end = new Date(d.end_at);
const isCurrent = isToday && start <= now && now < end;
dayHtml += "<div class=\"duty-timeline-row\"><span class=\"duty-timeline-date\">" + escapeHtml(dateLabel) + "</span><div class=\"duty-timeline-card-wrap\">" + dutyTimelineCardHtml(d, isCurrent) + "</div></div>";
dayHtml += "<div class=\"duty-timeline-row\">" + dateCellHtml + "<span class=\"duty-timeline-track\" aria-hidden=\"true\"></span><div class=\"duty-timeline-card-wrap\">" + dutyTimelineCardHtml(d, isCurrent) + "</div></div>";
});
if (dayDuties.length === 0 && isToday) {
dayHtml += "<div class=\"duty-timeline-row duty-timeline-row--empty\"><span class=\"duty-timeline-date\">" + escapeHtml(dateLabel) + "</span><div class=\"duty-timeline-card-wrap\"></div></div>";
dayHtml += "<div class=\"duty-timeline-row duty-timeline-row--empty\">" + dateCellHtml + "<span class=\"duty-timeline-track\" aria-hidden=\"true\"></span><div class=\"duty-timeline-card-wrap\"></div></div>";
}
fullHtml += "<div class=\"" + dayClass + "\" data-date=\"" + escapeHtml(date) + "\">" + dayHtml + "</div>";
});