Implements event overlap rendering
Adds logic to handle event overlaps in the calendar view. It introduces two patterns: column sharing for events with the same start time (rendered using flexbox) and stacking for events with a >30 min difference (rendered with reduced width and z-index). It also introduces deep linking to specific events via URL parameters.
This commit is contained in:
parent
7a1c776bc1
commit
ff067cfac3
11 changed files with 837 additions and 16 deletions
|
|
@ -204,4 +204,36 @@ swp-events-layer[data-filter-active="true"] swp-event {
|
|||
/* 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 */
|
||||
.event-group {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
gap: 1px;
|
||||
width: calc(100% - 4px);
|
||||
left: 2px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.event-group swp-event {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Debug styling for development */
|
||||
.event-group[data-event-count="2"] {
|
||||
border-left: 2px solid rgba(0, 255, 0, 0.3);
|
||||
}
|
||||
|
||||
.event-group[data-event-count="3"] {
|
||||
border-left: 2px solid rgba(0, 0, 255, 0.3);
|
||||
}
|
||||
|
||||
.event-group[data-event-count="4"] {
|
||||
border-left: 2px solid rgba(255, 0, 255, 0.3);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue