Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
Janus Knudsen 2025-08-04 23:11:56 +02:00
parent 4790f31a7b
commit ce82b5286b
3 changed files with 9 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

14
wwwroot/css/calendar-layout-css.css
View file

@ -39,7 +39,7 @@ swp-calendar-nav {
swp-calendar-container {
display: grid;
grid-template-columns: 60px 1fr 20px;
grid-template-rows: 110px 1fr 20px;
grid-template-rows: auto 1fr 20px;
height: 100%;
overflow: hidden;
position: relative;
@ -50,7 +50,7 @@ swp-calendar-container {
swp-header-spacer {
grid-column: 1;
grid-row: 1;
height: 110px; /* Same as week header height */
height: var(--header-height); /* Use CSS variable for consistent height */
background: var(--color-surface);
border-right: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
@ -63,7 +63,7 @@ swp-header-spacer {
swp-right-header-spacer {
grid-column: 3;
grid-row: 1;
height: 110px; /* Same as week header height */
height: var(--header-height); /* Use CSS variable for consistent height */
background: var(--color-surface);
border-left: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
@ -76,7 +76,7 @@ swp-week-container {
grid-column: 2 / 3;
grid-row: 1 / 3;
display: grid;
grid-template-rows: 110px 1fr;
grid-template-rows: auto 1fr;
position: relative;
width: 100%;
transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
@ -211,18 +211,18 @@ swp-hour-marker::after {
pointer-events: none;
}
/* Week header with 2 rows */
/* Week header - dynamic height based on content */
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 */
grid-template-rows: var(--header-height) auto; /* Row 1: use CSS variable, Row 2: auto-sized for all-day events */
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 */
height: auto; /* Dynamic height based on content */
}
swp-day-header {