Merge branch 'styling' of gitlab.com:PhilippHofer/rot into styling

This commit is contained in:
philipp 2023-07-30 20:50:37 +02:00
commit aab8b04811
4 changed files with 26 additions and 28 deletions

View File

@ -1,11 +1,11 @@
.status { .status-damage {
@apply inline-block w-[12px] h-[12px] rounded-full mr-2; @apply inline-block w-[12px] h-[12px] rounded-full mr-2 bg-gray-200;
&-good { &-none {
@apply bg-[#15803d]; @apply bg-[#15803d];
} }
&-alert { &-light {
@apply bg-[#ffae42]; @apply bg-[#ffae42];
} }

View File

@ -91,22 +91,20 @@
{% if only_ones %} {% if only_ones %}
{% set_global boats = boats | filter(attribute="amount_seats", value=1) %} {% set_global boats = boats | filter(attribute="amount_seats", value=1) %}
{% endif %} {% endif %}
{% for boat in boats %} {% for amount_seats, grouped_boats in boats | group_by(attribute="amount_seats") %}
{% set status = 'good' %} <div class="pb-2">
<div class="bg-gray-100 text-primary-950 text-center text-sm mb-2">
<strong>{{ amount_seats }}x</strong>
</div>
{% for boat in grouped_boats %}
<div id="boat-{{ boat.id }}" {% if boat.damage != 'locked' %} onclick="document.getElementById('boat_id').value='{{ boat.id }}';updateElementsBasedOnSelectedOption()"{% endif %} class="px-3">
<span class="status-damage status-damage-{{ boat.damage }}"></span>
<span {% if boat.damage == 'locked' or boat.on_water %} class="opacity-50" {% endif %}>{{ boat.name }}</span>
</div>
{% endfor %}
</div>
{% endfor %}
{% if loop.index == 3 %}
{% set status = 'locked' %}
{% endif %}
{% if loop.index == 1 %}
{% set status = 'alert' %}
{% endif %}
<div id="boat-{{ boat.id }}" {% if status != 'locked' %} onclick="document.getElementById('boat_id').value='{{ boat.id }}';updateElementsBasedOnSelectedOption()"{% endif %}>
<span class="status status-{{ status }}"></span>
<span {% if status == 'locked' %} class="opacity-50" {% endif %}>{{ boat.name }}</span>
</div>
{% endfor %}
<script> <script>
function updateElementsBasedOnSelectedOption() { function updateElementsBasedOnSelectedOption() {
var selectElement = document.getElementById('boat_id'); var selectElement = document.getElementById('boat_id');

View File

@ -13,20 +13,20 @@
{% endif %} {% endif %}
<div class="w-full grid md:grid-cols-5 gap-3 mt-5"> <div class="w-full grid md:grid-cols-5 gap-3 mt-5">
<div class="bg-white rounded-md hidden md:block"> <div class="bg-white rounded-md hidden md:block shadow">
<h2 class="h2">Boote</h2> <h2 class="h2">Boote</h2>
<div class="p-3"> <div>
{{ log::show_boats(only_ones=false) }} {{ log::show_boats(only_ones=false) }}
</div> </div>
</div> </div>
<div class="md:col-span-3 bg-white rounded-md"> <div class="md:col-span-3 bg-white rounded-md shadow">
<h2 class="h2">Neue Ausfahrt</h2> <h2 class="h2">Neue Ausfahrt</h2>
<div class="p-3"> <div class="p-3">
{{ log::new(only_ones=false, allow_any_shipmaster=true, shipmaster=-1) }} {{ log::new(only_ones=false, allow_any_shipmaster=true, shipmaster=-1) }}
</div> </div>
</div> </div>
<div class="bg-white rounded-md"> <div class="bg-white rounded-md shadow">
<h2 class="h2">Am Wasser</h2> <h2 class="h2">Am Wasser</h2>
<div> <div>

View File

@ -12,20 +12,20 @@
<h1 class="h1">Logbuch</h1> <h1 class="h1">Logbuch</h1>
<div class="w-full grid md:grid-cols-5 gap-3 mt-5"> <div class="w-full grid md:grid-cols-5 gap-3 mt-5">
<div class="bg-white rounded-md hidden md:block"> <div class="bg-white rounded-md hidden md:block shadow">
<h2 class="h2">Boote</h2> <h2 class="h2">Boote</h2>
<div class="p-3"> <div>
{{ log::show_boats(only_ones=false) }} {{ log::show_boats(only_ones=false) }}
</div> </div>
</div> </div>
<div class="md:col-span-3 bg-white rounded-md"> <div class="md:col-span-3 bg-white rounded-md shadow">
<h2 class="h2">Neue Ausfahrt</h2> <h2 class="h2">Neue Ausfahrt</h2>
<div class="p-3"> <div class="p-3">
{{ log::new(only_ones=loggedin_user.is_cox==false, allow_any_shipmaster=loggedin_user.is_cox, shipmaster=loggedin_user.id) }} {{ log::new(only_ones=loggedin_user.is_cox==false, allow_any_shipmaster=loggedin_user.is_cox, shipmaster=loggedin_user.id) }}
</div> </div>
</div> </div>
<div class="bg-white rounded-md"> <div class="bg-white rounded-md shadow">
<h2 class="h2">Am Wasser</h2> <h2 class="h2">Am Wasser</h2>
{% for log in on_water %} {% for log in on_water %}