Refactors calendar project structure and build configuration
Consolidates V2 codebase into main project directory Updates build script to support simplified entry points Removes redundant files and cleans up project organization Simplifies module imports and entry points for calendar application
This commit is contained in:
Janus C. H. Knudsen
parent
9f360237cf
commit
863b433eba
200 changed files with 2331 additions and 16193 deletions
|
|
@ -1,382 +0,0 @@
|
|||
/* V2 Events - Event styling (from V1 calendar-events-css.css) */
|
||||
|
||||
/* Event base styles */
|
||||
swp-day-columns swp-event {
|
||||
--b-text: var(--color-text);
|
||||
|
||||
position: absolute;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: background-color 200ms ease, box-shadow 150ms ease, transform 150ms ease;
|
||||
z-index: 10;
|
||||
left: 2px;
|
||||
right: 2px;
|
||||
font-size: 12px;
|
||||
padding: 4px 6px;
|
||||
user-select: none;
|
||||
|
||||
/* Color system using color-mix() */
|
||||
background-color: color-mix(in srgb, var(--b-primary) 10%, var(--b-mix));
|
||||
color: var(--b-text);
|
||||
border-left: 4px solid var(--b-primary);
|
||||
|
||||
/* Enable container queries for responsive layout */
|
||||
container-type: size;
|
||||
container-name: event;
|
||||
|
||||
/* CSS Grid layout for time, title, and description */
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: 2px 4px;
|
||||
align-items: start;
|
||||
|
||||
/* Dragging state */
|
||||
&.dragging {
|
||||
position: absolute;
|
||||
z-index: 999999;
|
||||
left: 2px;
|
||||
right: 2px;
|
||||
width: auto;
|
||||
cursor: grabbing;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* Ghost clone (stays in original position during drag) */
|
||||
&.drag-ghost {
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Hover state */
|
||||
&:hover {
|
||||
background-color: color-mix(in srgb, var(--b-primary) 15%, var(--b-mix));
|
||||
}
|
||||
}
|
||||
|
||||
swp-day-columns swp-event:hover {
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
/* Resize handle - actual draggable element */
|
||||
swp-resize-handle {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 15px;
|
||||
cursor: ns-resize;
|
||||
z-index: 25;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 150ms ease;
|
||||
}
|
||||
|
||||
/* Show handle on hover */
|
||||
swp-day-columns swp-event:hover swp-resize-handle {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Handle visual indicator (grip lines) */
|
||||
swp-resize-handle::before {
|
||||
content: '';
|
||||
width: 30px;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 2px;
|
||||
box-shadow:
|
||||
0 -2px 0 rgba(255, 255, 255, 0.9),
|
||||
0 2px 0 rgba(255, 255, 255, 0.9),
|
||||
0 0 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Global resizing state */
|
||||
.swp--resizing {
|
||||
user-select: none !important;
|
||||
cursor: ns-resize !important;
|
||||
}
|
||||
|
||||
.swp--resizing * {
|
||||
cursor: ns-resize !important;
|
||||
}
|
||||
|
||||
swp-day-columns swp-event-time {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
swp-day-columns swp-event-title {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
swp-day-columns swp-event-description {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2;
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
opacity: 0.8;
|
||||
line-height: 1.3;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
|
||||
/* Ensure description fills available height for gradient effect */
|
||||
min-height: 100%;
|
||||
align-self: stretch;
|
||||
|
||||
/* Fade-out effect for long descriptions */
|
||||
-webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
|
||||
mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
|
||||
}
|
||||
|
||||
/* Container queries for height-based layout */
|
||||
|
||||
/* Hide description when event is too short (< 30px) */
|
||||
@container event (height < 30px) {
|
||||
swp-day-columns swp-event-description {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Full description for tall events (>= 100px) */
|
||||
@container event (height >= 100px) {
|
||||
swp-day-columns swp-event-description {
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Multi-day events */
|
||||
swp-multi-day-event {
|
||||
position: relative;
|
||||
height: 28px;
|
||||
margin: 2px 4px;
|
||||
padding: 0 8px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
user-select: none;
|
||||
|
||||
/* Color system using color-mix() */
|
||||
--b-text: var(--color-text);
|
||||
background-color: color-mix(in srgb, var(--b-primary) 10%, var(--b-mix));
|
||||
color: var(--b-text);
|
||||
border-left: 4px solid var(--b-primary);
|
||||
|
||||
&:hover {
|
||||
background-color: color-mix(in srgb, var(--b-primary) 15%, var(--b-mix));
|
||||
}
|
||||
|
||||
/* Continuation indicators */
|
||||
&[data-continues-before="true"] {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
margin-left: 0;
|
||||
padding-left: 20px;
|
||||
|
||||
&::before {
|
||||
content: '\25C0';
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
opacity: 0.6;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-continues-after="true"] {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
margin-right: 0;
|
||||
padding-right: 20px;
|
||||
|
||||
&::after {
|
||||
content: '\25B6';
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
opacity: 0.6;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
}
|
||||
|
||||
/* All-day events */
|
||||
swp-allday-event {
|
||||
--b-text: var(--color-text);
|
||||
background-color: color-mix(in srgb, var(--b-primary) 10%, var(--b-mix));
|
||||
color: var(--b-text);
|
||||
border-left: 4px solid var(--b-primary);
|
||||
cursor: pointer;
|
||||
transition: background-color 200ms ease;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
background-color: color-mix(in srgb, var(--b-primary) 15%, var(--b-mix));
|
||||
}
|
||||
}
|
||||
|
||||
/* Event creation preview */
|
||||
swp-event-preview {
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
background: rgba(33, 150, 243, 0.1);
|
||||
border: 2px dashed var(--color-primary);
|
||||
border-radius: 4px;
|
||||
|
||||
/* Position via CSS variables */
|
||||
top: calc(var(--preview-start) * var(--minute-height));
|
||||
height: calc(var(--preview-duration) * var(--minute-height));
|
||||
}
|
||||
|
||||
/* Event filtering styles */
|
||||
/* When filter is active, all events are dimmed by default */
|
||||
swp-events-layer[data-filter-active="true"] swp-event {
|
||||
opacity: 0.2;
|
||||
transition: opacity 200ms ease;
|
||||
}
|
||||
|
||||
/* Events that match the filter stay normal */
|
||||
swp-events-layer[data-filter-active="true"] swp-event[data-matches="true"] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Event overlap styling */
|
||||
/* Event group container for column sharing */
|
||||
swp-event-group {
|
||||
position: absolute;
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
left: 2px;
|
||||
right: 2px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Grid column configurations */
|
||||
swp-event-group.cols-2 {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
swp-event-group.cols-3 {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
swp-event-group.cols-4 {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
/* Stack levels using margin-left */
|
||||
swp-event-group.stack-level-0 {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
swp-event-group.stack-level-1 {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
swp-event-group.stack-level-2 {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
swp-event-group.stack-level-3 {
|
||||
margin-left: 45px;
|
||||
}
|
||||
|
||||
swp-event-group.stack-level-4 {
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
/* Shadow for stacked events (level 1+) */
|
||||
swp-event[data-stack-link]:not([data-stack-link*='"stackLevel":0']),
|
||||
swp-event-group[data-stack-link]:not([data-stack-link*='"stackLevel":0']) swp-event {
|
||||
box-shadow:
|
||||
0 -1px 2px rgba(0, 0, 0, 0.1),
|
||||
0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Child events within grid */
|
||||
swp-event-group swp-event {
|
||||
position: relative;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* All-day event transition for smooth repositioning */
|
||||
swp-allday-container swp-event.transitioning {
|
||||
transition: grid-area 200ms ease-out, grid-row 200ms ease-out, grid-column 200ms ease-out;
|
||||
}
|
||||
|
||||
/* Color utility classes */
|
||||
.is-red { --b-primary: var(--b-color-red); }
|
||||
.is-pink { --b-primary: var(--b-color-pink); }
|
||||
.is-magenta { --b-primary: var(--b-color-magenta); }
|
||||
.is-purple { --b-primary: var(--b-color-purple); }
|
||||
.is-violet { --b-primary: var(--b-color-violet); }
|
||||
.is-deep-purple { --b-primary: var(--b-color-deep-purple); }
|
||||
.is-indigo { --b-primary: var(--b-color-indigo); }
|
||||
.is-blue { --b-primary: var(--b-color-blue); }
|
||||
.is-light-blue { --b-primary: var(--b-color-light-blue); }
|
||||
.is-cyan { --b-primary: var(--b-color-cyan); }
|
||||
.is-teal { --b-primary: var(--b-color-teal); }
|
||||
.is-green { --b-primary: var(--b-color-green); }
|
||||
.is-light-green { --b-primary: var(--b-color-light-green); }
|
||||
.is-lime { --b-primary: var(--b-color-lime); }
|
||||
.is-yellow { --b-primary: var(--b-color-yellow); }
|
||||
.is-amber { --b-primary: var(--b-color-amber); }
|
||||
.is-orange { --b-primary: var(--b-color-orange); }
|
||||
.is-deep-orange { --b-primary: var(--b-color-deep-orange); }
|
||||
|
||||
/* Header drawer items */
|
||||
swp-header-item {
|
||||
--b-text: var(--color-text);
|
||||
|
||||
/* Positioneres via style.gridArea */
|
||||
height: 22px;
|
||||
margin: 1px 4px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.75rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: background-color 200ms ease;
|
||||
|
||||
/* Color system - inverted from swp-event */
|
||||
background-color: color-mix(in srgb, var(--b-primary) 15%, var(--b-mix));
|
||||
color: var(--b-text);
|
||||
|
||||
&:hover {
|
||||
background-color: color-mix(in srgb, var(--b-primary) 10%, var(--b-mix));
|
||||
}
|
||||
|
||||
/* Dragging state */
|
||||
&.dragging {
|
||||
opacity: 0.7;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue