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

Refactors grid layout for scrollbar implementation

Browse source 
Updates the grid structure to correctly position the scrollbars.

Replaces fixed scrollbars with a grid-based layout using spacers and
a right column for a more integrated and maintainable solution.
This change addresses layout issues related to scrollbar positioning
and ensures better alignment across different browsers.
This commit is contained in:
Janus Knudsen 2025-07-29 23:01:00 +02:00
parent bfd2ba0272
commit 2e50679602
3 changed files with 72 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/managers/GridManager.ts
View file

@ -117,12 +117,13 @@ export class GridManager {
// Clear existing grid and rebuild POC structure
this.grid.innerHTML = '';
// Create POC structure: header-spacer + time-axis + week-container + fixed scrollbars
// Create POC structure: header-spacer + time-axis + week-container + right-column + bottom spacers
this.createHeaderSpacer();
this.createRightHeaderSpacer();
this.createTimeAxis();
this.createWeekContainer();
this.createRightColumn();
this.createBottomRow();
this.createFixedScrollbars();
console.log('GridManager: Grid rendered successfully with POC structure');
}
@ -138,24 +139,26 @@ export class GridManager {
}
/**
* Create fixed scrollbars at browser edges
* Create right header spacer for scrollbar alignment
*/
private createFixedScrollbars(): void {
if (!document.body) return;
private createRightHeaderSpacer(): void {
if (!this.grid) return;
// Create right scrollbar at browser edge
const rightScrollbar = document.createElement('swp-right-scrollbar');
const rightColumn = document.createElement('swp-right-column');
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);
const rightHeaderSpacer = document.createElement('swp-right-header-spacer');
this.grid.appendChild(rightHeaderSpacer);
}
/**
* Create right column for scrollbar area
*/
private createRightColumn(): void {
if (!this.grid) return;
const rightColumn = document.createElement('swp-right-column');
this.grid.appendChild(rightColumn);
}
/**
* Create time axis (positioned beside week container) like in POC
*/
@ -210,7 +213,7 @@ export class GridManager {
}
/**
* Create bottom row with spacer
* Create bottom row with spacers
*/
private createBottomRow(): void {
if (!this.grid) return;
@ -218,6 +221,14 @@ export class GridManager {
// Bottom spacer (left)
const bottomSpacer = document.createElement('swp-bottom-spacer');
this.grid.appendChild(bottomSpacer);
// Bottom middle spacer
const bottomMiddleSpacer = document.createElement('swp-bottom-middle-spacer');
this.grid.appendChild(bottomMiddleSpacer);
// Right bottom spacer
const rightBottomSpacer = document.createElement('swp-right-bottom-spacer');
this.grid.appendChild(rightBottomSpacer);
}
/**