From 3d3577045efb10856ebdcd7a4c579eacdf0c2038 Mon Sep 17 00:00:00 2001
From: Janus Knudsen <janus@sevenweirdpeople.com>
Date: Tue, 5 Aug 2025 19:12:13 +0200
Subject: [PATCH] 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.
---
 src/managers/EventRenderer.ts       | 21 +++------------------
 wwwroot/css/calendar-events-css.css | 13 +++++++------
 2 files changed, 10 insertions(+), 24 deletions(-)

diff --git a/src/managers/EventRenderer.ts b/src/managers/EventRenderer.ts
index b2c6926..4ae98b1 100644
--- a/src/managers/EventRenderer.ts
+++ b/src/managers/EventRenderer.ts
@@ -136,18 +136,9 @@ export class EventRenderer {
         eventElement.style.position = 'absolute';
         eventElement.style.top = `${position.top + 1}px`;
         eventElement.style.height = `${position.height - 1}px`;
-        eventElement.style.left = '2px';
-        eventElement.style.right = '2px';
-        eventElement.style.zIndex = '10';
-        
-        // Style the event element
+
+        // Only set positioning and color - rest is in CSS
         eventElement.style.backgroundColor = event.metadata?.color || '#3498db';
-        eventElement.style.color = 'white';
-        eventElement.style.fontSize = '12px';
-        eventElement.style.padding = '2px 4px';
-        eventElement.style.borderRadius = '3px';
-        eventElement.style.overflow = 'hidden';
-        eventElement.style.cursor = 'pointer';
 
         // Format time for display
         const startTime = this.formatTime(event.start);
@@ -214,13 +205,7 @@ export class EventRenderer {
         });
 
         // Hover effects are handled by CSS
-        eventElement.addEventListener('mouseenter', () => {
-            eventElement.style.zIndex = '20';
-        });
-
-        eventElement.addEventListener('mouseleave', () => {
-            eventElement.style.zIndex = '10';
-        });
+        // Hover effects are now handled by CSS
     }
 
     private clearEvents(): void {
diff --git a/wwwroot/css/calendar-events-css.css b/wwwroot/css/calendar-events-css.css
index ef0472f..9cefb06 100644
--- a/wwwroot/css/calendar-events-css.css
+++ b/wwwroot/css/calendar-events-css.css
@@ -3,14 +3,16 @@
 /* Event base styles */
 swp-event {
   position: absolute;
-  border-radius: 4px;
+  border-radius: 3px;
   overflow: hidden;
-  cursor: move;
+  cursor: pointer;
   transition: box-shadow 150ms ease, transform 150ms ease;
   z-index: 10;
-  left: 1px;
-  right: 1px;
-  padding: 8px;
+  left: 2px;
+  right: 2px;
+  color: white;
+  font-size: 12px;
+  padding: 2px 4px;
   
   /* Event types */
   &[data-type="meeting"] {
@@ -45,7 +47,6 @@ swp-event-time {
   display: block;
   font-size: 0.875rem;
   font-weight: 500;
-  opacity: 0.8;
   margin-bottom: 4px;
 }