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

Adds fixed scrollbars for improved navigation

Browse source 
Implements fixed scrollbars at the browser edges to enhance navigation within the calendar view. This ensures that the scrollbars remain visible regardless of the user's scroll position, providing consistent access to horizontal and vertical scrolling.

Removes the right header spacer and right column, integrating their functionality into the new fixed scrollbar components.

Additionally, synchronizes the week header position with the horizontal scroll, improving the user experience.

Scrollbar hiding is now handled in the CSS file.
This commit is contained in:
Janus Knudsen 2025-07-29 21:22:13 +02:00
parent 1822fa7287
commit 1d25ab7b53
3 changed files with 332 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/managers/GridManager.ts
View file

@ -117,12 +117,12 @@ export class GridManager {
// Clear existing grid and rebuild POC structure
this.grid.innerHTML = '';
// Create POC structure: header-spacer + time-axis + week-container + right-side
// Create POC structure: header-spacer + time-axis + week-container + fixed scrollbars
this.createHeaderSpacer();
this.createRightHeaderSpacer();
this.createTimeAxis();
this.createRightColumn();
this.createWeekContainer();
this.createBottomRow();
this.createFixedScrollbars();
console.log('GridManager: Grid rendered successfully with POC structure');
}
@ -138,23 +138,22 @@ export class GridManager {
}
/**
* Create right header spacer to align right column with week content
* Create fixed scrollbars at browser edges
*/
private createRightHeaderSpacer(): void {
if (!this.grid) return;
const rightHeaderSpacer = document.createElement('swp-right-header-spacer');
this.grid.appendChild(rightHeaderSpacer);
}
/**
* Create right column beside week container
*/
private createRightColumn(): void {
if (!this.grid) return;
private createFixedScrollbars(): void {
if (!document.body) return;
// Create right scrollbar at browser edge
const rightScrollbar = document.createElement('swp-right-scrollbar');
const rightColumn = document.createElement('swp-right-column');
this.grid.appendChild(rightColumn);
rightScrollbar.appendChild(rightColumn);
document.body.appendChild(rightScrollbar);
// Create bottom scrollbar at browser edge
const bottomScrollbar = document.createElement('swp-bottom-scrollbar');
const bottomColumn = document.createElement('swp-bottom-column');
bottomScrollbar.appendChild(bottomColumn);
document.body.appendChild(bottomScrollbar);
}
/**
@ -210,6 +209,17 @@ export class GridManager {
this.grid.appendChild(weekContainer);
}
/**
* Create bottom row with spacer
*/
private createBottomRow(): void {
if (!this.grid) return;
// Bottom spacer (left)
const bottomSpacer = document.createElement('swp-bottom-spacer');
this.grid.appendChild(bottomSpacer);
}
/**
* Render week headers like in POC
*/