Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Calendar/wwwroot/css/calendar-events-css.css

359 lines
9 KiB
CSS
Raw Normal View History

Initial commit: Calendar Plantempus project setup with TypeScript, ASP.NET Core, and event-driven architecture
2025-07-24 22:17:38 +02:00
/* styles/components/events.css */
/* Event base styles */
Refactors calendar event rendering and management Improves code organization and maintainability by separating concerns related to all-day event rendering, header management, and event resizing. Moves all-day event rendering logic into a dedicated `AllDayEventRenderer` class, utilizing the factory pattern for event element creation. Refactors `AllDayManager` to handle all-day row height animations, separated from `HeaderManager`. Removes the `ResizeManager` and related functionality. These changes aim to reduce code duplication, improve testability, and enhance the overall architecture of the calendar component.
2025-09-12 00:36:02 +02:00
swp-day-columns swp-event {
Initial commit: Calendar Plantempus project setup with TypeScript, ASP.NET Core, and event-driven architecture
2025-07-24 22:17:38 +02:00
position: absolute;
Moves event styling to CSS Refactors event rendering to leverage CSS for styling. This change simplifies the event renderer by removing styling logic from the Typescript code and placing it in the CSS file. This improves maintainability and allows for easier customization of event appearance. Hover effects are also moved to CSS for consistency.
2025-08-05 19:12:13 +02:00
border-radius: 3px;
Initial commit: Calendar Plantempus project setup with TypeScript, ASP.NET Core, and event-driven architecture
2025-07-24 22:17:38 +02:00
overflow: hidden;
Moves event styling to CSS Refactors event rendering to leverage CSS for styling. This change simplifies the event renderer by removing styling logic from the Typescript code and placing it in the CSS file. This improves maintainability and allows for easier customization of event appearance. Hover effects are also moved to CSS for consistency.
2025-08-05 19:12:13 +02:00
cursor: pointer;
Improves event drag and drop Enhances the event drag and drop functionality by setting the initial position of the dragged event to prevent it from jumping to the top of the column. Also adjust event transition for a smoother user experience. Removes unused resize logic.
2025-10-08 21:50:41 +02:00
transition: background-color 200ms ease, box-shadow 150ms ease, transform 150ms ease;
Improves grid layout and navigation Refactors the calendar grid to support smoother navigation transitions by using separate week containers. This change introduces a GridManager to handle grid rendering and interactions within these containers, enabling scroll synchronization and click event handling for each week view. Also, configures the calendar to start at midnight and span a full 24-hour day, providing a more comprehensive view.
2025-07-25 00:24:15 +02:00
z-index: 10;
Moves event styling to CSS Refactors event rendering to leverage CSS for styling. This change simplifies the event renderer by removing styling logic from the Typescript code and placing it in the CSS file. This improves maintainability and allows for easier customization of event appearance. Hover effects are also moved to CSS for consistency.
2025-08-05 19:12:13 +02:00
left: 2px;
right: 2px;
Adds month view design and styling Introduces basic month view structure and styling with week numbers. Creates expanded month view with event details and duration-based sizing. Moves event color handling to CSS classes for better flexibility and theming.
2025-08-21 22:09:15 +02:00
color: var(--color-text);
Moves event styling to CSS Refactors event rendering to leverage CSS for styling. This change simplifies the event renderer by removing styling logic from the Typescript code and placing it in the CSS file. This improves maintainability and allows for easier customization of event appearance. Hover effects are also moved to CSS for consistency.
2025-08-05 19:12:13 +02:00
font-size: 12px;
Adds event description support in calendar UI Extends event model to include optional description field Enhances event rendering with: - New description getter/setter in base event element - Updated CSS grid layout for description display - Dynamic description handling in event rendering - Updated mock event data with descriptions Improves visual information density and event context in calendar view
2025-11-12 21:17:20 +01:00
padding: 4px 6px;
/* 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;
Initial commit: Calendar Plantempus project setup with TypeScript, ASP.NET Core, and event-driven architecture
2025-07-24 22:17:38 +02:00
/* Event types */
&[data-type="meeting"] {
background: var(--color-event-meeting);
border-left: 4px solid var(--color-event-meeting-border);
Adds month view design and styling Introduces basic month view structure and styling with week numbers. Creates expanded month view with event details and duration-based sizing. Moves event color handling to CSS classes for better flexibility and theming.
2025-08-21 22:09:15 +02:00
color: var(--color-text);
Initial commit: Calendar Plantempus project setup with TypeScript, ASP.NET Core, and event-driven architecture
2025-07-24 22:17:38 +02:00
}
&[data-type="meal"] {
background: var(--color-event-meal);
border-left: 4px solid var(--color-event-meal-border);
Adds month view design and styling Introduces basic month view structure and styling with week numbers. Creates expanded month view with event details and duration-based sizing. Moves event color handling to CSS classes for better flexibility and theming.
2025-08-21 22:09:15 +02:00
color: var(--color-text);
Initial commit: Calendar Plantempus project setup with TypeScript, ASP.NET Core, and event-driven architecture
2025-07-24 22:17:38 +02:00
}
&[data-type="work"] {
background: var(--color-event-work);
border-left: 4px solid var(--color-event-work-border);
Adds month view design and styling Introduces basic month view structure and styling with week numbers. Creates expanded month view with event details and duration-based sizing. Moves event color handling to CSS classes for better flexibility and theming.
2025-08-21 22:09:15 +02:00
color: var(--color-text);
Initial commit: Calendar Plantempus project setup with TypeScript, ASP.NET Core, and event-driven architecture
2025-07-24 22:17:38 +02:00
}
&[data-type="milestone"] {
background: var(--color-event-milestone);
border-left: 4px solid var(--color-event-milestone-border);
Adds month view design and styling Introduces basic month view structure and styling with week numbers. Creates expanded month view with event details and duration-based sizing. Moves event color handling to CSS classes for better flexibility and theming.
2025-08-21 22:09:15 +02:00
color: var(--color-text);
}
&[data-type="personal"] {
background: var(--color-event-personal);
border-left: 4px solid var(--color-event-personal-border);
color: var(--color-text);
}
&[data-type="deadline"] {
background: var(--color-event-milestone);
border-left: 4px solid var(--color-event-milestone-border);
color: var(--color-text);
Initial commit: Calendar Plantempus project setup with TypeScript, ASP.NET Core, and event-driven architecture
2025-07-24 22:17:38 +02:00
}
Improves drag and drop event handling Refactors drag and drop logic for better event handling and code clarity. - Moves drag styling to CSS class for cleaner code. - Emits a 'drag:convert-from-allday' event to handle the conversion of all-day events back to day events. - Adds logging for debugging purposes.
2025-09-16 23:09:10 +02:00
/* Dragging state */
&.dragging {
position: absolute;
z-index: 999999;
opacity: 0.8;
left: 2px;
right: 2px;
width: auto;
}
Improves event hover highlighting Uses CSS classes for event hover highlighting, instead of directly manipulating the background color. This allows for more flexible and maintainable styling. Re-enables resize handle manager. Removes console logs.
2025-10-08 18:15:00 +02:00
/* Hover state - highlight colors */
Remove DragHoverManager and update hover styles Replaces custom hover tracking with native CSS :hover pseudo-class Simplifies event hover handling by removing dedicated manager Reduces complexity of hover interactions
2025-11-06 21:11:45 +01:00
&:hover[data-type="meeting"] {
Improves event hover highlighting Uses CSS classes for event hover highlighting, instead of directly manipulating the background color. This allows for more flexible and maintainable styling. Re-enables resize handle manager. Removes console logs.
2025-10-08 18:15:00 +02:00
background: var(--color-event-meeting-hl);
}
Remove DragHoverManager and update hover styles Replaces custom hover tracking with native CSS :hover pseudo-class Simplifies event hover handling by removing dedicated manager Reduces complexity of hover interactions
2025-11-06 21:11:45 +01:00
&:hover[data-type="meal"] {
Improves event hover highlighting Uses CSS classes for event hover highlighting, instead of directly manipulating the background color. This allows for more flexible and maintainable styling. Re-enables resize handle manager. Removes console logs.
2025-10-08 18:15:00 +02:00
background: var(--color-event-meal-hl);
}
Remove DragHoverManager and update hover styles Replaces custom hover tracking with native CSS :hover pseudo-class Simplifies event hover handling by removing dedicated manager Reduces complexity of hover interactions
2025-11-06 21:11:45 +01:00
&:hover[data-type="work"] {
Improves event hover highlighting Uses CSS classes for event hover highlighting, instead of directly manipulating the background color. This allows for more flexible and maintainable styling. Re-enables resize handle manager. Removes console logs.
2025-10-08 18:15:00 +02:00
background: var(--color-event-work-hl);
}
Remove DragHoverManager and update hover styles Replaces custom hover tracking with native CSS :hover pseudo-class Simplifies event hover handling by removing dedicated manager Reduces complexity of hover interactions
2025-11-06 21:11:45 +01:00
&:hover[data-type="milestone"] {
Improves event hover highlighting Uses CSS classes for event hover highlighting, instead of directly manipulating the background color. This allows for more flexible and maintainable styling. Re-enables resize handle manager. Removes console logs.
2025-10-08 18:15:00 +02:00
background: var(--color-event-milestone-hl);
}
Remove DragHoverManager and update hover styles Replaces custom hover tracking with native CSS :hover pseudo-class Simplifies event hover handling by removing dedicated manager Reduces complexity of hover interactions
2025-11-06 21:11:45 +01:00
&:hover[data-type="personal"] {
Improves event hover highlighting Uses CSS classes for event hover highlighting, instead of directly manipulating the background color. This allows for more flexible and maintainable styling. Re-enables resize handle manager. Removes console logs.
2025-10-08 18:15:00 +02:00
background: var(--color-event-personal-hl);
}
Remove DragHoverManager and update hover styles Replaces custom hover tracking with native CSS :hover pseudo-class Simplifies event hover handling by removing dedicated manager Reduces complexity of hover interactions
2025-11-06 21:11:45 +01:00
&:hover[data-type="deadline"] {
Improves event hover highlighting Uses CSS classes for event hover highlighting, instead of directly manipulating the background color. This allows for more flexible and maintainable styling. Re-enables resize handle manager. Removes console logs.
2025-10-08 18:15:00 +02:00
background: var(--color-event-milestone-hl);
}
Initial commit: Calendar Plantempus project setup with TypeScript, ASP.NET Core, and event-driven architecture
2025-07-24 22:17:38 +02:00
}
Refactors calendar event rendering and management Improves code organization and maintainability by separating concerns related to all-day event rendering, header management, and event resizing. Moves all-day event rendering logic into a dedicated `AllDayEventRenderer` class, utilizing the factory pattern for event element creation. Refactors `AllDayManager` to handle all-day row height animations, separated from `HeaderManager`. Removes the `ResizeManager` and related functionality. These changes aim to reduce code duplication, improve testability, and enhance the overall architecture of the calendar component.
2025-09-12 00:36:02 +02:00
swp-day-columns swp-event:hover {
Improves grid layout and navigation Refactors the calendar grid to support smoother navigation transitions by using separate week containers. This change introduces a GridManager to handle grid rendering and interactions within these containers, enabling scroll synchronization and click event handling for each week view. Also, configures the calendar to start at midnight and span a full 24-hour day, providing a more comprehensive view.
2025-07-25 00:24:15 +02:00
z-index: 20;
Initial commit: Calendar Plantempus project setup with TypeScript, ASP.NET Core, and event-driven architecture
2025-07-24 22:17:38 +02:00
}
Improves event resizing with smooth animation Replaces the previous rough event resizing implementation with a smooth, animated approach. Uses pointer events for accurate tracking and adds a visual resize handle for better user interaction. Also refactors drag and drop to exclude resize handle.
2025-10-08 21:43:02 +02:00
/* Resize handle - actual draggable element */
swp-resize-handle {
Initial commit: Calendar Plantempus project setup with TypeScript, ASP.NET Core, and event-driven architecture
2025-07-24 22:17:38 +02:00
position: absolute;
Improves event resizing with smooth animation Replaces the previous rough event resizing implementation with a smooth, animated approach. Uses pointer events for accurate tracking and adds a visual resize handle for better user interaction. Also refactors drag and drop to exclude resize handle.
2025-10-08 21:43:02 +02:00
bottom: 0;
left: 0;
right: 0;
height: 15px;
cursor: ns-resize;
z-index: 25;
display: flex;
align-items: center;
justify-content: center;
Initial commit: Calendar Plantempus project setup with TypeScript, ASP.NET Core, and event-driven architecture
2025-07-24 22:17:38 +02:00
opacity: 0;
Improves event resizing with smooth animation Replaces the previous rough event resizing implementation with a smooth, animated approach. Uses pointer events for accurate tracking and adds a visual resize handle for better user interaction. Also refactors drag and drop to exclude resize handle.
2025-10-08 21:43:02 +02:00
transition: opacity 150ms ease;
Improves event resize handle interaction Enhances the resize handle indicator for calendar events by using cached event elements for efficiency. This eliminates the need to constantly query the DOM, and only refreshes the cache on relevant event changes. Additionally updates the resize indicator style for improved visual clarity and user experience.
2025-10-07 17:16:00 +02:00
}
Improves event resizing with smooth animation Replaces the previous rough event resizing implementation with a smooth, animated approach. Uses pointer events for accurate tracking and adds a visual resize handle for better user interaction. Also refactors drag and drop to exclude resize handle.
2025-10-08 21:43:02 +02:00
/* Show handle on hover */
Refactor ResizeHandleManager with improved resize logic Enhances event resizing functionality with smoother animation and more robust handling Removes complex resize zone tracking in favor of simplified resize mechanism Improves performance and simplifies event resize interactions Cleans up unnecessary complexity in pointer and animation management
2025-11-06 22:14:35 +01:00
swp-day-columns swp-event:hover swp-resize-handle {
Improves event resizing with smooth animation Replaces the previous rough event resizing implementation with a smooth, animated approach. Uses pointer events for accurate tracking and adds a visual resize handle for better user interaction. Also refactors drag and drop to exclude resize handle.
2025-10-08 21:43:02 +02:00
opacity: 1;
wip
2025-09-09 14:35:21 +02:00
}
Improves event resizing with smooth animation Replaces the previous rough event resizing implementation with a smooth, animated approach. Uses pointer events for accurate tracking and adds a visual resize handle for better user interaction. Also refactors drag and drop to exclude resize handle.
2025-10-08 21:43:02 +02:00
/* 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);
wip
2025-09-09 14:35:21 +02:00
}
Improves event resizing with smooth animation Replaces the previous rough event resizing implementation with a smooth, animated approach. Uses pointer events for accurate tracking and adds a visual resize handle for better user interaction. Also refactors drag and drop to exclude resize handle.
2025-10-08 21:43:02 +02:00
/* Global resizing state */
.swp--resizing {
user-select: none !important;
cursor: ns-resize !important;
}
.swp--resizing * {
cursor: ns-resize !important;
}
Enables event resizing via drag handles Adds a resize handle manager to handle mouse hover effects on calendar events and display a resize indicator. This allows users to visually identify and initiate event resizing by hovering near the bottom edge of an event.
2025-10-06 23:38:01 +02:00
swp-day-columns swp-event-time {
Adds event description support in calendar UI Extends event model to include optional description field Enhances event rendering with: - New description getter/setter in base event element - Updated CSS grid layout for description display - Dynamic description handling in event rendering - Updated mock event data with descriptions Improves visual information density and event context in calendar view
2025-11-12 21:17:20 +01:00
grid-column: 1;
grid-row: 1;
Enables event resizing via drag handles Adds a resize handle manager to handle mouse hover effects on calendar events and display a resize indicator. This allows users to visually identify and initiate event resizing by hovering near the bottom edge of an event.
2025-10-06 23:38:01 +02:00
font-size: 0.875rem;
font-weight: 500;
Adds event description support in calendar UI Extends event model to include optional description field Enhances event rendering with: - New description getter/setter in base event element - Updated CSS grid layout for description display - Dynamic description handling in event rendering - Updated mock event data with descriptions Improves visual information density and event context in calendar view
2025-11-12 21:17:20 +01:00
white-space: nowrap;
Improves all-day event drag and drop Refactors all-day event drag and drop handling for improved accuracy and performance. Introduces a shared `ColumnDetectionUtils` for consistent column detection. Simplifies all-day conversion during drag, placing events in row 1 and calculating the column from the target date. Implements differential updates during drag end, updating only changed events for smoother transitions.
2025-09-26 22:11:57 +02:00
}
Enables event resizing via drag handles Adds a resize handle manager to handle mouse hover effects on calendar events and display a resize indicator. This allows users to visually identify and initiate event resizing by hovering near the bottom edge of an event.
2025-10-06 23:38:01 +02:00
swp-day-columns swp-event-title {
Adds event description support in calendar UI Extends event model to include optional description field Enhances event rendering with: - New description getter/setter in base event element - Updated CSS grid layout for description display - Dynamic description handling in event rendering - Updated mock event data with descriptions Improves visual information density and event context in calendar view
2025-11-12 21:17:20 +01:00
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;
Enables event resizing via drag handles Adds a resize handle manager to handle mouse hover effects on calendar events and display a resize indicator. This allows users to visually identify and initiate event resizing by hovering near the bottom edge of an event.
2025-10-06 23:38:01 +02:00
display: block;
font-size: 0.875rem;
Adds event description support in calendar UI Extends event model to include optional description field Enhances event rendering with: - New description getter/setter in base event element - Updated CSS grid layout for description display - Dynamic description handling in event rendering - Updated mock event data with descriptions Improves visual information density and event context in calendar view
2025-11-12 21:17:20 +01:00
opacity: 0.8;
Enables event resizing via drag handles Adds a resize handle manager to handle mouse hover effects on calendar events and display a resize indicator. This allows users to visually identify and initiate event resizing by hovering near the bottom edge of an event.
2025-10-06 23:38:01 +02:00
line-height: 1.3;
Adds event description support in calendar UI Extends event model to include optional description field Enhances event rendering with: - New description getter/setter in base event element - Updated CSS grid layout for description display - Dynamic description handling in event rendering - Updated mock event data with descriptions Improves visual information density and event context in calendar view
2025-11-12 21:17:20 +01:00
overflow: hidden;
word-wrap: break-word;
}
/* Hide description if event is too short (<60px) */
swp-day-columns swp-event[style*="height: 30px"] swp-event-description,
swp-day-columns swp-event[style*="height: 31px"] swp-event-description,
swp-day-columns swp-event[style*="height: 32px"] swp-event-description,
swp-day-columns swp-event[style*="height: 33px"] swp-event-description,
swp-day-columns swp-event[style*="height: 34px"] swp-event-description,
swp-day-columns swp-event[style*="height: 35px"] swp-event-description,
swp-day-columns swp-event[style*="height: 36px"] swp-event-description,
swp-day-columns swp-event[style*="height: 37px"] swp-event-description,
swp-day-columns swp-event[style*="height: 38px"] swp-event-description,
swp-day-columns swp-event[style*="height: 39px"] swp-event-description,
swp-day-columns swp-event[style*="height: 40px"] swp-event-description,
swp-day-columns swp-event[style*="height: 41px"] swp-event-description,
swp-day-columns swp-event[style*="height: 42px"] swp-event-description,
swp-day-columns swp-event[style*="height: 43px"] swp-event-description,
swp-day-columns swp-event[style*="height: 44px"] swp-event-description,
swp-day-columns swp-event[style*="height: 45px"] swp-event-description,
swp-day-columns swp-event[style*="height: 46px"] swp-event-description,
swp-day-columns swp-event[style*="height: 47px"] swp-event-description,
swp-day-columns swp-event[style*="height: 48px"] swp-event-description,
swp-day-columns swp-event[style*="height: 49px"] swp-event-description,
swp-day-columns swp-event[style*="height: 50px"] swp-event-description,
swp-day-columns swp-event[style*="height: 51px"] swp-event-description,
swp-day-columns swp-event[style*="height: 52px"] swp-event-description,
swp-day-columns swp-event[style*="height: 53px"] swp-event-description,
swp-day-columns swp-event[style*="height: 54px"] swp-event-description,
swp-day-columns swp-event[style*="height: 55px"] swp-event-description,
swp-day-columns swp-event[style*="height: 56px"] swp-event-description,
swp-day-columns swp-event[style*="height: 57px"] swp-event-description,
swp-day-columns swp-event[style*="height: 58px"] swp-event-description,
swp-day-columns swp-event[style*="height: 59px"] swp-event-description {
display: none;
Initial commit: Calendar Plantempus project setup with TypeScript, ASP.NET Core, and event-driven architecture
2025-07-24 22:17:38 +02:00
}
/* 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;
/* Event type colors */
&[data-type="milestone"] {
background: var(--color-event-milestone);
color: var(--color-event-milestone-border);
}
/* Continuation indicators */
&[data-continues-before="true"] {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
margin-left: 0;
padding-left: 20px;
&::before {
content: '◀';
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: '▶';
position: absolute;
right: 4px;
opacity: 0.6;
font-size: 0.75rem;
}
}
&:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
}
/* 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));
Adds fuzzy search filter system Implements a fuzzy search filter system using Fuse.js to enhance event searching. This system allows users to quickly find events by typing partial matches of event titles or descriptions, providing visual feedback by dimming non-matching events. The filter persists during navigation and includes escape key support for quick clearing. It also includes performance optimizations like requestAnimationFrame debouncing.
2025-08-23 00:01:59 +02:00
}
/* 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;
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.
2025-09-04 00:16:35 +02:00
}
/* Event overlap styling */
/* Event group container for column sharing */
Fixes event overlap detection and stacking logic Updates the event overlap detection to accurately determine when events overlap in time, fixing incorrect stacking behavior. Implements column sharing for events starting within 30 minutes of each other. Applies stacking only when events truly overlap in time but start times differ by more than 30 minutes. Removes unnecessary data attributes and simplifies styling for stacked events, improving code cleanliness and performance.
2025-09-04 19:22:26 +02:00
swp-event-group {
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.
2025-09-04 00:16:35 +02:00
position: absolute;
Implements advanced event stacking and grid layout Introduces a 3-phase algorithm in `EventStackManager` for dynamic event positioning. Groups events by start time proximity to determine optimal layout. Optimizes horizontal space by using side-by-side grid columns for simultaneous events and allowing non-overlapping events to share stack levels. Supports nested stacking for late-arriving events within grid columns. Includes comprehensive documentation (`STACKING_CONCEPT.md`) and a visual demonstration (`stacking-visualization.html`) to explain the new layout logic. Updates event rendering to utilize the new manager and adds extensive test coverage.
2025-10-05 23:54:50 +02:00
display: grid;
gap: 2px;
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.
2025-09-04 00:16:35 +02:00
left: 2px;
Implements advanced event stacking and grid layout Introduces a 3-phase algorithm in `EventStackManager` for dynamic event positioning. Groups events by start time proximity to determine optimal layout. Optimizes horizontal space by using side-by-side grid columns for simultaneous events and allowing non-overlapping events to share stack levels. Supports nested stacking for late-arriving events within grid columns. Includes comprehensive documentation (`STACKING_CONCEPT.md`) and a visual demonstration (`stacking-visualization.html`) to explain the new layout logic. Updates event rendering to utilize the new manager and adds extensive test coverage.
2025-10-05 23:54:50 +02:00
right: 2px;
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.
2025-09-04 00:16:35 +02:00
z-index: 10;
}
Implements advanced event stacking and grid layout Introduces a 3-phase algorithm in `EventStackManager` for dynamic event positioning. Groups events by start time proximity to determine optimal layout. Optimizes horizontal space by using side-by-side grid columns for simultaneous events and allowing non-overlapping events to share stack levels. Supports nested stacking for late-arriving events within grid columns. Includes comprehensive documentation (`STACKING_CONCEPT.md`) and a visual demonstration (`stacking-visualization.html`) to explain the new layout logic. Updates event rendering to utilize the new manager and adds extensive test coverage.
2025-10-05 23:54:50 +02:00
/* 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;
}
Adds shadow to stacked events Improves the visual appearance of stacked events by adding a subtle shadow effect, enhancing depth and distinction between overlapping elements.
2025-10-08 22:57:02 +02:00
/* 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);
}
Implements advanced event stacking and grid layout Introduces a 3-phase algorithm in `EventStackManager` for dynamic event positioning. Groups events by start time proximity to determine optimal layout. Optimizes horizontal space by using side-by-side grid columns for simultaneous events and allowing non-overlapping events to share stack levels. Supports nested stacking for late-arriving events within grid columns. Includes comprehensive documentation (`STACKING_CONCEPT.md`) and a visual demonstration (`stacking-visualization.html`) to explain the new layout logic. Updates event rendering to utilize the new manager and adds extensive test coverage.
2025-10-05 23:54:50 +02:00
/* Child events within grid */
Fixes event overlap detection and stacking logic Updates the event overlap detection to accurately determine when events overlap in time, fixing incorrect stacking behavior. Implements column sharing for events starting within 30 minutes of each other. Applies stacking only when events truly overlap in time but start times differ by more than 30 minutes. Removes unnecessary data attributes and simplifies styling for stacked events, improving code cleanliness and performance.
2025-09-04 19:22:26 +02:00
swp-event-group swp-event {
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.
2025-09-04 00:16:35 +02:00
position: relative;
left: 0;
right: 0;
}
Improves all-day event drag and drop Refactors all-day event drag and drop handling for improved accuracy and performance. Introduces a shared `ColumnDetectionUtils` for consistent column detection. Simplifies all-day conversion during drag, placing events in row 1 and calculating the column from the target date. Implements differential updates during drag end, updating only changed events for smoother transitions.
2025-09-26 22:11:57 +02:00
/* 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;
}
Reference in a new issue Copy permalink