Snapshot
This commit is contained in:
Janus Knudsen
parent
b443649ced
commit
42c418e961
7 changed files with 349 additions and 659 deletions
|
|
@ -86,17 +86,13 @@ body {
|
|||
swp-calendar,
|
||||
swp-calendar-nav,
|
||||
swp-calendar-container,
|
||||
swp-time-axis,
|
||||
swp-week-header,
|
||||
swp-scrollable-content,
|
||||
swp-time-grid,
|
||||
swp-day-columns,
|
||||
swp-day-column,
|
||||
swp-events-layer,
|
||||
swp-calendar-grid,
|
||||
swp-header-cell,
|
||||
swp-time-cell,
|
||||
swp-day-cell,
|
||||
swp-events-container,
|
||||
swp-event,
|
||||
swp-loading-overlay,
|
||||
swp-week-container,
|
||||
swp-grid-lines,
|
||||
swp-nav-group,
|
||||
swp-nav-button,
|
||||
swp-search-container,
|
||||
|
|
@ -107,10 +103,8 @@ swp-view-button,
|
|||
swp-week-info,
|
||||
swp-week-number,
|
||||
swp-date-range,
|
||||
swp-day-header,
|
||||
swp-day-name,
|
||||
swp-day-date,
|
||||
swp-hour-marker,
|
||||
swp-event-time,
|
||||
swp-event-title,
|
||||
swp-spinner {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
/* styles/layout.css */
|
||||
/* styles/layout.css - POC Structure Implementation */
|
||||
|
||||
/* Main calendar container */
|
||||
swp-calendar {
|
||||
|
|
@ -21,7 +21,7 @@ swp-calendar-nav {
|
|||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
/* Calendar container grid (following POC structure) */
|
||||
/* Calendar container grid - POC structure */
|
||||
swp-calendar-container {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
|
|
@ -31,19 +31,6 @@ swp-calendar-container {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
/* Time axis (fixed, left side) */
|
||||
swp-time-axis {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
background: var(--color-surface);
|
||||
border-right: 1px solid var(--color-border);
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 4;
|
||||
padding-top: 80px; /* Match header height */
|
||||
overflow-y: hidden; /* Hide scrollbar but allow programmatic scrolling */
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Week container for sliding */
|
||||
swp-week-container {
|
||||
|
|
@ -55,7 +42,40 @@ swp-week-container {
|
|||
transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Week header (inside week container) */
|
||||
/* Time axis */
|
||||
swp-time-axis {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
background: var(--color-surface);
|
||||
border-right: 1px solid var(--color-border);
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 4;
|
||||
padding-top: 80px; /* Match header height */
|
||||
}
|
||||
|
||||
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);
|
||||
|
|
@ -67,57 +87,6 @@ swp-week-header {
|
|||
height: 80px; /* Fixed height */
|
||||
}
|
||||
|
||||
/* Scrollable content */
|
||||
swp-scrollable-content {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
scroll-behavior: smooth;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 0; /* Important for flex children to shrink */
|
||||
max-height: calc(100vh - 80px - 80px); /* Subtract nav height and week-header height */
|
||||
}
|
||||
|
||||
swp-week-container.slide-out-left {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
swp-week-container.slide-out-right {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
swp-week-container.slide-in-left {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
swp-week-container.slide-in-right {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
swp-hour-marker {
|
||||
height: var(--hour-height);
|
||||
padding: 8px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-secondary);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
|
||||
/* Hour line extending into calendar */
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
width: 100vw;
|
||||
height: 1px;
|
||||
background: var(--color-grid-line);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Day header styling (inside week-header) */
|
||||
|
||||
swp-day-header {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
|
|
@ -158,24 +127,19 @@ swp-day-header[data-today="true"] swp-day-date {
|
|||
margin: 4px auto 0;
|
||||
}
|
||||
|
||||
/* All-day events container */
|
||||
swp-allday-container {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--color-background);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
min-height: 0;
|
||||
z-index: 2;
|
||||
|
||||
&:not(:empty) {
|
||||
padding: 8px 0;
|
||||
}
|
||||
/* Scrollable content */
|
||||
swp-scrollable-content {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
scroll-behavior: smooth;
|
||||
position: relative;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
/* Time grid */
|
||||
swp-time-grid {
|
||||
position: relative;
|
||||
height: calc(24 * var(--hour-height));
|
||||
height: calc(12 * var(--hour-height));
|
||||
}
|
||||
|
||||
swp-time-grid::before {
|
||||
|
|
@ -195,38 +159,13 @@ swp-grid-lines {
|
|||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: var(--z-grid);
|
||||
background-image:
|
||||
/* Hour lines (stronger) */
|
||||
repeating-linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
transparent calc(var(--hour-height) - 1px),
|
||||
var(--color-grid-line) calc(var(--hour-height) - 1px),
|
||||
var(--color-grid-line) var(--hour-height)
|
||||
),
|
||||
/* Quarter hour lines (lighter) */
|
||||
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)
|
||||
);
|
||||
}
|
||||
|
||||
/* Ensure grid lines are visible during transitions */
|
||||
swp-week-container swp-grid-lines {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Grid lines should remain visible even during animations */
|
||||
swp-week-container.slide-out-left swp-grid-lines,
|
||||
swp-week-container.slide-out-right swp-grid-lines,
|
||||
swp-week-container.slide-in-left swp-grid-lines,
|
||||
swp-week-container.slide-in-right swp-grid-lines {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
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 */
|
||||
|
|
@ -251,6 +190,10 @@ swp-events-layer {
|
|||
inset: 0;
|
||||
}
|
||||
|
||||
swp-event {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* Current time indicator */
|
||||
swp-current-time-indicator {
|
||||
position: absolute;
|
||||
|
|
@ -287,7 +230,13 @@ swp-current-time-indicator {
|
|||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Position based on current time */
|
||||
top: calc(var(--current-minutes) * var(--minute-height));
|
||||
}
|
||||
|
||||
/* Week navigation animations - simplified */
|
||||
swp-calendar-container.week-transition {
|
||||
transition: opacity 300ms ease;
|
||||
}
|
||||
|
||||
swp-calendar-container.week-transition-out {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
|
@ -49,20 +49,9 @@
|
|||
</swp-view-selector>
|
||||
</swp-calendar-nav>
|
||||
|
||||
<!-- Calendar Grid -->
|
||||
<!-- Calendar Grid Container -->
|
||||
<swp-calendar-container>
|
||||
<swp-time-axis></swp-time-axis>
|
||||
|
||||
<swp-week-container>
|
||||
<swp-week-header></swp-week-header>
|
||||
|
||||
<swp-scrollable-content>
|
||||
<swp-time-grid>
|
||||
<swp-grid-lines></swp-grid-lines>
|
||||
<swp-day-columns></swp-day-columns>
|
||||
</swp-time-grid>
|
||||
</swp-scrollable-content>
|
||||
</swp-week-container>
|
||||
<!-- Headers and time slots will be generated dynamically by JavaScript -->
|
||||
</swp-calendar-container>
|
||||
|
||||
<swp-loading-overlay hidden>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue