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

Improves event resize handle interaction

Browse source 
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.
This commit is contained in:
Janus C. H. Knudsen 2025-10-07 17:16:00 +02:00
parent a9819a8bf1
commit 70dce9fd59
2 changed files with 49 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -73,17 +73,34 @@ swp-day-columns swp-event:hover {
/* Resize handle indicator - created by JavaScript */
swp-resize-indicator {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 15px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="4"><rect x="0" y="0" width="16" height="1" fill="%23666"/><rect x="0" y="3" width="16" height="1" fill="%23666"/></svg>');
background-position: center center;
background-repeat: no-repeat;
bottom: -3px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 6px;
background: var(--color-primary);
border-radius: 3px;
pointer-events: none;
z-index: 10;
z-index: 30;
opacity: 0;
animation: fadeIn 0.8s ease forwards;
animation: fadeIn 0.3s ease forwards;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
/* Grip dots on handle */
swp-resize-indicator::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 12px;
height: 2px;
background: rgba(255, 255, 255, 0.7);
border-radius: 1px;
box-shadow:
-5px 0 0 rgba(255, 255, 255, 0.7),
5px 0 0 rgba(255, 255, 255, 0.7);
}
@keyframes fadeIn {
@ -97,6 +114,7 @@ swp-resize-indicator {
swp-day-columns swp-event[data-resize-hover="true"] {
cursor: ns-resize;
overflow: visible;
}
swp-day-columns swp-event-time {