Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improves header animation performance

Browse source 
Simplifies header animation logic by leveraging CSS Grid for height transitions.

This change removes the direct height animation of the calendar header and relies on CSS Grid's auto row feature to manage the header expansion.
It also removes the manual spacer height calculations in Typescript, and relies on CSS variables to control this.
This results in a smoother and more efficient animation, especially when all-day events are present.
This commit is contained in:
Janus Knudsen 2025-09-01 20:13:15 +02:00
parent ae42de1f3b
commit 58d6ad2ed2
3 changed files with 2 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

11
wwwroot/css/calendar-layout-css.css
View file

@ -151,15 +151,11 @@ swp-calendar-header {
top: 0;
z-index: 3; /* Lower than header-spacer so it slides under during horizontal scroll */
height: calc(var(--header-height) + var(--all-day-row-height)); /* Same calculation as spacers */
transition: height 150ms ease;
/* Force scrollbar to appear for alignment */
overflow-y: scroll;
overflow-x: hidden;
/* Ensure there's scrollable content by adding min-height slightly larger than container */
min-height: calc(var(--header-height) + var(--all-day-row-height) + 1px);
/* Firefox - hide scrollbar but keep space */
scrollbar-width: auto; /* Normal width to match content scrollbar */
scrollbar-color: transparent transparent;
@ -273,16 +269,11 @@ swp-allday-container {
grid-row: 2; /* Second row of calendar header */
display: grid;
grid-template-columns: repeat(var(--grid-columns, 7), minmax(var(--day-column-min-width), 1fr));
grid-template-rows: repeat(1, var(--all-day-event-height)); /* Default to 1 row, dynamically updated by JS */
grid-template-rows: repeat(1, auto); /* Default to 1 row, dynamically updated by JS */
gap: 2px;
padding: 2px;
align-items: center;
overflow: hidden;
/* Initially hidden - no CSS transitions, use Web Animations API */
height: var(--all-day-row-height);
min-height: 0;
opacity: 0;
}
/* All-day events in containers */