Enhance appointment UI styling and layout.

Introduced sticky header for controls, improved appointment grouping and styling, and added alternating background colors for better readability. Adjusted HTML structure to simplify date selection and align styles with updated CSS. Expanded appointment details representation for better clarity.

Author: David Schowalter

app/static/css/appointments.css

@@ -11,10 +11,22 @@
     to { opacity: 1; transform: translateY(0); }
 }
 
+/* Sticky Header für Steuerelemente */
+.controls-header {
+    position: sticky;
+    top: 0;
+    background-color: white;
+    padding: var(--spacing-sm);
+    z-index: 100;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    margin-bottom: var(--spacing-md);
+    border-radius: var(--border-radius);
+}
+
 /* Fetch-Button */
 .btn-fetch {
     background-color: var(--primary-color);
-    margin-bottom: var(--spacing-xl);
+    margin-bottom: var(--spacing-md);
     position: relative;
     overflow: hidden;
 }
@@ -122,6 +134,34 @@
     scrollbar-color: var(--primary-color) #f0f0f0;
 }
 
+/* Gruppierung für Termine */
+.appointment-group {
+    margin-bottom: var(--spacing-md);
+    border-bottom: 1px solid var(--border-color);
+    padding-bottom: var(--spacing-sm);
+}
+
+.appointment-group-header {
+    background-color: var(--primary-color);
+    color: white;
+    padding: 5px 10px;
+    border-radius: 4px;
+    margin-bottom: 8px;
+    font-weight: bold;
+    font-size: 0.9rem;
+    display: flex;
+    justify-content: space-between;
+}
+
+.appointment-count {
+    background-color: white;
+    color: var(--primary-color);
+    border-radius: 10px;
+    padding: 0 8px;
+    font-size: 0.8rem;
+    display: inline-block;
+}
+
 .appointments-container::-webkit-scrollbar {
     width: 8px;
 }
@@ -149,13 +189,21 @@
 
 .appointment-item {
     padding: var(--spacing-xs) var(--spacing-sm);
+    background-color: #f5f9ff; /* Leichter Hintergrund für bessere Unterscheidung */
+    margin-bottom: 4px;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
 }
 
 .calendar-item {
     margin-bottom: 2px;
     padding: 0 var(--spacing-xs);
 }
 
+/* Alternierende Farben für Termine */
+.appointment-item:nth-child(even) {
+    background-color: #f0f7ff;
+}
+
 .appointment-item {
     flex-wrap: wrap;
 }
@@ -181,6 +229,23 @@
     padding: var(--spacing-xs) 0;
 }
 
+/* Verbesserte Darstellung der Termindetails */
+.appointment-label {
+    display: flex;
+    flex-direction: column;
+}
+
+.appointment-date {
+    font-weight: bold;
+    color: var(--primary-color);
+    font-size: 0.9rem;
+}
+
+.appointment-description {
+    color: var(--text-color);
+    margin-top: 2px;
+}
+
 /* Hover-Effekte */
 .appointment-item:hover,
 .calendar-item:hover {

app/templates/appointments.html

@@ -67,9 +67,9 @@
 
                     // Mit Verzögerung scrollen, um sicherzustellen, dass die Seite vollständig geladen ist
                     setTimeout(function() {
-                        // Zu fetch_appointments scrollen (Button oder Input mit diesem Namen)
+                        // Zu den Appointments-Actions scrollen (Buttons über den Terminen)
                         $('html, body').animate({
-                            scrollTop: $('input[name="fetch_appointments"]').offset().top - 20
+                            scrollTop: $('.appointments-actions').offset().top - 20
                         }, 1000);
                     }, 500);
                 }
@@ -207,6 +207,21 @@ <h2>{{ base_url }}</h2>
 
     <!-- Form to fetch appointments -->
     <form method="POST">
+        <div class="controls-header">
+            <!-- Date selection -->
+            <label for="start_date">Startdatum:</label>
+            <input type="text" id="start_date" name="start_date"
+                   value="{{ start_date }}" required>
+    
+            <label for="end_date">Enddatum:</label>
+            <input type="text" id="end_date" name="end_date"
+                   value="{{ end_date }}" required>
+    
+            <!-- Submit button for fetching appointments -->
+            <input type="submit" name="fetch_appointments"
+                   value="Termine abholen" class="btn btn-fetch">
+        </div>
+        
         <!-- Calendars selection -->
         <div class="calendars-container">
             {% for calendar in calendars %}
@@ -221,19 +236,6 @@ <h2>{{ base_url }}</h2>
                 </div>
             {% endfor %}
         </div>
-
-        <!-- Date selection -->
-        <label for="start_date">Startdatum:</label>
-        <input type="text" id="start_date" name="start_date"
-               value="{{ start_date }}" required>
-
-        <label for="end_date">Enddatum:</label>
-        <input type="text" id="end_date" name="end_date"
-               value="{{ end_date }}" required>
-
-        <!-- Submit button for fetching appointments -->
-        <input type="submit" name="fetch_appointments"
-               value="Termine abholen" class="btn btn-fetch">
     </form>
     {% if appointments %}
         <form method="POST" enctype="multipart/form-data">
@@ -247,9 +249,11 @@ <h2>{{ base_url }}</h2>
                         <input type="checkbox" id="appointment-{{ appointment['id'] }}" name="appointment_id"
                                value="{{ appointment['id'] }}" class="appointment-checkbox" checked>
                         <label for="appointment-{{ appointment['id'] }}" class="appointment-label">
-                            {{ appointment['startDateView'] }}
-                            ({{ appointment['startTimeView'] }}-{{ appointment['endTimeView'] }})
-                            <br/>{{ appointment['description'] }}
+                            <span class="appointment-date">
+                                {{ appointment['startDateView'] }}
+                                ({{ appointment['startTimeView'] }}-{{ appointment['endTimeView'] }})
+                            </span>
+                            <span class="appointment-description">{{ appointment['description'] }}</span>
                         </label>
                         <textarea name="additional_info_{{ appointment['id'] }}"
                                   placeholder="Zusätzliche Informationen">{{ appointment['additional_info'] | default('') }}</textarea>