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

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

@ -39,7 +39,7 @@ swp-calendar-nav {
swp-calendar-container {
flex: 1;
display: grid;
grid-template-columns: 60px 1fr;
grid-template-columns: 60px 1fr 20px;
grid-template-rows: auto 1fr 20px;
overflow: hidden;
position: relative;
@ -58,22 +58,22 @@ swp-header-spacer {
position: relative;
}
/* Right scrollbar - positioned at browser edge */
swp-right-scrollbar {
position: fixed;
top: 0;
right: 0;
width: 20px;
height: 100vh;
background: #f0f0f0;
border-left: 2px solid #333;
z-index: 1000;
overflow: hidden;
/* Right header spacer for scrollbar alignment */
swp-right-header-spacer {
grid-column: 3;
grid-row: 1;
height: 80px; /* Same as week header height */
background: var(--color-surface);
border-left: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
z-index: 5; /* Higher than time-axis to cover it when scrolling */
position: relative;
}
/* Week container for sliding */
swp-week-container {
grid-column: 2;
grid-column: 2 / 4; /* Span across columns 2-3 to include right spacer area */
grid-row: 1 / 3;
display: grid;
grid-template-rows: auto 1fr;
@ -82,6 +82,16 @@ swp-week-container {
transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Right column for scrollbar */
swp-right-column {
grid-column: 3;
grid-row: 2;
background: #f0f0f0;
border-left: 2px solid #333;
position: relative;
overflow: hidden;
}
/* Time axis */
swp-time-axis {
grid-column: 1;
@ -96,14 +106,14 @@ swp-time-axis {
flex-direction: column;
}
/* Right column - now part of fixed scrollbar */
swp-right-column {
position: absolute;
top: 80px; /* Below navigation */
left: 0;
right: 0;
bottom: 20px; /* Above horizontal scrollbar */
background: transparent;
/* Right bottom spacer */
swp-right-bottom-spacer {
grid-column: 3;
grid-row: 3;
height: 20px;
background: var(--color-surface);
border-left: 1px solid var(--color-border);
border-top: 1px solid var(--color-border);
}
/* Scroll handle */
@ -138,27 +148,16 @@ swp-bottom-spacer {
border-top: 1px solid var(--color-border);
}
/* Bottom scrollbar - positioned at browser edge */
swp-bottom-scrollbar {
position: fixed;
bottom: 0;
left: 0;
right: 20px; /* Leave space for vertical scrollbar */
/* Bottom middle spacer */
swp-bottom-middle-spacer {
grid-column: 2;
grid-row: 3;
height: 20px;
background: #f0f0f0;
border-top: 2px solid #333;
z-index: 1000;
overflow: hidden;
}
swp-bottom-column {
position: absolute;
top: 0;
left: 60px; /* Start after time-axis */
right: 0;
bottom: 0;
background: transparent;
}
/* Horizontal scroll handle */
swp-horizontal-scroll-handle {