From 54cedd2ec3d056b3b7079f5dbee6f3ae7ae4edb6 Mon Sep 17 00:00:00 2001
From: Marie Birner <mb@studiomitte.com>
Date: Thu, 28 Sep 2023 14:07:25 +0200
Subject: [PATCH] [TASK] change style of boats on water

---
 templates/includes/forms/log.html.tera | 27 ++++++++++++--------------
 templates/includes/pencil.html.tera    |  4 ++++
 2 files changed, 16 insertions(+), 15 deletions(-)
 create mode 100644 templates/includes/pencil.html.tera

diff --git a/templates/includes/forms/log.html.tera b/templates/includes/forms/log.html.tera
index 2a4557c..2f42781 100644
--- a/templates/includes/forms/log.html.tera
+++ b/templates/includes/forms/log.html.tera
@@ -137,26 +137,23 @@
 	<div class="grid grid-cols-1 gap-3 mb-3 w-full">
 		<div class="pt-2 px-3 {% if not loop.first %} border-t {% endif %}">
 			<div class="w-full">
-				<div class="flex justify-between">
+				<div class="flex justify-between items-center">
 					<div>
-						<strong class="text-primary-900">
+						<strong class="block text-primary-900">
 							{{ log.departure_timestamp | date(format="%H:%M") }}
 							Uhr
 						</strong>
-						<small class="text-gray-600">({{ log.boat.name }})</small>
+            <a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>{{ log.departure_timestamp | date(format="%H:%M") }} Uhr</strong> ({{ log.boat.name }})" data-body="#log{{ log.id }}" class="text-sm link-primary break-all">
+              {{ log.boat.name }}
+            </a>
 					</div>
-
-					<a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>{{ log.departure_timestamp | date(format="%H:%M") }} Uhr</strong> ({{ log.boat.name }})" data-body="#log{{ log.id }}" class="inline-block link-primary mr-3">
-						Details
-					</a>
-				</div>
-
-				<div>
-					{% if allowed_to_close and state == "on_water" %}
-						<a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>{{ log.departure_timestamp | date(format="%H:%M") }} Uhr</strong> ({{ log.boat.name }})" data-body="#close{{ log.id }}" class="btn btn-dark w-full mt-3">
-							Beenden
-						</a>
-					{% endif %}
+          <div>
+            {% if allowed_to_close and state == "on_water" %}
+              <a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>{{ log.departure_timestamp | date(format="%H:%M") }} Uhr</strong> ({{ log.boat.name }})" data-body="#close{{ log.id }}" class="border-0 btn btn-dark text-white flex items-center justify-center ml-3">
+                {% include "includes/pencil" %}
+              </a>
+            {% endif %}
+          </div>
 				</div>
 
 				<div class="hidden">
diff --git a/templates/includes/pencil.html.tera b/templates/includes/pencil.html.tera
new file mode 100644
index 0000000..2bbefa8
--- /dev/null
+++ b/templates/includes/pencil.html.tera
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
+  <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
+  <path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
+</svg>