[TASK] improve styling boat list
Some checks failed
CI/CD Pipeline / deploy-staging (push) Has been cancelled
CI/CD Pipeline / deploy-main (push) Has been cancelled
CI/CD Pipeline / test (push) Has been cancelled

This commit is contained in:
Marie Birner 2024-04-23 22:39:59 +02:00
parent 23a623bdc9
commit e556b1375d
3 changed files with 57 additions and 22 deletions

View File

@ -4,13 +4,25 @@
#}
{% macro show_boats() %}
{% for amount_seats, grouped_boats in boats | group_by(attribute="amount_seats") %}
<div class="pb-2">
<div class="bg-gray-100 dark:bg-primary-600 text-primary-950 dark:text-white text-center text-sm mb-2">
<strong>{{ amount_seats }}x</strong>
</div>
<details>
<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">
<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="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 %}"
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>
@ -20,8 +32,10 @@
</div>
{% endfor %}
</div>
</details>
{% endfor %}
{% endmacro show_boats %}
{# Shows the form for creating a new logbook entry. #}
{% macro new(shipmaster) %}
<form action="/log"

View File

@ -15,11 +15,30 @@
<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>
<div class="lg:col-span-3 bg-white dark:bg-primary-900 rounded-md shadow">
{% endif %}
{% endfor %}
</div>
</div>
</div>
<div class="lg:col-span-3">
<div class="bg-white dark:bg-primary-900 rounded-md shadow">
<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">
<h2 class="h2">Am Wasser</h2>

View File

@ -6,15 +6,17 @@
<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">
<div class="bg-white dark:bg-primary-900 rounded-md shadow">
<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">
<h2 class="h2">Am Wasser</h2>