refactor: clean up CSS styles and enhance JavaScript functionality
Some checks failed
CI / lint-and-test (push) Failing after 3s
Some checks failed
CI / lint-and-test (push) Failing after 3s
- Removed outdated CSS styles related to the calendar sticky behavior and duty item animations to streamline the stylesheet. - Added a reflow trigger in the JavaScript function to ensure proper rendering of the day detail panel when opened, improving user experience. - Enhanced overall code clarity by eliminating unnecessary styles and improving the animation handling logic.
This commit is contained in:
@@ -186,6 +186,8 @@ function showAsBottomSheet() {
|
|||||||
|
|
||||||
requestAnimationFrame(() => {
|
requestAnimationFrame(() => {
|
||||||
requestAnimationFrame(() => {
|
requestAnimationFrame(() => {
|
||||||
|
// Force reflow so WebView paints the "closed" state before we add --open
|
||||||
|
void panelEl.offsetHeight;
|
||||||
overlayEl.classList.add("day-detail-overlay--visible");
|
overlayEl.classList.add("day-detail-overlay--visible");
|
||||||
panelEl.classList.add("day-detail-panel--open");
|
panelEl.classList.add("day-detail-panel--open");
|
||||||
const closeBtn = panelEl.querySelector(".day-detail-close");
|
const closeBtn = panelEl.querySelector(".day-detail-close");
|
||||||
|
|||||||
@@ -163,14 +163,6 @@ body {
|
|||||||
transition: box-shadow var(--transition-fast) ease-out;
|
transition: box-shadow var(--transition-fast) ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.calendar-sticky.is-scrolled {
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-theme="dark"] .calendar-sticky.is-scrolled {
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === Calendar grid & day cells */
|
/* === Calendar grid & day cells */
|
||||||
.calendar {
|
.calendar {
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -808,23 +800,6 @@ body.day-detail-sheet-open {
|
|||||||
.duty-item--current {
|
.duty-item--current {
|
||||||
border-left-color: var(--today);
|
border-left-color: var(--today);
|
||||||
background: color-mix(in srgb, var(--today) 12%, var(--surface));
|
background: color-mix(in srgb, var(--today) 12%, var(--surface));
|
||||||
animation: duty-current-pulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
|
||||||
.duty-item--current {
|
|
||||||
animation: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes duty-current-pulse {
|
|
||||||
0%,
|
|
||||||
100% {
|
|
||||||
box-shadow: 0 0 0 0 color-mix(in srgb, var(--today) 30%, transparent);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
box-shadow: 0 0 0 4px color-mix(in srgb, var(--today) 15%, transparent);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* === Loading / error / access denied */
|
/* === Loading / error / access denied */
|
||||||
|
|||||||
Reference in New Issue
Block a user