MB: styling of boathouse

templates/board/boathouse.html.tera

@@ -3,11 +3,11 @@
 {% import "includes/forms/boat" as boat %}
 {% extends "base" %}
 {% macro show_place(aisle_name, side_name, level) %}
-    <li>
+    <li class="truncate p-2 flex relative w-full">
         {% set aisle = aisle_name ~ "-aisle" %}
         {% set place = boathouse[aisle][side_name] %}
         {% if place[level] %}
-            {{ place[level].1.name }} <a href="/board/boathouse/{{ place[level].0 }}/delete">X</a>
+            {{ place[level].1.name }} <a class="btn btn-primary absolute end-0" href="/board/boathouse/{{ place[level].0 }}/delete">X</a>
         {% elif boats | length > 0 %}
             <details>
                 <summary>Kein Boot</summary>
@@ -36,8 +36,8 @@
         </ol>
     </div>
 {% endmacro show_side %}
-{% macro show_aisle(name) %}
-    <div id="{{ name }}-aisle" class="grid grid-cols-2 gap-4">
+{% macro show_aisle(name, last=false) %}
+    <div id="{{ name }}-aisle" class="grid grid-cols-2 gap-4 {% if not last %}md:border-r{% endif %}">
         {{ self::show_side(aisle_name = name, side_name = "mountain") }}
         {{ self::show_side(aisle_name = name, side_name = "water") }}
     </div>
@@ -45,10 +45,10 @@
 {% block content %}
     <div class="max-w-screen-lg w-full dark:text-white">
         <h1 class="h1">Bootshaus</h1>
-        <div class="grid md:grid-cols-3 gap-4 divide-x">
+        <div class="grid md:grid-cols-3 gap-4">
             {{ self::show_aisle(name = "mountain") }}
             {{ self::show_aisle(name = "middle") }}
-            {{ self::show_aisle(name = "water") }}
+            {{ self::show_aisle(name = "water", last = true) }}
         </div>
     </div>
 {% endblock content %}