From d34f55471b95b22e1673796bc9b6f22d93e4cb40 Mon Sep 17 00:00:00 2001
From: Max Hohlfeld <maxhohlfeld@posteo.de>
Date: Sat, 19 Jul 2025 22:22:57 +0200
Subject: [PATCH] style: rework calendar ui

---
 web/templates/calendar.html | 40 ++++++++++++++++++-------------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/web/templates/calendar.html b/web/templates/calendar.html
index 26567092..0cf2c61b 100644
--- a/web/templates/calendar.html
+++ b/web/templates/calendar.html
@@ -100,9 +100,10 @@
     <div class="container">
       <div class="level">
         <div class="level-left">
-          <h3 class="title is-3">
-            Events am {{ date|fmt_date(WeekdayDayMonthYear) }}
-          </h3>
+          <div class="level-item is-flex-direction-column is-align-items-start">
+            <h3 class="title is-3">Veranstaltungen</h3>
+            <h5 class="subtitle is-5">am {{ date|fmt_date(WeekdayDayMonthYear) }}</h5>
+          </div>
         </div>
         {% if user.role == Role::Admin || user.role == Role::AreaManager && (selected_area.is_none() ||
         selected_area.unwrap() == user.area_id) %}
@@ -111,15 +112,15 @@
             <svg class="icon">
               <use href="/static/feather-sprite.svg#plus-circle" />
             </svg>
-            <span>Neues Event für diesen Tag</span>
+            <span>Neue Veranstaltung für diesen Tag</span>
           </a>
         </div>
         {% endif %}
       </div>
 
       {% if events_and_assignments.len() == 0 %}
-      <div class="box">
-        <h5 class="subtitle is-5">keine Events geplant</h5>
+      <div class="notification">
+        Keine Veranstaltungen geplant.
       </div>
       {% else %}
       {% for (event, posten, fuehrungsassistent, wachhabender, vehicle) in events_and_assignments %}
@@ -229,33 +230,34 @@
     <div class="container">
       <div class="level">
         <div class="level-left">
-          <h3 class="title is-3">
-            Verfügbarkeiten am {{ date|fmt_date(WeekdayDayMonthYear) }}
-          </h3>
+          <div class="level-item is-flex-direction-column is-align-items-start">
+            <h3 class="title is-3">Verfügbarkeiten</h3>
+            <h5 class="subtitle is-5">am {{ date|fmt_date(WeekdayDayMonthYear) }}</h5>
+          </div>
         </div>
         {% if selected_area.is_none() || selected_area.unwrap() == user.area_id %}
         <div class="level-right">
-          {% let btn_disabled = !user_can_create_availability %}
           <a class="button is-link is-outlined" href="/availability/new-other?date={{ date }}">
             <svg class="icon">
               <use href="/static/feather-sprite.svg#plus-circle" />
             </svg>
             <span>Neue Verfügbarkeit für anderen Nutzer</span>
           </a>
-          <button class="button is-link is-light" hx-get="/availability/new?date={{ date }}" {{
-                  btn_disabled|cond_show("disabled") }} hx-target="closest body">
+          {% let btn_disabled = !user_can_create_availability %}
+          <a class="button is-link is-light" href="/availability/new?date={{ date }}" {{
+             btn_disabled|cond_show("disabled") }}>
             <svg class="icon">
               <use href="/static/feather-sprite.svg#plus-circle" />
             </svg>
             <span>Neue Verfügbarkeit für diesen Tag</span>
-          </button>
+          </a>
         </div>
         {% endif %}
       </div>
 
       {% if availabilities.len() == 0 %}
-      <div class="box">
-        <h5 class="subtitle is-5">keine Verfügbarkeiten eingetragen</h5>
+      <div class="notification">
+        Keine Verfügbarkeiten hinterlegt.
       </div>
       {% else %}
       <div class="box">
@@ -287,19 +289,17 @@
               <td>
                 {% if availability.user_id == user.id || user.role == Role::Admin || user.role == Role::AreaManager %}
                 <div class="buttons is-right">
-                  <a class="button is-primary is-light" hx-boost="true"
-                     href="/availability/edit/{{ availability.id }}">
+                  <a class="button is-primary is-light" href="/availability/edit/{{ availability.id }}"
+                     title="Verfügbarkeit bearbeiten">
                     <svg class="icon">
                       <use href="/static/feather-sprite.svg#edit" />
                     </svg>
-                    <span>Bearbeiten</span>
                   </a>
                   <button class="button is-danger is-light" hx-delete="/availability/delete/{{ availability.id }}"
-                          hx-target="closest tr" hx-swap="delete" hx-trigger="confirmed">
+                          hx-target="closest tr" hx-swap="delete" hx-trigger="confirmed" title="Verfügbarkeit löschen">
                     <svg class="icon">
                       <use href="/static/feather-sprite.svg#x-circle" />
                     </svg>
-                    <span>Löschen</span>
                   </button>
                 </div>
                 {% endif %}