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

Enhances calendar event styling with container queries

Browse source 
Improves event description display using modern CSS container queries
- Adds responsive layout techniques for event descriptions
- Implements dynamic hiding/showing of description based on event height
- Adds fade-out effect for long descriptions

Enables more flexible and adaptive calendar event rendering
This commit is contained in:
Janus C. H. Knudsen 2025-11-12 22:07:19 +01:00
parent 6583ed1063
commit 2d8577d539
1 changed files with 28 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

57
wwwroot/css/calendar-events-css.css
View file

@ -14,6 +14,10 @@ swp-day-columns swp-event {
font-size: 12px; font-size: 12px;
padding: 4px 6px; padding: 4px 6px;
/* Enable container queries for responsive layout */
container-type: size;
container-name: event;
/* CSS Grid layout for time, title, and description */ /* CSS Grid layout for time, title, and description */
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
@ -170,41 +174,32 @@ swp-day-columns swp-event-description {
line-height: 1.3; line-height: 1.3;
overflow: hidden; overflow: hidden;
word-wrap: break-word; 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%);
} }
/* Hide description if event is too short (<60px) */ /* Container queries for height-based layout */
swp-day-columns swp-event[style*="height: 30px"] swp-event-description,
swp-day-columns swp-event[style*="height: 31px"] swp-event-description, /* Hide description when event is too short (< 60px) */
swp-day-columns swp-event[style*="height: 32px"] swp-event-description, @container event (height < 30px) {
swp-day-columns swp-event[style*="height: 33px"] swp-event-description, swp-day-columns 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; display: none;
} }
}
/* Full description for tall events (>= 100px) */
@container event (height >= 100px) {
swp-day-columns swp-event-description {
max-height: none;
}
}
/* Multi-day events */ /* Multi-day events */
swp-multi-day-event { swp-multi-day-event {