9f6d4333cb
Adds custom scroll management for the calendar week view, replacing native scrollbars with a custom handle. Introduces categorized event logging with console grouping and styling, enhancing debug output. It also allows configuring logging for specific event categories.
314 lines
No EOL
6.2 KiB
CSS
314 lines
No EOL
6.2 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;
|
|
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);
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
/* Week container for sliding */
|
|
swp-week-container {
|
|
grid-column: 2;
|
|
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);
|
|
}
|
|
|
|
/* 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: 4;
|
|
width: 60px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Right column */
|
|
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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
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, 1fr);
|
|
background: var(--color-surface);
|
|
border-bottom: 1px solid var(--color-border);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 3;
|
|
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: hidden;
|
|
scroll-behavior: smooth;
|
|
position: relative;
|
|
display: grid;
|
|
/* Height will be set dynamically by ScrollManager via ResizeObserver */
|
|
}
|
|
|
|
/* 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, 1fr);
|
|
}
|
|
|
|
swp-day-column {
|
|
position: relative;
|
|
border-right: 1px solid var(--color-grid-line);
|
|
}
|
|
|
|
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;
|
|
} |