[TASK] basic styling logbook and stats

frontend/main.ts

@@ -297,7 +297,7 @@ function initSearch() {
 }
 
 function filterElements(input: string) {
-  const elements = document.querySelectorAll('form[data-filterable="true"]');
+  const elements = document.querySelectorAll('div[data-filterable="true"]');
   let resultWrapper = <HTMLElement>document.querySelector('#filter-result-js'),
       amountShownElements = 0;
 

templates/admin/user/index.html.tera

@@ -39,7 +39,8 @@
 		<div class="bg-primary-100 p-3 rounded-b-md grid gap-4">
 			<div id="filter-result-js" class="text-primary-950"></div>
 			{% for user in users %}
-				<form action="/admin/user" data-filterable="true" data-filter="{{ user.name }}" method="post" class="bg-white p-3 rounded-md flex items-end md:items-center justify-between">
+        <div data-filterable="true" data-filter="{{ user.name }}">
+          <form action="/admin/user" method="post" class="bg-white p-3 rounded-md flex items-end md:items-center justify-between w-full">
             <div class="w-full">
               <input type="hidden" name="id" value="{{ user.id }}"/>
               <div class="font-bold mb-1">{{ user.name }}
@@ -66,6 +67,7 @@
               <input value="Ändern" type="submit" class="w-28 btn btn-primary"/>
             </div>
           </form>
+        </div>
 			{% endfor %}
 		</div>
 

templates/includes/forms/log.html.tera

@@ -188,39 +188,22 @@
 	</div>
 {% endmacro show %}
 
-{% macro show_old(log, state, allowed_to_close=false, only_ones) %}
-	Bootsname:
-	{{ log.boat.name }}<br/>
-	Schiffsführer:
-	{{ log.shipmaster_user.name }}<br/>
-	{% if log.shipmaster_only_steering %}
-		Schiffsführer steuert nur
-	{% endif %}
-	Weggefahren:
-	{{ log.departure }}<br/>
-	{% if state == "completed" %}
-		Angekommen:
-		{{ log.arrival}}<br/>
-	{% endif %}
+{% macro show_old(log, state, allowed_to_close=false, only_ones, index) %}
+  <div class="border-t bg-white px-3 py-1" data-filterable="true" data-filter="{{ log.boat.name }} {{ log.shipmaster_user.name }} {% for rower in log.rowers %} {{ rower.name }} {% endfor %}">
+    <div>
+      <strong>{{ log.boat.name }}</strong> <small class="text-gray-600">({{ log.shipmaster_user.name }}{% if log.shipmaster_only_steering %} - handgesteuer {% endif %})</small>
+      <small class="block text-gray-600">{{ log.departure | date(format='%d.%m.%Y - %H:%M') }} {% if state == "completed" %}- {{ log.arrival | date(format='%d.%m.%Y - %H:%M') }}{% endif %}</small>
       {% set amount_rowers = log.rowers | length %}
         {% set amount_guests = log.boat.amount_seats - amount_rowers -1 %}
         {% if allowed_to_close and state == "on_water" %}
           {{ log::home(log=log, only_ones=only_ones) }}
         {% else %}
-		Ziel:
-		{{ log.destination }}<br/>
+          <div>
+            {{ log.destination }}
             {% if state == "completed" %}
-			Km:
-			{{ log.distance_in_km }}<br/>
-		{% endif %}
-		{% if log.comments %}
-			Kommentare:
-			{{ log.comments }}<br/>
-		{% endif %}
-		{% if log.logtype %}
-			Logtype:
-			{{ log.logtype }}<br/>
+              <small class="text-gray-600">({{ log.distance_in_km }} km)</small>
             {% endif %}
+          </div>
           {% if amount_guests > 0 or log.rowers | length > 0 %}
             Ruderer:
           {% endif %}
@@ -231,7 +214,17 @@
           {% for rower in log.rowers %}
             {{ rower.name }}
           {% endfor %}
+          {% if log.comments %}
+            Kommentare:
+            {{ log.comments }}<br/>
           {% endif %}
+          {% if log.logtype %}
+            Logtype:
+            {{ log.logtype }}<br/>
+          {% endif %}
+        {% endif %}
+    </div>
+  </div>
 {% endmacro show_old %}
 
 {% macro home(log, only_ones) %}

templates/log.completed.html.tera

@@ -7,10 +7,18 @@
 
 	<div class="max-w-screen-lg w-full">
 		<h1 class="h1">Logbuch</h1>
+
+    <div class="mt-3">
+      <div class="bg-gray-200 p-3 mt-4 rounded-t-md">
+        <label for="name" class="sr-only">Suche</label>
+        <input type="search" name="name" id="filter-js" class="w-full relative block rounded-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 mb-2 md:mb-0" placeholder="Suchen nach...">
+      </div>
+
+      <div id="filter-result-js" class="bg-gray-200 text-primary-950 pb-3 px-3 text-right"></div>
       {% for log in logs %}
-			{{ log::show_old(log=log, state="completed", only_ones=false) }}
-			<hr/>
+        {{ log::show_old(log=log, state="completed", only_ones=false, index=loop.index) }}
       {% endfor %}
     </div>
+	</div>
 
 {% endblock content%}

templates/stat.html.tera

@@ -6,11 +6,13 @@
 
 
 	<div class="max-w-screen-lg w-full">
-		<h1 class="h1">Statstik</h1>
-		<ol>
+		<h1 class="h1">Statistik</h1>
+		<ol class="mt-3">
 			{% for s in stat %}
-				<li>{{s.name}}:
-					{{s.rowed_km}}km</li>
+				<li class="{% if loop.index % 2 == 0 %} bg-gray-200 {% else %} bg-white {% endif %} flex justify-between px-3 py-1">
+          <span>{{s.name}}</span>
+					<span>{{s.rowed_km}}km</span>
+        </li>
 			{% endfor %}
 		</ol>
 	</div>