2e50679602
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.
383 lines
No EOL
8.1 KiB
CSS
383 lines
No EOL
8.1 KiB
CSS
/* styles/layout.css - POC Structure Implementation */
|
|
|
|
/* Calendar wrapper container - full viewport */
|
|
.calendar-wrapper {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Main calendar container - full height */
|
|
swp-calendar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
width: 100%;
|
|
background: var(--color-background);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Navigation bar layout */
|
|
swp-calendar-nav {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto auto;
|
|
align-items: center;
|
|
gap: 20px;
|
|
padding: 12px 16px;
|
|
background: var(--color-background);
|
|
border-bottom: 1px solid var(--color-border);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
/* Calendar container grid - POC structure */
|
|
swp-calendar-container {
|
|
flex: 1;
|
|
display: grid;
|
|
grid-template-columns: 60px 1fr 20px;
|
|
grid-template-rows: auto 1fr 20px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
/* Header spacer for time axis alignment */
|
|
swp-header-spacer {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
height: 80px; /* Same as week header height */
|
|
background: var(--color-surface);
|
|
border-right: 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;
|
|
}
|
|
|
|
|
|
/* 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 / 4; /* Span across columns 2-3 to include right spacer area */
|
|
grid-row: 1 / 3;
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
position: relative;
|
|
width: 100%;
|
|
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;
|
|
grid-row: 2;
|
|
background: var(--color-surface);
|
|
border-right: 1px solid var(--color-border);
|
|
position: sticky;
|
|
left: 0;
|
|
z-index: 3; /* Lower than header elements so it scrolls behind them */
|
|
width: 60px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* 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 */
|
|
swp-scroll-handle {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 2px;
|
|
width: 16px;
|
|
height: 40px;
|
|
background: #666;
|
|
border-radius: 8px;
|
|
cursor: grab;
|
|
transition: background-color 0.2s ease;
|
|
z-index: 5;
|
|
}
|
|
|
|
swp-scroll-handle:hover {
|
|
background: #333;
|
|
}
|
|
|
|
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 middle spacer */
|
|
swp-bottom-middle-spacer {
|
|
grid-column: 2;
|
|
grid-row: 3;
|
|
height: 20px;
|
|
background: #f0f0f0;
|
|
border-top: 2px solid #333;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
/* 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;
|
|
font-size: 0.75rem;
|
|
color: var(--color-text-secondary);
|
|
display: flex;
|
|
align-items: flex-start;
|
|
position: relative;
|
|
}
|
|
|
|
swp-hour-marker::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 100%;
|
|
width: 100vw;
|
|
height: 1px;
|
|
background: var(--color-grid-line);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Week header */
|
|
swp-week-header {
|
|
display: grid;
|
|
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;
|
|
top: 0;
|
|
z-index: 3; /* Lower than header-spacer so it slides under during horizontal scroll */
|
|
height: 80px; /* Fixed height */
|
|
}
|
|
|
|
swp-day-header {
|
|
padding: 12px;
|
|
text-align: center;
|
|
border-right: 1px solid var(--color-grid-line);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
swp-day-header:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
swp-day-name {
|
|
display: block;
|
|
font-weight: 500;
|
|
font-size: 0.875rem;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
swp-day-date {
|
|
display: block;
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
swp-day-header[data-today="true"] swp-day-date {
|
|
color: var(--color-primary);
|
|
background: rgba(33, 150, 243, 0.1);
|
|
border-radius: 50%;
|
|
width: 36px;
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 4px auto 0;
|
|
}
|
|
|
|
/* Scrollable content */
|
|
swp-scrollable-content {
|
|
overflow-y: auto;
|
|
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 */
|
|
swp-time-grid {
|
|
position: relative;
|
|
height: calc((var(--day-end-hour) - var(--day-start-hour)) * var(--hour-height));
|
|
}
|
|
|
|
swp-time-grid::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: calc((var(--work-start-hour) - var(--day-start-hour)) * var(--hour-height));
|
|
height: calc((var(--work-end-hour) - var(--work-start-hour)) * var(--hour-height));
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--color-work-hours);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Grid lines */
|
|
swp-grid-lines {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: var(--z-grid);
|
|
background-image: repeating-linear-gradient(
|
|
to bottom,
|
|
transparent,
|
|
transparent calc(var(--hour-height) / 4 - 1px),
|
|
var(--color-grid-line-light) calc(var(--hour-height) / 4 - 1px),
|
|
var(--color-grid-line-light) calc(var(--hour-height) / 4)
|
|
);
|
|
}
|
|
|
|
/* Day columns */
|
|
swp-day-columns {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: grid;
|
|
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 {
|
|
border-right: none;
|
|
}
|
|
|
|
swp-events-layer {
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
|
|
swp-event {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* Current time indicator */
|
|
swp-current-time-indicator {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: var(--color-current-time);
|
|
pointer-events: none;
|
|
z-index: var(--z-current-time);
|
|
|
|
/* Time label */
|
|
&::before {
|
|
content: attr(data-time);
|
|
position: absolute;
|
|
left: -55px;
|
|
top: -10px;
|
|
background: var(--color-current-time);
|
|
color: white;
|
|
padding: 2px 6px;
|
|
font-size: 0.75rem;
|
|
border-radius: 3px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Animated dot */
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: -4px;
|
|
top: -4px;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: var(--color-current-time);
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.3);
|
|
}
|
|
}
|
|
|
|
/* Week navigation animations - simplified */
|
|
swp-calendar-container.week-transition {
|
|
transition: opacity 300ms ease;
|
|
}
|
|
|
|
swp-calendar-container.week-transition-out {
|
|
opacity: 0.5;
|
|
} |