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

style: improve calendar event hint layout and rendering

Browse Source 
- Updated CSS for `.calendar-event-hint-rows` and `.calendar-event-hint-row` to enhance layout using table display properties for better alignment.
- Adjusted JavaScript in `hints.js` to modify the separator between time and name in duty marker hints, improving visual clarity.
- Ensured consistent styling and spacing for better readability of duty hints in the calendar.
This commit is contained in:
Nikolay Tatarinov
2026-02-19 15:48:09 +03:00
parent dd14d48824
commit a5f7a5a0ef
2 changed files with 25 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
webapp/js/hints.js
View File

@@ -158,7 +158,7 @@ export function getDutyMarkerHintContent(marker) {
const rows = getDutyMarkerRows(dutyItems, hintDay, " - "); const rows = getDutyMarkerRows(dutyItems, hintDay, " - ");
body = rows body = rows
.map((r) => .map((r) =>
r.timePrefix ? r.timePrefix + " — " + r.fullName : r.fullName r.timePrefix ? r.timePrefix + " - " + r.fullName : r.fullName
) )
.join("\n"); .join("\n");
} else { } else {
@@ -186,14 +186,15 @@ export function getDutyMarkerHintHtml(marker) {
const rows = getDutyMarkerRows(dutyItems, hintDay, nbsp); const rows = getDutyMarkerRows(dutyItems, hintDay, nbsp);
rowHtmls = rows.map((r) => { rowHtmls = rows.map((r) => {
const timeHtml = r.timePrefix ? escapeHtml(r.timePrefix) : ""; const timeHtml = r.timePrefix ? escapeHtml(r.timePrefix) : "";
const namePart = r.timePrefix const sepHtml = r.timePrefix ? '<span class="calendar-event-hint-sep">-</span>' : '<span class="calendar-event-hint-sep"></span>';
? " — " + escapeHtml(r.fullName) const nameHtml = escapeHtml(r.fullName);
: escapeHtml(r.fullName);
return ( return (
'<span class="calendar-event-hint-time">' + '<span class="calendar-event-hint-time">' +
timeHtml + timeHtml +
'</span><span class="calendar-event-hint-name">' + "</span>" +
namePart + sepHtml +
'<span class="calendar-event-hint-name">' +
nameHtml +
"</span>" "</span>"
); );
}); });
@@ -201,7 +202,7 @@ export function getDutyMarkerHintHtml(marker) {
rowHtmls = (names ? names.split("\n") : []).map((fullName) => { rowHtmls = (names ? names.split("\n") : []).map((fullName) => {
const nameHtml = escapeHtml(fullName.trim()); const nameHtml = escapeHtml(fullName.trim());
return ( return (
'<span class="calendar-event-hint-time"></span><span class="calendar-event-hint-name">' + '<span class="calendar-event-hint-time"></span><span class="calendar-event-hint-sep"></span><span class="calendar-event-hint-name">' +
nameHtml + nameHtml +
"</span>" "</span>"
); );

26
webapp/style.css
View File

@@ -219,6 +219,7 @@ body {
z-index: 1000; z-index: 1000;
width: max-content; width: max-content;
max-width: min(98vw, 900px); max-width: min(98vw, 900px);
min-width: 0;
padding: 8px 12px; padding: 8px 12px;
background: var(--surface); background: var(--surface);
color: var(--text); color: var(--text);
@@ -241,25 +242,32 @@ body {
} }
.calendar-event-hint-rows { .calendar-event-hint-rows {
display: flex; display: table;
flex-direction: column; width: min-content;
gap: 2px; table-layout: auto;
border-collapse: separate;
border-spacing: 0 2px;
} }
.calendar-event-hint-row { .calendar-event-hint-row {
display: table; display: table-row;
width: max-content;
min-width: max-content;
white-space: nowrap; white-space: nowrap;
} }
.calendar-event-hint-row .calendar-event-hint-time { .calendar-event-hint-row .calendar-event-hint-time {
display: table-cell; display: table-cell;
white-space: nowrap; white-space: nowrap;
width: 7.5em; width: 1%;
min-width: 7.5em;
vertical-align: top; vertical-align: top;
padding-right: 0.35em; text-align: right;
padding-right: 0.15em;
}
.calendar-event-hint-row .calendar-event-hint-sep {
display: table-cell;
width: 1em;
vertical-align: top;
padding-right: 0.1em;
} }
.calendar-event-hint-row .calendar-event-hint-name { .calendar-event-hint-row .calendar-event-hint-name {