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

feat: enhance loading indicator and improve UI transitions
All checks were successful
CI / lint-and-test (push) Successful in 23s
Details

Browse Source 
- Updated the loading indicator in `index.html` to include a spinner and text for better user feedback during loading.
- Added CSS transitions for smoother visual effects on various elements, including buttons and overlays, enhancing overall user experience.
- Refactored JavaScript functions to utilize requestAnimationFrame for improved animation performance when showing and hiding panels.
- Implemented smooth scrolling behavior for duty list navigation, improving usability when focusing on current duties.
This commit is contained in:
Nikolay Tatarinov
2026-02-21 20:00:49 +03:00
parent 44f9331231
commit 5faced9563
6 changed files with 230 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
webapp/js/dayDetail.js
View File

@@ -166,9 +166,12 @@ function positionPopover(panel, cellRect) {
/**
* Show panel as bottom sheet (fixed at bottom).
* Renders panel closed (translateY(100%)), then on next frame adds open/visible classes for animation.
*/
function showAsBottomSheet() {
if (!panelEl || !overlayEl) return;
overlayEl.classList.remove("day-detail-overlay--visible");
panelEl.classList.remove("day-detail-panel--open");
overlayEl.hidden = false;
panelEl.classList.add("day-detail-panel--sheet");
panelEl.style.left = "";
@@ -181,8 +184,14 @@ function showAsBottomSheet() {
document.body.classList.add("day-detail-sheet-open");
document.body.style.top = "-" + sheetScrollY + "px";
const closeBtn = panelEl.querySelector(".day-detail-close");
if (closeBtn) closeBtn.focus();
requestAnimationFrame(() => {
requestAnimationFrame(() => {
overlayEl.classList.add("day-detail-overlay--visible");
panelEl.classList.add("day-detail-panel--open");
const closeBtn = panelEl.querySelector(".day-detail-close");
if (closeBtn) closeBtn.focus();
});
});
}
/**
@@ -205,14 +214,48 @@ function showAsPopover(cellRect) {
setTimeout(() => document.addEventListener("click", popoverCloseHandler), 0);
}
/** Timeout fallback (ms) if transitionend does not fire (e.g. prefers-reduced-motion). */
const SHEET_CLOSE_TIMEOUT_MS = 400;
/**
* Hide panel and overlay.
* Hide panel and overlay. For bottom sheet: remove open classes, wait for transitionend (or timeout), then cleanup.
*/
export function hideDayDetail() {
if (popoverCloseHandler) {
document.removeEventListener("click", popoverCloseHandler);
popoverCloseHandler = null;
}
const isSheet =
panelEl &&
overlayEl &&
panelEl.classList.contains("day-detail-panel--sheet") &&
document.body.classList.contains("day-detail-sheet-open");
if (isSheet) {
panelEl.classList.remove("day-detail-panel--open");
overlayEl.classList.remove("day-detail-overlay--visible");
const finishClose = () => {
if (closeTimeoutId != null) clearTimeout(closeTimeoutId);
panelEl.removeEventListener("transitionend", onTransitionEnd);
document.body.classList.remove("day-detail-sheet-open");
document.body.style.top = "";
window.scrollTo(0, sheetScrollY);
panelEl.classList.remove("day-detail-panel--sheet");
panelEl.hidden = true;
overlayEl.hidden = true;
};
let closeTimeoutId = setTimeout(finishClose, SHEET_CLOSE_TIMEOUT_MS);
const onTransitionEnd = (e) => {
if (e.target !== panelEl || e.propertyName !== "transform") return;
finishClose();
};
panelEl.addEventListener("transitionend", onTransitionEnd);
return;
}
if (document.body.classList.contains("day-detail-sheet-open")) {
document.body.classList.remove("day-detail-sheet-open");
document.body.style.top = "";

4
webapp/js/dutyList.js
View File

@@ -168,10 +168,10 @@ export function renderDutyList(duties) {
const calendarHeight = calendarSticky.offsetHeight;
const top = el.getBoundingClientRect().top + window.scrollY;
const scrollTop = Math.max(0, top - calendarHeight);
window.scrollTo({ top: scrollTop, behavior: "auto" });
window.scrollTo({ top: scrollTop, behavior: "smooth" });
});
} else {
el.scrollIntoView({ behavior: "auto", block: "start" });
el.scrollIntoView({ behavior: "smooth", block: "start" });
}
};
const currentDutyCard = dutyListEl.querySelector(".duty-item--current");

51
webapp/js/hints.js
View File

@@ -16,6 +16,7 @@ export function positionHint(hintEl, btnRect) {
const vw = document.documentElement.clientWidth;
const margin = 12;
hintEl.classList.remove("below");
hintEl.classList.remove("calendar-event-hint--visible");
hintEl.style.left = btnRect.left + "px";
hintEl.style.top = btnRect.top - 4 + "px";
hintEl.hidden = false;
@@ -45,6 +46,9 @@ export function positionHint(hintEl, btnRect) {
hintEl.style.left = left2 + "px";
});
}
requestAnimationFrame(() => {
hintEl.classList.add("calendar-event-hint--visible");
});
});
}
@@ -268,8 +272,11 @@ export function bindInfoButtonTooltips() {
positionHint(hintEl, rect);
hintEl.dataset.active = "1";
} else {
hintEl.hidden = true;
hintEl.removeAttribute("data-active");
hintEl.classList.remove("calendar-event-hint--visible");
setTimeout(() => {
hintEl.hidden = true;
hintEl.removeAttribute("data-active");
}, 150);
}
});
});
@@ -277,14 +284,20 @@ export function bindInfoButtonTooltips() {
document._calendarHintBound = true;
document.addEventListener("click", () => {
if (hintEl.dataset.active) {
hintEl.hidden = true;
hintEl.removeAttribute("data-active");
hintEl.classList.remove("calendar-event-hint--visible");
setTimeout(() => {
hintEl.hidden = true;
hintEl.removeAttribute("data-active");
}, 150);
}
});
document.addEventListener("keydown", (e) => {
if (e.key === "Escape" && hintEl.dataset.active) {
hintEl.hidden = true;
hintEl.removeAttribute("data-active");
hintEl.classList.remove("calendar-event-hint--visible");
setTimeout(() => {
hintEl.hidden = true;
hintEl.removeAttribute("data-active");
}, 150);
}
});
}
@@ -324,6 +337,7 @@ export function bindDutyMarkerTooltips() {
});
marker.addEventListener("mouseleave", () => {
if (hintEl.dataset.active) return;
hintEl.classList.remove("calendar-event-hint--visible");
hideTimeout = setTimeout(() => {
hintEl.hidden = true;
hideTimeout = null;
@@ -332,8 +346,11 @@ export function bindDutyMarkerTooltips() {
marker.addEventListener("click", (e) => {
e.stopPropagation();
if (marker.classList.contains("calendar-marker-active")) {
hintEl.hidden = true;
hintEl.removeAttribute("data-active");
hintEl.classList.remove("calendar-event-hint--visible");
setTimeout(() => {
hintEl.hidden = true;
hintEl.removeAttribute("data-active");
}, 150);
marker.classList.remove("calendar-marker-active");
return;
}
@@ -355,16 +372,22 @@ export function bindDutyMarkerTooltips() {
document._dutyMarkerHintBound = true;
document.addEventListener("click", () => {
if (hintEl.dataset.active) {
hintEl.hidden = true;
hintEl.removeAttribute("data-active");
clearActiveDutyMarker();
hintEl.classList.remove("calendar-event-hint--visible");
setTimeout(() => {
hintEl.hidden = true;
hintEl.removeAttribute("data-active");
clearActiveDutyMarker();
}, 150);
}
});
document.addEventListener("keydown", (e) => {
if (e.key === "Escape" && hintEl.dataset.active) {
hintEl.hidden = true;
hintEl.removeAttribute("data-active");
clearActiveDutyMarker();
hintEl.classList.remove("calendar-event-hint--visible");
setTimeout(() => {
hintEl.hidden = true;
hintEl.removeAttribute("data-active");
clearActiveDutyMarker();
}, 150);
}
});
}

3
webapp/js/main.js
View File

@@ -38,7 +38,8 @@ initTheme();
state.lang = getLang();
document.documentElement.lang = state.lang;
document.title = t(state.lang, "app.title");
if (loadingEl) loadingEl.textContent = t(state.lang, "loading");
const loadingTextEl = loadingEl ? loadingEl.querySelector(".loading__text") : null;
if (loadingTextEl) loadingTextEl.textContent = t(state.lang, "loading");
const dayLabels = weekdayLabels(state.lang);
if (weekdaysEl) {
const spans = weekdaysEl.querySelectorAll("span");