3691ebea85
Improves calendar week view by adding header sections. This change introduces two new header sections, styled with an orange background, to the calendar week view. These sections are positioned in the second row of the week header, enhancing the visual organization and potentially providing space for additional information or actions related to the week view. The overall height of the header has also been adjusted to accommodate the new row.
417 lines
No EOL
9 KiB
CSS
417 lines
No EOL
9 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: grid;
|
|
grid-template-rows: auto 1fr;
|
|
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 {
|
|
display: grid;
|
|
grid-template-columns: 60px 1fr 20px;
|
|
grid-template-rows: 110px 1fr 20px;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
/* Header spacer for time axis alignment */
|
|
swp-header-spacer {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
height: 110px; /* 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: 110px; /* 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 / 3;
|
|
grid-row: 1 / 3;
|
|
display: grid;
|
|
grid-template-rows: 110px 1fr;
|
|
position: relative;
|
|
width: 100%;
|
|
transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 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: relative;
|
|
left: 0;
|
|
z-index: 3; /* Lower than header elements so it scrolls behind them */
|
|
width: 60px;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Time axis content that scrolls */
|
|
swp-time-axis-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
|
|
/* 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;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
/* 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-hour-line);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Week header with 2 rows */
|
|
swp-week-header {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, minmax(var(--day-column-min-width), 1fr));
|
|
grid-template-rows: 80px 30px; /* Row 1: day headers, Row 2: orange sections */
|
|
min-width: calc(var(--week-days) * var(--day-column-min-width)); /* Dynamic 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: 110px; /* Updated height: 80px + 30px */
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
/* Orange header sections in row 2 */
|
|
swp-header-section-left {
|
|
grid-column: 1 / 3; /* Span columns 1-2 */
|
|
grid-row: 2; /* Row 2 only */
|
|
background: #ff9800; /* Orange background */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-right: 1px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
swp-header-section-right {
|
|
grid-column: 3 / 8; /* Span columns 3-7 */
|
|
grid-row: 2; /* Row 2 only */
|
|
background: #ff9800; /* Orange background */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Scrollable content */
|
|
swp-scrollable-content {
|
|
overflow-y: auto;
|
|
overflow-x: auto;
|
|
scroll-behavior: smooth;
|
|
position: relative;
|
|
display: grid;
|
|
/* Height and width will be set dynamically by ScrollManager via ResizeObserver */
|
|
|
|
/* 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);
|
|
min-width: calc(var(--week-days) * var(--day-column-min-width));
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Grid lines */
|
|
swp-grid-lines {
|
|
position: absolute;
|
|
top: 1px;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
min-width: calc(var(--week-days) * var(--day-column-min-width)); /* Dynamic width */
|
|
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(var(--day-column-min-width), 1fr));
|
|
min-width: calc(var(--week-days) * var(--day-column-min-width)); /* Dynamic width */
|
|
}
|
|
|
|
swp-day-column {
|
|
position: relative;
|
|
border-right: 1px solid var(--color-grid-line);
|
|
min-width: var(--day-column-min-width);
|
|
}
|
|
|
|
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;
|
|
} |