[TASK] improve styling boat list

templates/includes/forms/log.html.tera

@@ -4,24 +4,38 @@
  #}
 {% macro show_boats() %}
     {% for amount_seats, grouped_boats in boats | group_by(attribute="amount_seats") %}
-        <div class="pb-2">
+        <details>
-            <div class="bg-gray-100 dark:bg-primary-600 text-primary-950 dark:text-white text-center text-sm mb-2">
+            <summary class="font-bold cursor-pointer text-primary-900 dark:text-white border-t p-3 hover:bg-gray-100 dark:hover:bg-primary-950">
-                <strong>{{ amount_seats }}x</strong>
+                <span>
+                    {% if grouped_boats[0].amount_seats < 9 or grouped_boats[0].amount_seats == 24 %}
+                        {{ amount_seats }}x
+                    {% elif grouped_boats[0].amount_seats == 9 %}
+                        {{ grouped_boats[0].amount_seats - 1 }}+
+                    {% else %}
+                        Vereinsfremde Boote
+                    {% endif %}
+                  </span>
+                  <small class="text-gray-500 dark:text-gray-100">
+                    ({{ grouped_boats | length }}) 
+                  </small>
+            </summary>
+            <div class="pb-3">
+              {% for boat in grouped_boats | sort(attribute="name") %}
+                  <div id="boat-{{ boat.id }}"
+                      class="py-3 mx-3 boats-js text-black dark:text-white border-t {% if boat.damage != 'locked' and not boat.on_water %} cursor-pointer hover:text-primary-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-primary-950 {% endif %}"
+                      {% if boat.damage != 'locked' and not boat.on_water %} data-seats="{{ boat.amount_seats }}" data-default_shipmaster_only_steering="{{ boat.default_shipmaster_only_steering }}" data-default-destination="{{ boat.default_destination }}" data-onclick="true" {% endif %}
+                      data-id="{{ boat.id }}">
+                      <span class="status-damage status-damage-{{ boat.damage }}"></span>
+                      <span {% if boat.damage == 'locked' or boat.on_water %}class="opacity-50"{% endif %}>{{ boat.name }}
+                          {% if boat.owner %}<span class="opacity-50">(privat)</span>{% endif %}
+                      </span>
+                  </div>
+              {% endfor %}
             </div>
-            {% for boat in grouped_boats | sort(attribute="name") %}
+          </details>
-                <div id="boat-{{ boat.id }}"
-                     class="px-3 boats-js text-black dark:text-white {% if boat.damage != 'locked' and not boat.on_water %} cursor-pointer hover:text-primary-900 dark:hover:text-gray-100 {% endif %}"
-                     {% if boat.damage != 'locked' and not boat.on_water %} data-seats="{{ boat.amount_seats }}" data-default_shipmaster_only_steering="{{ boat.default_shipmaster_only_steering }}" data-default-destination="{{ boat.default_destination }}" data-onclick="true" {% endif %}
-                     data-id="{{ boat.id }}">
-                    <span class="status-damage status-damage-{{ boat.damage }}"></span>
-                    <span {% if boat.damage == 'locked' or boat.on_water %}class="opacity-50"{% endif %}>{{ boat.name }}
-                        {% if boat.owner %}<span class="opacity-50">(privat)</span>{% endif %}
-                    </span>
-                </div>
-            {% endfor %}
-        </div>
     {% endfor %}
 {% endmacro show_boats %}
+
 {# Shows the form for creating a new logbook entry. #}
 {% macro new(shipmaster) %}
     <form action="/log"

templates/kiosk.html.tera

@@ -15,10 +15,29 @@
                     <h2 class="h2">Boote</h2>
                     <div>{{ log::show_boats(only_ones=false) }}</div>
                 </div>
+                <div class="bg-white dark:bg-primary-900 rounded-md hidden lg:block shadow mt-3">
+                    <h2 class="h2">Schnellauswahl</h2>
+                    <div>
+                      {% for boat in boats %}
+                        {% if boat.id in [42, 36] %}
+                          <div class="p-3 boats-js text-black dark:text-white border-t {% if boat.damage != 'locked' and not boat.on_water %} cursor-pointer hover:text-primary-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-primary-950 {% endif %}"
+                            {% if boat.damage != 'locked' and not boat.on_water %} data-seats="{{ boat.amount_seats }}" data-default_shipmaster_only_steering="{{ boat.default_shipmaster_only_steering }}" data-default-destination="{{ boat.default_destination }}" data-onclick="true" {% endif %}
+                            data-id="{{ boat.id }}">
+                              <span class="status-damage status-damage-{{ boat.damage }}"></span>
+                              <span {% if boat.damage == 'locked' or boat.on_water %}class="opacity-50"{% endif %}>{{ boat.name }}
+                                  {% if boat.owner %}<span class="opacity-50">(privat)</span>{% endif %}
+                              </span>
+                          </div>
+                        {% endif %}
+                      {% endfor %}
+                    </div>
+                </div>
             </div>
-            <div class="lg:col-span-3 bg-white dark:bg-primary-900 rounded-md shadow">
+            <div class="lg:col-span-3">
-                <h2 class="h2">Neue Ausfahrt</h2>
+                <div class="bg-white dark:bg-primary-900 rounded-md shadow">
-                <div class="p-3">{{ log::new(only_ones=false, shipmaster=-1) }}</div>
+                  <h2 class="h2">Neue Ausfahrt</h2>
+                  <div class="p-3">{{ log::new(only_ones=false, shipmaster=-1) }}</div>
+                </div>
             </div>
             <div>
                 <div class="bg-white dark:bg-primary-900 rounded-md shadow pb-2">

templates/log.html.tera

@@ -6,14 +6,16 @@
         <h1 class="h1">Logbuch</h1>
         <div class="w-full grid lg:grid-cols-5 gap-3 mt-5">
             <div>
-                <div class="bg-white dark:bg-primary-900 rounded-md hidden md:block shadow">
+                <div class="bg-white dark:bg-primary-900 rounded-md hidden lg:block shadow">
                     <h2 class="h2">Boote</h2>
                     <div>{{ log::show_boats(only_ones=false) }}</div>
                 </div>
             </div>
-            <div class="lg:col-span-3 bg-white dark:bg-primary-900 rounded-md shadow">
+            <div class="lg:col-span-3">
-                <h2 class="h2">Neue Ausfahrt</h2>
+              <div class="bg-white dark:bg-primary-900 rounded-md shadow">
-                <div class="p-3">{{ log::new(shipmaster=loggedin_user.id) }}</div>
+                  <h2 class="h2">Neue Ausfahrt</h2>
+                  <div class="p-3">{{ log::new(shipmaster=loggedin_user.id) }}</div>
+              </div>
             </div>
             <div>
                 <div class="bg-white dark:bg-primary-900 rounded-md shadow pb-2">