[TASK] change card layout

frontend/scss/components/_links.scss

@@ -6,4 +6,8 @@
   &-dark {
     @apply text-primary-900 hover:text-primary-950 underline;
   }
+
+  &-white {
+    @apply text-white hover:text-primary-100 underline;
+  }
 }

templates/includes/macros.html.tera

@@ -1,5 +1,5 @@
 {% macro header(loggedin_user) %}
-    <header class="bg-primary-900 text-white flex justify-center p-3 fixed w-full">
+    <header class="bg-primary-900 text-white flex justify-center p-3 fixed w-full z-10">
       <div class="max-w-screen-xl w-full flex justify-between">
         <div>
           <a href="/">

templates/includes/plus-icon.html.tera

@@ -0,0 +1,3 @@
+<svg class="inline h-5 w-5" width="16" height="16" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16"> 
+  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/> 
+</svg>

templates/index.html.tera

@@ -11,7 +11,7 @@
   <h1 class="h1 sm:col-span-2 lg:col-span-3">Ausfahrten</h1>
 
   {% if loggedin_user.is_cox %}
-    <div class="sm:col-span-2 lg:col-span-3 bg-primary-100 rounded-md p-3 grid md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
+    <div class="sm:col-span-2 lg:col-span-3 grid md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
       <button type="button" title="Toggle View" class="group btn btn-primary" id="filterdays-js" aria-pressed="false">
         {% include "includes/funnel-icon" %}
         Tage mit Ausfahrten
@@ -29,9 +29,11 @@
 
   {% for day in days %}
   {% set amount_trips = day.planned_events | length + day.trips | length %}
-  <div class="bg-white p-3 rounded-md flex justify-between flex-col" data-trips="{{ amount_trips }}" data-month="{{ day.day| date(format='%m') }}">
+  <div class="bg-white p-3 rounded-md flex justify-between flex-col shadow" style="min-height: 10rem;" data-trips="{{ amount_trips }}" data-month="{{ day.day| date(format='%m') }}">
     <div>
-      <h2 class="text-lg text-primary-950 font-bold uppercase tracking-wide">{{ day.day| date(format="%d.%m.%Y") }} <small class="inline-block ml-1">{{ day.day | date(format="%A", locale="de_AT") }}</small></h2>
+      <h2 class="font-bold uppercase tracking-wide text-center text-primary-950 text-lg">{{ day.day| date(format="%d.%m.%Y") }}
+        <small class="inline-block ml-1 text-xs text-gray-400">{{ day.day | date(format="%A", locale="de_AT") }}</small>  
+      </h2>
      
       {% if day.planned_events | length > 0 %}
       <div class="grid grid-cols-1 gap-3 divide-y mb-3">
@@ -213,13 +215,19 @@
       {% endif %}
     </div>
 
-    <div>
+    {% if loggedin_user.is_admin or loggedin_user.is_cox %}
+      <div class="-mb-3 -mx-3 grid {% if loggedin_user.is_admin %} grid-cols-2 {% endif %} text-center">
         {% if loggedin_user.is_admin %}
         <a href="#" data-sidebar="true" data-trigger="addTrip" 
           data-header="<strong>Event</strong> am {{ day.day| date(format='%d.%m.%Y') }} erstellen"
           data-day="{{ day.day }}"
           data-form="#addEventForm"
-        class="inline-block link-dark mr-3">Event hinzufügen</a>
+          class="relative inline-block w-full bg-primary-900 hover:bg-primary-950 focus:bg-primary-950 text-white py-2 rounded-bl-md text-sm font-semibold">
+          <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+            {% include "includes/plus-icon" %}
+          </span>
+          Event
+        </a>
         {% endif %}
 
         {% if loggedin_user.is_cox%}
@@ -227,9 +235,15 @@
           data-header="<strong>Ausfahrt</strong> am {{ day.day| date(format='%d.%m.%Y') }} erstellen"
           data-day="{{ day.day }}"
           data-form="#addTripForm"
-        class="inline-block link-primary">Ausfahrt hinzufügen</a>
+          class="relative inline-block w-full py-2 text-primary-900 hover:text-primary-950 focus:text-primary-950 text-sm font-semibold bg-gray-100 hover:bg-gray-200 focus:bg-gray-200 {% if loggedin_user.is_admin %} rounded-br-md {% else %} rounded-md {% endif %}">
+          <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+            {% include "includes/plus-icon" %}
+          </span>
+          Ausfahrt
+        </a>
         {% endif %}
       </div>
+    {% endif %}
   </div>
   {% endfor %}
 </div>