Adds fixed scrollbars for improved navigation
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
parent
1822fa7287
commit
1d25ab7b53
3 changed files with 332 additions and 81 deletions
|
|
@ -39,8 +39,8 @@ swp-calendar-nav {
|
|||
swp-calendar-container {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 60px 1fr 20px;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: 60px 1fr;
|
||||
grid-template-rows: auto 1fr 20px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -58,14 +58,17 @@ swp-header-spacer {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
/* Right header spacer */
|
||||
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);
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* Week container for sliding */
|
||||
|
|
@ -93,16 +96,14 @@ swp-time-axis {
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Right column */
|
||||
/* Right column - now part of fixed scrollbar */
|
||||
swp-right-column {
|
||||
grid-column: 3;
|
||||
grid-row: 2;
|
||||
background: #f0f0f0;
|
||||
border-left: 2px solid #333;
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
width: 20px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 80px; /* Below navigation */
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 20px; /* Above horizontal scrollbar */
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Scroll handle */
|
||||
|
|
@ -127,6 +128,60 @@ swp-scroll-handle.dragging {
|
|||
background: #007bff;
|
||||
}
|
||||
|
||||
/* Bottom row for horizontal scrollbar */
|
||||
swp-bottom-spacer {
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
height: 20px;
|
||||
background: var(--color-surface);
|
||||
border-right: 1px solid var(--color-border);
|
||||
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 */
|
||||
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 {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 2px;
|
||||
width: 40px;
|
||||
height: 16px;
|
||||
background: #666;
|
||||
border-radius: 8px;
|
||||
cursor: grab;
|
||||
transition: background-color 0.2s ease;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
swp-horizontal-scroll-handle:hover {
|
||||
background: #333;
|
||||
}
|
||||
|
||||
swp-horizontal-scroll-handle.dragging {
|
||||
background: #007bff;
|
||||
}
|
||||
|
||||
swp-hour-marker {
|
||||
height: var(--hour-height);
|
||||
padding: 0 8px 8px 8px;
|
||||
|
|
@ -151,7 +206,8 @@ swp-hour-marker::after {
|
|||
/* Week header */
|
||||
swp-week-header {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
grid-template-columns: repeat(7, minmax(250px, 1fr));
|
||||
min-width: 1750px; /* Match day-columns width */
|
||||
background: var(--color-surface);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
position: sticky;
|
||||
|
|
@ -203,11 +259,21 @@ swp-day-header[data-today="true"] swp-day-date {
|
|||
/* Scrollable content */
|
||||
swp-scrollable-content {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overflow-x: auto;
|
||||
scroll-behavior: smooth;
|
||||
position: relative;
|
||||
display: grid;
|
||||
/* Height will be set dynamically by ScrollManager via ResizeObserver */
|
||||
width: calc(100vw - 60px - 20px); /* Viewport width minus time-axis and scrollbar */
|
||||
|
||||
/* Hide native scrollbars */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE/Edge */
|
||||
}
|
||||
|
||||
/* Chrome/Safari/Opera */
|
||||
swp-scrollable-content::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Time grid */
|
||||
|
|
@ -247,12 +313,14 @@ swp-day-columns {
|
|||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
grid-template-columns: repeat(7, minmax(250px, 1fr));
|
||||
min-width: 1750px; /* 7 * 250px = force horizontal scroll */
|
||||
}
|
||||
|
||||
swp-day-column {
|
||||
position: relative;
|
||||
border-right: 1px solid var(--color-grid-line);
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
swp-day-column:last-child {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue