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

Adds drawer animation for schedule page container

Browse source 
Enhances user experience by implementing smooth container resize animation when opening and closing the schedule drawer

Uses Web Animations API to dynamically adjust page container styling with transition effects
This commit is contained in:
Janus C. H. Knudsen 2026-01-15 01:17:59 +01:00
parent 2a57917ebb
commit 6746e876d7
2 changed files with 28 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

27
PlanTempus.Application/wwwroot/ts/modules/employees.ts
View file

@ -1035,6 +1035,24 @@ class ScheduleController {
table.style.width = `${rect.width}px`;
}
// Animate container med Web Animations API
const container = document.querySelector('swp-tab-content[data-tab="schedule"] swp-page-container') as HTMLElement;
if (container) {
const currentStyles = getComputedStyle(container);
const currentMaxWidth = currentStyles.maxWidth;
const currentMargin = currentStyles.margin;
const currentPaddingRight = currentStyles.paddingRight;
container.animate([
{ maxWidth: currentMaxWidth, margin: currentMargin, paddingRight: currentPaddingRight },
{ maxWidth: 'none', margin: '0px', paddingRight: '420px' }
], {
duration: 300,
easing: 'ease',
fill: 'forwards'
});
}
this.drawer?.classList.add('open');
document.body.classList.add('schedule-drawer-open');
}
@ -1043,6 +1061,15 @@ class ScheduleController {
* Close the schedule drawer
*/
private closeDrawer(): void {
const container = document.querySelector('swp-tab-content[data-tab="schedule"] swp-page-container') as HTMLElement;
if (container) {
// Hent nuværende computed styles for animation
const animation = container.getAnimations()[0];
if (animation) {
animation.cancel();
}
}
// Fjern låst bredde så tabellen kan tilpasse sig igen
const table = document.getElementById('scheduleTable');
if (table) {