From 039bf9d92249bed5be97de21eaa00b7e81264e81 Mon Sep 17 00:00:00 2001
From: Marie Birner <mb@studiomitte.com>
Date: Thu, 6 Apr 2023 13:47:52 +0200
Subject: [PATCH] [TASK] styling user / cox / admin

---
 frontend/scss/app.scss    |  6 +++++
 templates/index.html.tera | 48 +++++++++++++++++++++------------------
 2 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/frontend/scss/app.scss b/frontend/scss/app.scss
index c9e7c41..71b73ac 100644
--- a/frontend/scss/app.scss
+++ b/frontend/scss/app.scss
@@ -84,4 +84,10 @@
       z-index: 1;
   }
 }
+
+.deregister-btn {
+  + .register-btn {
+    display: none;
+  }
+}
 /* purgecss end ignore */
diff --git a/templates/index.html.tera b/templates/index.html.tera
index 0de79c0..a86694b 100644
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@@ -18,8 +18,8 @@
     <h1 class="text-center text-3xl uppercase tracking-wide font-bold text-primary-900 sm:col-span-2 lg:col-span-3">Ausfahrten</h1>
 
     {% for day in days %}
-    <div class="bg-white p-3 rounded-md">
-      <h2 class="mb-2 text-md font-bold uppercase tracking-wide">{{ day.day| date(format="%d.%m.%Y") }}</h2>
+    <div class="bg-white p-3 rounded-md flex justify-between flex-col">
+      <h2 class="text-md font-bold uppercase tracking-wide">{{ day.day| date(format="%d.%m.%Y") }}</h2>
 
       {% for planned_event in day.planned_events %}
         <h3>Planned event '{{ planned_event.name }}'</h3>
@@ -32,7 +32,7 @@
         {% for cox in planned_event.cox %}
           {{ cox }}
           {% if cox == loggedin_user.name %}
-            <a href="/cox/remove/{{ planned_event.id }}" class="rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer">ABMELDEN</a>
+            <a href="/cox/remove/{{ planned_event.id }}" class="rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer">Abmelden</a>
           {% endif %}
         {% endfor %}
         <br />
@@ -41,12 +41,12 @@
         {% for rower in planned_event.rower%}
           {{ rower.name }} (angemeldet seit {{ rower.registered_at }})
           {% if rower.name == loggedin_user.name %}
-            <a href="/remove/{{ planned_event.trip_details_id }}" class="rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer">ABMELDEN</a>
+            <a href="/remove/{{ planned_event.trip_details_id }}" class="rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer">Abmelden</a>
           {% endif %}
         {% endfor %}
 
         {% if planned_event.max_people > planned_event.rower | length %}
-          <a href="/join/{{ planned_event.trip_details_id }}" class="rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer">MITRUDERN</a>
+          <a href="/join/{{ planned_event.trip_details_id }}" class="rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer">Mitrudern</a>
         {% endif %}
 
 
@@ -62,19 +62,23 @@
       {% if day.trips | length > 0 %}
         <div class="grid grid-cols-1 gap-3 divide-y mb-3">
           {% for trip in day.trips %}
-          <div>
-              <div class="flex justify-between">
-                <div><strong class="text-primary-900">{{ trip.planned_starting_time }} Uhr</strong> <small class="text-gray-600">({{ trip.cox_name }})</small></div>
-                <a href="#" data-sidebar="true" data-trigger="detailTrip{{ trip.trip_details_id }}" class="inline-block text-primary-600 hover:text-primary-900 underline mr-3">Details</a>  
+          <div class="pt-2">
+              <div class="flex justify-between items-center">
+                <div>
+                  <strong class="text-primary-900">{{ trip.planned_starting_time }} Uhr</strong> <small class="text-gray-600">({{ trip.cox_name }})</small><br/>
+                  <a href="#" data-sidebar="true" data-trigger="detailTrip{{ trip.trip_details_id }}" class="inline-block text-primary-600 hover:text-primary-900 underline mr-3">Details</a>                  
+                </div>
+                <div>
+                  {% for rower in trip.rower %}
+                    {% if rower.name == loggedin_user.name %}
+                      <a href="/remove/{{ trip.trip_details_id }}" class="deregister-btn inline-block rounded-md bg-[#f43f5e] px-3 py-2 text-sm font-semibold text-white hover:bg-[#ff0000] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#ff0000] cursor-pointer">Abmelden</a>
+                    {% endif %}
+                  {% endfor %}
+                  {% if trip.max_people > trip.rower | length  and trip.cox_id != loggedin_user.id %}
+                    <a href="/join/{{ trip.trip_details_id }}" class="register-btn inline-block rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer">Mitrudern</a>
+                  {% endif %}
+                </div>
               </div>
-              {% if trip.max_people > trip.rower | length  and trip.cox_id != loggedin_user.id %}
-                <a href="/join/{{ trip.trip_details_id }}" class="inline-block mt-1 rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer">MITRUDERN</a>
-              {% endif %}
-              {% for rower in trip.rower %}
-                {% if rower.name == loggedin_user.name %}
-                  <a href="/remove/{{ trip.trip_details_id }}" class="inline-block mt-1 rounded-md bg-[#f43f5e] px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer">ABMELDEN</a>
-                {% endif %}
-              {% endfor %}
           </div>
           <div class="sidebar slide-in from-right" id="detailTrip{{ trip.trip_details_id }}" aria-modal="false">
             <div class="bg-primary-900 text-white px-2 py-3 flex justify-between sidebar-header">
@@ -91,7 +95,7 @@
                 </div>
             </div>
             <div class="px-2 pt-2" style="margin-top: 63px; margin-bottom: 157px">
-              <div class="text-primay-900 bg-primary-100 text-center p-1 mt-1">{{ trip.max_people }} Ruderer können sich für diese Ausfahrt anmelden</div>
+              <div class="text-primay-900 bg-primary-100 text-center p-1 mt-1">{{ trip.max_people }} Ruderer können teilnehmen</div>
              
               {% if trip.rower | length > 0 %}
                 <div class="mt-2">
@@ -108,8 +112,9 @@
         </div>
       {% endif %}
 
-      {% if loggedin_user.is_admin %}
-        <a href="#" data-sidebar="true" data-trigger="plannedTrip{{ loop.index }}" class="inline-block text-primary-600 hover:text-primary-900 underline mr-3">Event hinzufügen</a>
+      <div>
+        {% if loggedin_user.is_admin %}
+        <a href="#" data-sidebar="true" data-trigger="plannedTrip{{ loop.index }}" class="inline-block text-primary-900 hover:text-primary-950 underline mr-3">Event hinzufügen</a>
 
         <div class="sidebar slide-in from-right" id="plannedTrip{{ loop.index }}" aria-modal="false">
           <div class="bg-primary-900 text-white px-2 py-3 flex justify-between sidebar-header">
@@ -166,8 +171,7 @@
       </div>
       <div class="sidebar-overlay"  data-trigger="trip{{ loop.index }}"></div>
       {% endif %}
-
-
+      </div>
     </div>
     {% endfor %}
     </div>