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

Renaming part 1

Browse source
This commit is contained in:
Janus Knudsen 2025-08-07 00:15:44 +02:00
parent 36ac8d18ab
commit 29811fd4b5
20 changed files with 1424 additions and 582 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -62,7 +62,7 @@ swp-header-spacer {
/* Week container for sliding */
swp-week-container {
swp-grid-container {
grid-column: 2;
grid-row: 1 / 3;
display: grid;
@ -127,7 +127,7 @@ swp-time-grid::after {
left: 0;
right: 0;
bottom: 0;
min-width: calc(var(--week-days) * var(--day-column-min-width)); /* Dynamic width like swp-grid-lines */
min-width: calc(var(--grid-columns, 7) * var(--day-column-min-width)); /* Dynamic width like swp-grid-lines */
background-image: repeating-linear-gradient(
to bottom,
transparent,
@ -140,11 +140,11 @@ swp-time-grid::after {
}
/* Week header - dynamic height based on content */
swp-week-header {
swp-calendar-header {
display: grid;
grid-template-columns: repeat(7, minmax(var(--day-column-min-width), 1fr));
grid-template-columns: repeat(var(--grid-columns, 7), minmax(var(--day-column-min-width), 1fr));
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 */
min-width: calc(var(--grid-columns, 7) * var(--day-column-min-width)); /* Dynamic width */
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
position: sticky;
@ -169,6 +169,47 @@ swp-day-header:last-child {
border-right: none;
}
/* Resource header styling */
swp-resource-header {
padding: 12px;
text-align: center;
border-right: 1px solid var(--color-grid-line);
border-bottom: 1px solid var(--color-grid-line);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--color-surface);
}
swp-resource-header:last-child {
border-right: none;
}
swp-resource-avatar {
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
margin-bottom: 8px;
background: var(--color-border);
}
swp-resource-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
swp-resource-name {
display: block;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text);
text-align: center;
}
swp-day-name {
display: block;
font-weight: 500;
@ -274,7 +315,7 @@ swp-time-grid::before {
left: 0;
right: 0;
background: var(--color-work-hours);
min-width: calc(var(--week-days) * var(--day-column-min-width));
min-width: calc(var(--grid-columns, 7) * var(--day-column-min-width));
pointer-events: none;
}
@ -285,7 +326,7 @@ swp-grid-lines {
left: 0;
right: 0;
bottom: 0;
min-width: calc(var(--week-days) * var(--day-column-min-width)); /* Dynamic width */
min-width: calc(var(--grid-columns, 7) * var(--day-column-min-width)); /* Dynamic width */
pointer-events: none;
z-index: var(--z-grid);
background-image: repeating-linear-gradient(
@ -303,8 +344,8 @@ 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 */
grid-template-columns: repeat(var(--grid-columns, 7), minmax(var(--day-column-min-width), 1fr));
min-width: calc(var(--grid-columns, 7) * var(--day-column-min-width)); /* Dynamic width */
}
@ -318,6 +359,17 @@ swp-day-column:last-child {
border-right: none;
}
/* Resource column styling */
swp-resource-column {
position: relative;
border-right: 1px solid var(--color-grid-line);
min-width: var(--day-column-min-width);
}
swp-resource-column:last-child {
border-right: none;
}
swp-events-layer {
position: absolute;
inset: 0;

14
wwwroot/css/calendar.css
View file

@ -7,7 +7,7 @@ swp-calendar,
swp-calendar-nav,
swp-calendar-container,
swp-time-axis,
swp-week-header,
swp-calendar-header,
swp-scrollable-content,
swp-time-grid,
swp-day-columns,
@ -15,7 +15,7 @@ swp-day-column,
swp-events-layer,
swp-event,
swp-loading-overlay,
swp-week-container,
swp-grid-container,
swp-grid-lines {
display: block;
}
@ -164,7 +164,7 @@ swp-view-button[data-active="true"] {
/* Week container for sliding */
swp-week-container {
swp-grid-container {
grid-column: 2;
display: grid;
grid-template-rows: auto 1fr;
@ -173,19 +173,19 @@ swp-week-container {
transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
swp-week-container.slide-out-left {
swp-grid-container.slide-out-left {
transform: translateX(-100%);
}
swp-week-container.slide-out-right {
swp-grid-container.slide-out-right {
transform: translateX(100%);
}
swp-week-container.slide-in-left {
swp-grid-container.slide-in-left {
transform: translateX(-100%);
}
swp-week-container.slide-in-right {
swp-grid-container.slide-in-right {
transform: translateX(100%);
}