Ruderverein-Donau-Linz/rowt
1
1
Fork 0
Code Issues 30 Pull Requests Actions Packages Projects Wiki Activity

[TASK] support dark mode second draft

Browse Source
This commit is contained in:
Marie Birner 2023-11-04 19:33:36 +01:00
parent 2fd053efed
commit 97897437a9
16 changed files with 102 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/scss/app.scss
View File

@ -10,3 +10,4 @@
@import 'components/alert'; @import 'components/alert';
@import 'components/status'; @import 'components/status';
@import 'components/chart'; @import 'components/chart';
@import 'components/search';

2
frontend/scss/components/_btns.scss
View File

@ -6,7 +6,7 @@
} }
&-dark { &-dark {
@apply bg-primary-900 hover:bg-primary-950 dark:bg-primary-950 focus-visible:outline-primary-950; @apply bg-primary-900 hover:bg-primary-950 dark:bg-primary-600 dark:hover:bg-primary-500 focus-visible:outline-primary-950;
} }
&-gray { &-gray {

4
frontend/scss/components/_input.scss
View File

@ -258,7 +258,7 @@ select {
} }
} }
.choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted { .choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
@apply bg-gray-100; @apply bg-gray-100 dark:bg-primary-950;
} }
.choices__list--dropdown .choices__item--selectable.is-highlighted::after, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after { .choices__list--dropdown .choices__item--selectable.is-highlighted::after, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after {
opacity: 0.5; opacity: 0.5;
@ -307,6 +307,8 @@ select {
border: 0; border: 0;
border-radius: 0; border-radius: 0;
max-width: 100%; max-width: 100%;
@apply bg-transparent;
} }
.choices__input:focus { .choices__input:focus {
outline: 0; outline: 0;

2
frontend/scss/components/_links.scss
View File

@ -1,6 +1,6 @@
.link { .link {
&-primary { &-primary {
@apply text-primary-600 hover:text-primary-900 underline; @apply text-primary-600 dark:text-primary-200 hover:text-primary-900 hover:dark:text-primary-300 underline;
} }
&-dark { &-dark {

13
frontend/scss/components/_search.scss Normal file
View File

@ -0,0 +1,13 @@
.search {
&-bar {
@apply w-full relative block rounded-md border-0 py-1.5 px-2 bg-white dark:bg-black text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-black placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 mb-2 md:mb-0;
}
&-wrapper {
@apply bg-gray-200 dark:bg-primary-600 p-3 mt-4 rounded-t-md;
}
&-result {
@apply bg-gray-200 dark:bg-primary-600 text-primary-950 dark:text-white pb-3 px-3 text-right;
}
}

1
frontend/tailwind.config.cjs
View File

@ -40,5 +40,6 @@ export default {
}, },
}, },
plugins: [], plugins: [],
important: true,
} }

28
templates/admin/user/index.html.tera
View File

@ -30,26 +30,29 @@
</form> </form>
<!-- START filterBar --> <!-- START filterBar -->
<div class="bg-primary-200 p-3 mt-4 rounded-t-md"> <div class="search-wrapper">
<label for="name" class="sr-only">Suche</label> <label for="name" class="sr-only">Suche</label>
<input type="search" name="name" id="filter-js" class="w-full relative block rounded-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 mb-2 md:mb-0" placeholder="Suchen nach..."/> <input type="search" name="name" id="filter-js" class="search-bar" placeholder="Suchen nach..."/>
</div> </div>
<!-- END filterBar --> <!-- END filterBar -->
<div class="bg-primary-100 p-3 rounded-b-md grid gap-4"> <div class="bg-primary-100 dark:bg-primary-950 p-3 rounded-b-md grid gap-4">
<div id="filter-result-js" class="text-primary-950"></div> <div id="filter-result-js" class="text-primary-950 dark:text-white text-right"></div>
{% for user in users %} {% for user in users %}
<div data-filterable="true" data-filter="{{ user.name }}"> <div data-filterable="true" data-filter="{{ user.name }}">
<form action="/admin/user" method="post" class="bg-white p-3 rounded-md flex items-end md:items-center justify-between w-full"> <form action="/admin/user" method="post" class="bg-white dark:bg-primary-900 p-3 rounded-md w-full">
<div class="w-full"> <div class="w-full grid gap-3">
<input type="hidden" name="id" value="{{ user.id }}"/> <input type="hidden" name="id" value="{{ user.id }}"/>
<div class="font-bold mb-1">{{ user.name }} <div class="font-bold mb-1 text-black dark:text-white">{{ user.name }}
{% if user.last_access %} {% if user.last_access %}
(last access: (last access:
{{ user.last_access | date }}) {{ user.last_access | date }})
{% endif %} {% endif %}
{% if user.pw %}
<a class="block mt-1 font-normal text-primary-600 dark:text-primary-200 hover:text-primary-900 dark:hover:text-primary-300 underline" href="/admin/user/{{ user.id }}/reset-pw">Passwort zurücksetzen</a>
{% endif %}
</div> </div>
<div class="grid md:grid-cols-3"> <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-3">
{{ macros::checkbox(label='Scheckbuch', name='is_guest', id=loop.index , checked=user.is_guest) }} {{ macros::checkbox(label='Scheckbuch', name='is_guest', id=loop.index , checked=user.is_guest) }}
{{ macros::checkbox(label='Steuerberechtigter', name='is_cox', id=loop.index , checked=user.is_cox) }} {{ macros::checkbox(label='Steuerberechtigter', name='is_cox', id=loop.index , checked=user.is_cox) }}
{{ macros::checkbox(label='Technical', name='is_tech', id=loop.index , checked=user.is_tech) }} {{ macros::checkbox(label='Technical', name='is_tech', id=loop.index , checked=user.is_tech) }}
@ -58,16 +61,13 @@
{{ macros::input(label='Weight (kg)', name='weight', id=loop.index, type="text", value=user.weight) }} {{ macros::input(label='Weight (kg)', name='weight', id=loop.index, type="text", value=user.weight) }}
{{ macros::input(label='Sex', name='sex', id=loop.index, type="text", value=user.sex) }} {{ macros::input(label='Sex', name='sex', id=loop.index, type="text", value=user.sex) }}
</div> </div>
{% if user.pw %}
<a class="inline-block mt-1 text-primary-600 hover:text-primary-900 underline" href="/admin/user/{{ user.id }}/reset-pw">Passwort zurücksetzen</a>
{% endif %}
</div> </div>
<div class="grid gap-3"> <div class="mt-3 text-right">
<a href="/admin/user/{{ user.id }}/delete" class="inline-block btn btn-alert" onclick="return confirm('Wirklich löschen?');"> <a href="/admin/user/{{ user.id }}/delete" class="w-28 btn btn-alert" onclick="return confirm('Wirklich löschen?');">
{% include "includes/delete-icon" %} {% include "includes/delete-icon" %}
Löschen Löschen
</a> </a>
<input value="Ändern" type="submit" class="w-28 btn btn-primary"/> <input value="Ändern" type="submit" class="w-28 btn btn-primary ml-1"/>
</div> </div>
</form> </form>
</div> </div>

16
templates/boatdamages.html.tera
View File

@ -38,24 +38,24 @@
</div> </div>
</div> </div>
<div class="bg-gray-200 p-3 mt-4 rounded-t-md"> <div class="search-wrapper">
<label for="name" class="sr-only">Suche</label> <label for="name" class="sr-only">Suche</label>
<input type="search" name="name" id="filter-js" class="w-full relative block rounded-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 mb-2 md:mb-0" placeholder="Suchen nach Namen..."> <input type="search" name="name" id="filter-js" class="search-bar" placeholder="Suchen nach Namen...">
</div> </div>
<div id="filter-result-js" class="bg-gray-200 text-primary-950 pb-3 px-3 text-right"></div> <div id="filter-result-js" class="search-result"></div>
{% for boatdamage in boatdamages | sort(attribute="verified") %} {% for boatdamage in boatdamages | sort(attribute="verified") %}
<div data-filterable="true" data-filter="{{ boatdamage.boat.name }} {{ boatdamage.user_created.name }}" class="w-full border-t bg-white p-3 {% if boatdamage.verified_at %} opacity-50 {% endif %}"> <div data-filterable="true" data-filter="{{ boatdamage.boat.name }} {{ boatdamage.user_created.name }}" class="w-full border-t bg-white dark:bg-primary-900 text-black dark:text-white p-3 {% if boatdamage.verified_at %} opacity-50 {% endif %}">
<div class="w-full"> <div class="w-full">
<strong>{{ boatdamage.created_at | date(format='%d.%m.%Y') }} <span class="font-normal text-gray-600">({{ boatdamage.boat.name }})</span></strong>{% if boatdamage.boat.damage %}<small class="block text-gray-600">(Boot gesperrt)</small>{% endif %} <strong>{{ boatdamage.created_at | date(format='%d.%m.%Y') }} <span class="font-normal text-gray-600 dark:text-gray-100">({{ boatdamage.boat.name }})</span></strong>{% if boatdamage.boat.damage %}<small class="block text-gray-600 dark:text-gray-100">(Boot gesperrt)</small>{% endif %}
<div>{{ boatdamage.desc }}</div> <div>{{ boatdamage.desc }}</div>
<small class="block text-gray-600"> <small class="block text-gray-600 dark:text-gray-100">
Schaden eingetragen von {{ boatdamage.user_created.name }} am/um {{ boatdamage.created_at | date(format='%d.%m.%Y (%H:%M)') }} Schaden eingetragen von {{ boatdamage.user_created.name }} am/um {{ boatdamage.created_at | date(format='%d.%m.%Y (%H:%M)') }}
</small> </small>
{% if boatdamage.fixed_at %} {% if boatdamage.fixed_at %}
<small class="block text-gray-600">Repariert von {{ boatdamage.user_fixed.name }} am/um {{ boatdamage.fixed_at | date(format='%d.%m.%Y (%H:%M)') }}</small> <small class="block text-gray-600 dark:text-gray-100">Repariert von {{ boatdamage.user_fixed.name }} am/um {{ boatdamage.fixed_at | date(format='%d.%m.%Y (%H:%M)') }}</small>
{% else %} {% else %}
{% if loggedin_user.is_cox %} {% if loggedin_user.is_cox %}
<form action="/boatdamage/{{ boatdamage.id }}/fixed" method="post" class="flex justify-between mt-3"> <form action="/boatdamage/{{ boatdamage.id }}/fixed" method="post" class="flex justify-between mt-3">
@ -70,7 +70,7 @@
{% endif %} {% endif %}
{% if boatdamage.verified_at %} {% if boatdamage.verified_at %}
<small class="block text-gray-600">Verifziert von {{ boatdamage.user_verified.name }} am/um {{ boatdamage.verified_at | date(format='%d.%m.%Y (%H:%M)') }}</small> <small class="block text-gray-600 dark:text-gray-100">Verifziert von {{ boatdamage.user_verified.name }} am/um {{ boatdamage.verified_at | date(format='%d.%m.%Y (%H:%M)') }}</small>
{% else %} {% else %}
{% if loggedin_user.is_tech and boatdamage.fixed_at %} {% if loggedin_user.is_tech and boatdamage.fixed_at %}
<form action="/boatdamage/{{ boatdamage.id }}/verified" method="post" class="flex justify-between mt-3"> <form action="/boatdamage/{{ boatdamage.id }}/verified" method="post" class="flex justify-between mt-3">

16
templates/ergo.html.tera
View File

@ -12,11 +12,11 @@
<div class="grid gap-3"> <div class="grid gap-3">
<details class="bg-white rounded-md p-2 mt-5 shadow"> <details class="bg-white dark:bg-primary-900 text-black dark:text-white rounded-md p-2 mt-5 shadow">
<summary class="cursor-pointer">Deine Daten</summary> <summary class="cursor-pointer">Deine Daten</summary>
<div class="pt-3"> <div class="pt-3">
<p> <p>
Folgende Daten hat der Ruderassistent von dir. Wenn diese nicht mehr aktuell sind, bitte gewünschte Änderungen an Philipp melden (Tel. nr siehe Signal, oder an <a href="mailto:it@rudernlinz.at" class="text-primary-600 hover:text-primary-950 underline" target="_blank">it@rudernlinz.at</a>). Folgende Daten hat der Ruderassistent von dir. Wenn diese nicht mehr aktuell sind, bitte gewünschte Änderungen an Philipp melden (Tel. nr siehe Signal, oder an <a href="mailto:it@rudernlinz.at" class="text-primary-600 dark:text-primary-200 hover:text-primary-950 hover:dark:text-primary-300 underline" target="_blank">it@rudernlinz.at</a>).
<br /><br /> <br /><br />
<ul> <ul>
<li>Geburtsdatum: {{ loggedin_user.dob }}</li> <li>Geburtsdatum: {{ loggedin_user.dob }}</li>
@ -27,7 +27,7 @@
</div> </div>
</details> </details>
<div class="bg-white rounded-md block shadow grid gap-3"> <div class="bg-white dark:bg-primary-900 text-black dark:text-white rounded-md block shadow grid gap-3">
<h2 class="h2">Neuer Eintrag</h1> <h2 class="h2">Neuer Eintrag</h1>
<details class="p-2"> <details class="p-2">
@ -35,7 +35,7 @@
<div class="mt-3"> <div class="mt-3">
<form action="/ergo/thirty" class="grid gap-3" method="post" enctype="multipart/form-data"> <form action="/ergo/thirty" class="grid gap-3" method="post" enctype="multipart/form-data">
<div> <div>
<label for="user-thirty" class="text-sm text-gray-600">Ergo-Fahrer</label> <label for="user-thirty" class="text-sm text-gray-600 dark:text-gray-100">Ergo-Fahrer</label>
<select name="user" id="user-thirty" class="input rounded-md"> <select name="user" id="user-thirty" class="input rounded-md">
<option disabled="disabled">User auswählen</option> <option disabled="disabled">User auswählen</option>
{% for user in users %} {% for user in users %}
@ -51,7 +51,7 @@
{{ macros::input(label="Distanz [m]", name="result", required=true, type="text", class="input rounded-md") }} {{ macros::input(label="Distanz [m]", name="result", required=true, type="text", class="input rounded-md") }}
<div> <div>
<label for="file-thirty" class="text-sm text-gray-600">Ergebnis-Foto vom Ergo-Display</label> <label for="file-thirty" class="text-sm text-gray-600 dark:text-gray-100">Ergebnis-Foto vom Ergo-Display</label>
<input type="file" id="file-thirty" name="proof" class="input rounded-md" accept="image/*" capture="camera"> <input type="file" id="file-thirty" name="proof" class="input rounded-md" accept="image/*" capture="camera">
</div> </div>
<div class="text-end"> <div class="text-end">
@ -66,7 +66,7 @@
<div class="mt-3"> <div class="mt-3">
<form action="/ergo/dozen" class="grid gap-3" method="post" enctype="multipart/form-data"> <form action="/ergo/dozen" class="grid gap-3" method="post" enctype="multipart/form-data">
<div> <div>
<label for="user-dozen" class="text-sm text-gray-600">Ergo-Fahrer</label> <label for="user-dozen" class="text-sm text-gray-600 dark:text-gray-100">Ergo-Fahrer</label>
<select name="user" id="user-dozen" class="input rounded-md"> <select name="user" id="user-dozen" class="input rounded-md">
<option disabled="disabled">User auswählen</option> <option disabled="disabled">User auswählen</option>
{% for user in users %} {% for user in users %}
@ -82,7 +82,7 @@
{{ macros::input(label="Zeit [(hh:)mm:ss]/Distanz [m]", name="result", required=true, type="text", class="input rounded-md") }} {{ macros::input(label="Zeit [(hh:)mm:ss]/Distanz [m]", name="result", required=true, type="text", class="input rounded-md") }}
<div> <div>
<label for="file-dozen" class="text-sm text-gray-600">Ergebnis-Foto vom Ergo-Display</label> <label for="file-dozen" class="text-sm text-gray-600 dark:text-gray-100">Ergebnis-Foto vom Ergo-Display</label>
<input type="file" id="file-dozen" name="proof" class="input rounded-md" accept="image/*" capture="camera"> <input type="file" id="file-dozen" name="proof" class="input rounded-md" accept="image/*" capture="camera">
</div> </div>
<div class="text-end"> <div class="text-end">
@ -94,7 +94,7 @@
</div> </div>
<div class="bg-white rounded-md block shadow grid gap-3"> <div class="bg-white dark:bg-primary-900 text-black dark:text-white rounded-md block shadow grid gap-3">
<h2 class="h2">Aktuelle Woche</h2> <h2 class="h2">Aktuelle Woche</h2>
<details class="p-2"> <details class="p-2">

10
templates/includes/forms/boat.html.tera
View File

@ -28,21 +28,21 @@
</div> </div>
</div> </div>
</div> </div>
<div class="bg-gray-200 p-3 mt-4 rounded-t-md"> <div class="search-wrapper">
<label for="name" class="sr-only">Suche</label> <label for="name" class="sr-only">Suche</label>
<input type="search" name="name" id="filter-js" class="w-full relative block rounded-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 mb-2 md:mb-0" placeholder="Suchen nach Namen..."> <input type="search" name="name" id="filter-js" class="search-bar" placeholder="Suchen nach Namen...">
</div> </div>
<div id="filter-result-js" class="bg-gray-200 text-primary-950 pb-3 px-3 text-right"></div> <div id="filter-result-js" class="search-result"></div>
{% endmacro new %} {% endmacro new %}
{% macro edit(boat, uuid) %} {% macro edit(boat, uuid) %}
<div data-filterable="true" data-filter="{{ boat.name }}" class="w-full border-t"> <div data-filterable="true" data-filter="{{ boat.name }}" class="w-full border-t">
<form action="/admin/boat/{{ boat.id }}" data-filterable="true" method="post" class="bg-white p-4 w-full"> <form action="/admin/boat/{{ boat.id }}" data-filterable="true" method="post" class="bg-white dark:bg-primary-900 p-4 w-full">
<div class="w-full"> <div class="w-full">
<input type="hidden" name="id" value="{{ boat.id }}"/> <input type="hidden" name="id" value="{{ boat.id }}"/>
<div class="font-bold mb-1">{{ boat.name }}<br/></div> <div class="font-bold mb-1 text-black dark:text-white">{{ boat.name }}<br/></div>
<div class="grid md:grid-cols-3 gap-3"> <div class="grid md:grid-cols-3 gap-3">
{{ macros::input(label='Name', name='name', type='text', value=boat.name) }} {{ macros::input(label='Name', name='name', type='text', value=boat.name) }}
{{ macros::input(label='Plätze', name='amount_seats', type='number', min=0, value=boat.amount_seats) }} {{ macros::input(label='Plätze', name='amount_seats', type='number', min=0, value=boat.amount_seats) }}

26
templates/includes/forms/log.html.tera
View File

@ -9,11 +9,11 @@
{% endif %} {% endif %}
{% for amount_seats, grouped_boats in boats | group_by(attribute="amount_seats") %} {% for amount_seats, grouped_boats in boats | group_by(attribute="amount_seats") %}
<div class="pb-2"> <div class="pb-2">
<div class="bg-gray-100 text-primary-950 text-center text-sm mb-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> <strong>{{ amount_seats }}x</strong>
</div> </div>
{% for boat in grouped_boats %} {% for boat in grouped_boats %}
<div id="boat-{{ boat.id }}" class="px-3 boats-js cursor-pointer" {% if boat.damage != 'locked' %} data-seats="{{boat.amount_seats}}" data-default_shipmaster_only_steering="{{boat.default_shipmaster_only_steering}}" data-onclick="true" {% endif %} data-id="{{ boat.id }}"> <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-onclick="true" {% endif %} data-id="{{ boat.id }}">
<span class="status-damage status-damage-{{ boat.damage }}"></span> <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 {% if boat.damage == 'locked' or boat.on_water %} class="opacity-50" {% endif %}>{{ boat.name }}
{% if boat.owner %} {% if boat.owner %}
@ -103,7 +103,7 @@
<div class="w-full"> <div class="w-full">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div> <div>
<strong class="block text-primary-900"> <strong class="block text-primary-900 dark:text-white">
{{ log.departure | date(format="%H:%M") }} {{ log.departure | date(format="%H:%M") }}
Uhr Uhr
</strong> </strong>
@ -135,7 +135,7 @@
{% endif %} {% endif %}
{% for rower in log.rowers %} {% for rower in log.rowers %}
<p>{{ rower.name }} {% if rower.id == log.shipmaster or rower.id == log.steering_person %}<small class="text-gray-600">({% if rower.id == log.shipmaster %}Schiffsführer{% endif %}{% if rower.id == log.shipmaster and rower.id == log.steering_person %}/{% endif %}{% if rower.id == log.steering_person%}Steuerperson{% endif %})</small>{% endif %}</p> <p>{{ rower.name }} {% if rower.id == log.shipmaster or rower.id == log.steering_person %}<small class="text-gray-600 dark:text-primary-100">({% if rower.id == log.shipmaster %}Schiffsführer{% endif %}{% if rower.id == log.shipmaster and rower.id == log.steering_person %}/{% endif %}{% if rower.id == log.steering_person%}Steuerperson{% endif %})</small>{% endif %}</p>
{% endfor %} {% endfor %}
{% set amount_rowers = log.rowers | length %} {% set amount_rowers = log.rowers | length %}
@ -156,7 +156,7 @@
{% endmacro show %} {% endmacro show %}
{% macro show_old(log, state, allowed_to_close=false, only_ones, index) %} {% macro show_old(log, state, allowed_to_close=false, only_ones, index) %}
<div class="border-t bg-white py-3 px-4 relative" data-filterable="true" data-filter="{{ log.boat.name }} {% for rower in log.rowers %} {{ rower.name }} {% endfor %}"> <div class="border-t bg-white dark:bg-primary-900 py-3 px-4 relative" data-filterable="true" data-filter="{{ log.boat.name }} {% for rower in log.rowers %} {{ rower.name }} {% endfor %}">
{% if log.logtype %} {% if log.logtype %}
<div class="absolute top-0 right-0 bg-primary-100 rounded-bl-md text-primary-950 text-xs w-32 px-2 py-1 text-center font-bold"> <div class="absolute top-0 right-0 bg-primary-100 rounded-bl-md text-primary-950 text-xs w-32 px-2 py-1 text-center font-bold">
{% if log.logtype == 1 %} {% if log.logtype == 1 %}
@ -171,8 +171,8 @@
</div> </div>
{% endif %} {% endif %}
<div {% if log.logtype %} class="mt-4 sm:mt-0" {% endif %}> <div {% if log.logtype %} class="mt-4 sm:mt-0" {% endif %}>
<strong>{{ log.boat.name }}</strong> <small class="text-gray-600">({{ log.shipmaster_user.name }}{% if log.shipmaster_only_steering %} - handgesteuert {% endif %})</small> <strong class="text-black dark:text-white">{{ log.boat.name }}</strong> <small class="text-gray-600 dark:text-gray-100">({{ log.shipmaster_user.name }}{% if log.shipmaster_only_steering %} - handgesteuert {% endif %})</small>
<small class="block text-gray-600"> <small class="block text-gray-600 dark:text-gray-100">
{% if state == "completed" and log.departure | date(format='%d.%m.%Y') == log.arrival | date(format='%d.%m.%Y') %} {% if state == "completed" and log.departure | date(format='%d.%m.%Y') == log.arrival | date(format='%d.%m.%Y') %}
{{ log.departure | date(format='%d.%m.%Y')}} ({{ log.departure | date(format='%H:%M')}} - {{ log.arrival | date(format='%H:%M')}}) {{ log.departure | date(format='%d.%m.%Y')}} ({{ log.departure | date(format='%H:%M')}} - {{ log.arrival | date(format='%H:%M')}})
@ -185,10 +185,10 @@
{% if allowed_to_close and state == "on_water" %} {% if allowed_to_close and state == "on_water" %}
{{ log::home(log=log, only_ones=only_ones) }} {{ log::home(log=log, only_ones=only_ones) }}
{% else %} {% else %}
<div> <div class="text-black dark:text-white">
{{ log.destination }} {{ log.destination }}
{% if state == "completed" %} {% if state == "completed" %}
<small class="text-gray-600">({{ log.distance_in_km }} km)</small> <small class="text-gray-600 dark:text-gray-100">({{ log.distance_in_km }} km)</small>
{% endif %} {% endif %}
{% if log.comments %} {% if log.comments %}
@ -196,13 +196,13 @@
{% endif %} {% endif %}
</div> </div>
{% if amount_guests > 0 or log.rowers | length > 0 %} {% if amount_guests > 0 or log.rowers | length > 0 %}
<div class="text-sm text-gray-600"> <div class="text-sm text-gray-600 dark:text-gray-100">
Ruderer: Ruderer:
{% for rower in log.rowers %} {% for rower in log.rowers %}
{{ rower.name }}{% if not loop.last or amount_guests > 0 %}, {% endif %} {{ rower.name }}{% if not loop.last or amount_guests > 0 %}, {% endif %}
{% endfor %} {% endfor %}
{% if amount_guests > 0 %} {% if amount_guests > 0 %}
Gäste <small class="text-gray-600">(ohne Account)</small>: {{ amount_guests }} Gäste <small class="text-gray-600 dark:text-gray-100">(ohne Account)</small>: {{ amount_guests }}
{% endif %} {% endif %}
</div> </div>
{% endif %} {% endif %}
@ -223,12 +223,12 @@
<div class="relative"> <div class="relative">
{{ macros::input(label="Distanz", name="distance_in_km", id="distance_in_km" ~ log.id , type="number", min=0, value=log.distance_in_km, required=true, class="rounded-md change-id-js") }} {{ macros::input(label="Distanz", name="distance_in_km", id="distance_in_km" ~ log.id , type="number", min=0, value=log.distance_in_km, required=true, class="rounded-md change-id-js") }}
<span class="absolute right-0 bottom-0 py-1.5 px-2 bg-white dark:bg-primary-950 border-0 text-gray-600 dark:text-gray-100 ring-1 ring-inset ring-gray-300 rounded-br-md rounded-tr-md">km</span> <span class="absolute right-0 bottom-0 py-1.5 px-2 bg-white dark:bg-primary-950 border-0 text-gray-600 dark:text-gray-100 ring-1 ring-inset ring-gray-300 dark:ring-primary-950 rounded-br-md rounded-tr-md">km</span>
</div> </div>
{{ macros::input(label="Kommentar", name="comments", id="comments" ~ log.id, type="text", value=log.comments, class="rounded-md change-id-js") }} {{ macros::input(label="Kommentar", name="comments", id="comments" ~ log.id, type="text", value=log.comments, class="rounded-md change-id-js") }}
<details class="bg-gray-200 bg-opacity-80 rounded-md p-2"> <details class="bg-gray-200 bg-opacity-80 dark:bg-primary-900 rounded-md p-2">
<summary class="cursor-pointer">Details ändern</summary> <summary class="cursor-pointer">Details ändern</summary>
<div class="grid grid-cols-1 gap-3"> <div class="grid grid-cols-1 gap-3">
{{ macros::input(label='Abfahrtszeit', name='departure', type='datetime-local', required=true, class="change-id-js rounded-md", value=log.departure) }} {{ macros::input(label='Abfahrtszeit', name='departure', type='datetime-local', required=true, class="change-id-js rounded-md", value=log.departure) }}

10
templates/includes/macros.html.tera
View File

@ -158,8 +158,8 @@
{% endmacro input %} {% endmacro input %}
{% macro checkbox(label, name, id='', checked=false, class='', disabled=false) %} {% macro checkbox(label, name, id='', checked=false, class='', disabled=false) %}
<label for="{{ name }}{{ id }}" class="flex items-center cursor-pointer hover:text-gray-900 {{ class }}"> <label for="{{ name }}{{ id }}" class="flex items-center cursor-pointer text-black dark:text-white hover:text-gray-900 dark:hover:text-gray-100 {{ class }}">
<input type="checkbox" id="{{ name }}{{ id }}" name="{{ name }}" {% if checked %} checked {% endif %} {% if disabled %} disabled {% endif %} class="h-4 w-4 accent-primary-600 mr-2"/> <input type="checkbox" id="{{ name }}{{ id }}" name="{{ name }}" {% if checked %} checked {% endif %} {% if disabled %} disabled {% endif %} class="h-4 w-4 accent-primary-600 dark:accent-primary-200 mr-2"/>
{{ label }} {{ label }}
</label> </label>
{% endmacro checkbox %} {% endmacro checkbox %}
@ -175,7 +175,7 @@
<option selected value>{{ default }}</option> <option selected value>{{ default }}</option>
{% endif %} {% endif %}
{% for d in data %} {% for d in data %}
<option value="{{ d.id }}" {% if d.id == selected_id %} selected {% endif %} {% if extras != '' %} {% for extra in extras %} {% if extra != 'on_water' %} data- {{extra}}={{d[extra]}} {% else %} {% if d[extra] %} disabled {% endif %} {% endif %} {% endfor %} {% endif %} {% if show_seats %} data-custom-properties='{"amount_seats": {{ d["amount_seats"] }}, "owner": "{{ d["owner"] }}"}'{% endif %}> <option value="{{ d.id }}" {% if d.id == selected_id %} selected {% endif %} {% if extras != '' %} {% for extra in extras %} {% if extra != 'on_water' %} data-{{extra}}={{d[extra]}} {% else %} {% if d[extra] %} disabled {% endif %} {% endif %} {% endfor %} {% endif %} {% if show_seats %} data-custom-properties='{"amount_seats": {{ d["amount_seats"] }}, "owner": "{{ d["owner"] }}"}'{% endif %}>
{% for displa in display -%} {% for displa in display -%}
{%- if d[displa] -%} {%- if d[displa] -%}
{{- d[displa] -}} {{- d[displa] -}}
@ -204,10 +204,10 @@
{% for rower in participants %} {% for rower in participants %}
{{ rower.name }} {{ rower.name }}
{% if rower.is_guest %} {% if rower.is_guest %}
<small class="text-gray-600">(Scheckbuch)</small> <small class="text-gray-600 dark:text-gray-100">(Scheckbuch)</small>
{% endif %} {% endif %}
{% if rower.is_real_guest %} {% if rower.is_real_guest %}
<small class="text-gray-600">(Gast)</small> <small class="text-gray-600 dark:text-gray-100">(Gast)</small>
{% if allow_removing %} {% if allow_removing %}
<a href="/remove/{{ trip_details_id }}/{{ rower.name }}" class="btn btn-attention btn-fw">Abmelden</a> <a href="/remove/{{ trip_details_id }}/{{ rower.name }}" class="btn btn-attention btn-fw">Abmelden</a>
{% endif %} {% endif %}

36
templates/index.html.tera
View File

@ -38,18 +38,14 @@
{% for planned_event in day.planned_events | sort(attribute="planned_starting_time") %} {% for planned_event in day.planned_events | sort(attribute="planned_starting_time") %}
{% set amount_cur_cox = planned_event.cox | length %} {% set amount_cur_cox = planned_event.cox | length %}
{% set amount_cox_missing = planned_event.planned_amount_cox - amount_cur_cox %} {% set amount_cox_missing = planned_event.planned_amount_cox - amount_cur_cox %}
<div class="pt-2 px-3 border-t" style="order: {{ planned_event.planned_starting_time | replace(from=":", to="") }}"> <div class="pt-2 px-3 border-t border-gray-200" style="order: {{ planned_event.planned_starting_time | replace(from=":", to="") }}">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div class="mr-1"> <div class="mr-1">
<strong class="text-primary-900"> <strong class="text-primary-900 dark:text-white">
{{ planned_event.planned_starting_time }} {{ planned_event.planned_starting_time }}
Uhr Uhr
</strong> </strong>
<small class="text-gray-600">({{ planned_event.name }} <small class="text-gray-600 dark:text-gray-100">({{ planned_event.name }}{% if planned_event.trip_type %} - {{ planned_event.trip_type.icon | safe }} {{ planned_event.trip_type.name }}{% endif %})</small><br/>
{% if planned_event.trip_type %}
-
{{ planned_event.trip_type.icon | safe }}{{ planned_event.trip_type.name }}
{% endif %})</small><br/>
<a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>{{ planned_event.planned_starting_time }} Uhr</strong> ({{ planned_event.name }}){% if planned_event.trip_type %}<small class='block'>{{ planned_event.trip_type.desc }}</small>{% endif %}{% if planned_event.notes %}<small class='block'>{{ planned_event.notes }}</small>{% endif %}" data-body="#event{{ planned_event.trip_details_id }}" class="inline-block link-primary mr-3"> <a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>{{ planned_event.planned_starting_time }} Uhr</strong> ({{ planned_event.name }}){% if planned_event.trip_type %}<small class='block'>{{ planned_event.trip_type.desc }}</small>{% endif %}{% if planned_event.notes %}<small class='block'>{{ planned_event.notes }}</small>{% endif %}" data-body="#event{{ planned_event.trip_details_id }}" class="inline-block link-primary mr-3">
Details Details
@ -121,8 +117,8 @@
{% if loggedin_user.is_admin %} {% if loggedin_user.is_admin %}
<form action="/join/{{ planned_event.trip_details_id }}" method="get" /> <form action="/join/{{ planned_event.trip_details_id }}" method="get" />
{{ macros::input(label='Gast', name='user_note', type='text', required=true) }} {{ macros::input(label='Gast', class="input rounded-t", name='user_note', type='text', required=true) }}
<input value="Gast hinzufügen" class="btn btn-primary" type="submit"/> <input value="Gast hinzufügen" class="btn btn-primary w-full !rounded-t-none" type="submit"/>
</form> </form>
{% endif %} {% endif %}
@ -134,8 +130,8 @@
{% if loggedin_user.is_admin %} {% if loggedin_user.is_admin %}
{# --- START Edit Form --- #} {# --- START Edit Form --- #}
<div class="bg-gray-100 p-3 mt-4 rounded-md"> <div class="bg-gray-100 dark:bg-primary-900 p-3 mt-4 rounded-md">
<h3 class="text-primary-950 font-bold uppercase tracking-wide mb-2">Ausfahrt bearbeiten</h3> <h3 class="text-primary-950 dark:text-white font-bold uppercase tracking-wide mb-2">Ausfahrt bearbeiten</h3>
<form action="/admin/planned-event" method="post" class="grid gap-3"> <form action="/admin/planned-event" method="post" class="grid gap-3">
<input type="hidden" name="_method" value="put"/> <input type="hidden" name="_method" value="put"/>
<input type="hidden" name="id" value="{{ planned_event.id }}"/> <input type="hidden" name="id" value="{{ planned_event.id }}"/>
@ -170,7 +166,7 @@
{# --- START Trips --- #} {# --- START Trips --- #}
{% if day.trips | length > 0 %} {% if day.trips | length > 0 %}
{% for trip in day.trips | sort(attribute="planned_starting_time") %} {% for trip in day.trips | sort(attribute="planned_starting_time") %}
<div class="pt-2 px-3 reset-js border-t" style="order: {{ trip.planned_starting_time | replace(from=":", to="") }}" data-coxneeded="false"> <div class="pt-2 px-3 reset-js border-t border-gray-200" style="order: {{ trip.planned_starting_time | replace(from=":", to="") }}" data-coxneeded="false">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div class="mr-1"> <div class="mr-1">
{% if trip.max_people == 0 %} {% if trip.max_people == 0 %}
@ -184,13 +180,9 @@
{{ trip.trip_type.icon | safe }}{{ trip.trip_type.name }} {{ trip.trip_type.icon | safe }}{{ trip.trip_type.name }}
{% endif %})</small> {% endif %})</small>
{% else %} {% else %}
<strong class="text-primary-900">{{ trip.planned_starting_time }} <strong class="text-primary-900 dark:text-white">{{ trip.planned_starting_time }}
Uhr</strong> Uhr</strong>
<small class="text-gray-600">({{ trip.cox_name }} <small class="text-gray-600 dark:text-gray-100">({{ trip.cox_name }}{% if trip.trip_type %} - {{ trip.trip_type.icon | safe }} {{ trip.trip_type.name }}{% endif %})</small>
{% if trip.trip_type %}
-
{{ trip.trip_type.icon | safe }}{{ trip.trip_type.name }}
{% endif %})</small>
{% endif %} {% endif %}
<br/> <br/>
<a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>{% if trip.max_people == 0 %}&#9888; {% endif %}{{ trip.planned_starting_time }} Uhr</strong> ({{ trip.cox_name }}){% if trip.trip_type %}<small class='block'>{{ trip.trip_type.desc }}</small>{% endif %}{% if trip.notes %}<small class='block'>{{ trip.notes }}</small>{% endif %}" data-body="#trip{{ trip.trip_details_id }}" class="inline-block link-primary mr-3"> <a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>{% if trip.max_people == 0 %}&#9888; {% endif %}{{ trip.planned_starting_time }} Uhr</strong> ({{ trip.cox_name }}){% if trip.trip_type %}<small class='block'>{{ trip.trip_type.desc }}</small>{% endif %}{% if trip.notes %}<small class='block'>{{ trip.notes }}</small>{% endif %}" data-body="#trip{{ trip.trip_details_id }}" class="inline-block link-primary mr-3">
@ -224,16 +216,16 @@
{{ macros::box(participants=trip.rower, empty_seats=trip.max_people - amount_cur_rower, bg='primary-100', color='black', trip_details_id=trip.trip_details_id, allow_removing=loggedin_user.id == trip.cox_id) }} {{ macros::box(participants=trip.rower, empty_seats=trip.max_people - amount_cur_rower, bg='primary-100', color='black', trip_details_id=trip.trip_details_id, allow_removing=loggedin_user.id == trip.cox_id) }}
{% if trip.cox_id == loggedin_user.id %} {% if trip.cox_id == loggedin_user.id %}
<form action="/join/{{ trip.trip_details_id }}" method="get" /> <form action="/join/{{ trip.trip_details_id }}" method="get" />
{{ macros::input(label='Gast', name='user_note', type='text', required=true) }} {{ macros::input(label='Gast', class="input rounded-t", name='user_note', type='text', required=true) }}
<input value="Gast hinzufügen" class="btn btn-primary" type="submit"/> <input value="Gast hinzufügen" class="btn btn-primary w-full !rounded-t-none" type="submit"/>
</form> </form>
{% endif %} {% endif %}
{% endif %} {% endif %}
{# --- START Edit Form --- #} {# --- START Edit Form --- #}
{% if trip.cox_id == loggedin_user.id %} {% if trip.cox_id == loggedin_user.id %}
<div class="bg-gray-100 p-3 mt-4 rounded-md"> <div class="bg-gray-100 dark:bg-primary-900 p-3 mt-4 rounded-md">
<h3 class="text-primary-950 font-bold uppercase tracking-wide mb-2">Ausfahrt bearbeiten</h3> <h3 class="text-primary-950 dark:text-white font-bold uppercase tracking-wide mb-2">Ausfahrt bearbeiten</h3>
<form action="/cox/trip/{{ trip.id }}" method="post" class="grid gap-3"> <form action="/cox/trip/{{ trip.id }}" method="post" class="grid gap-3">
{{ macros::input(label='Anzahl Ruderer', name='max_people', type='number', required=true, value=trip.max_people, min='0') }} {{ macros::input(label='Anzahl Ruderer', name='max_people', type='number', required=true, value=trip.max_people, min='0') }}
{{ macros::input(label='Anmerkungen', name='notes', type='input', value=trip.notes) }} {{ macros::input(label='Anmerkungen', name='notes', type='input', value=trip.notes) }}

6
templates/log.completed.html.tera
View File

@ -9,12 +9,12 @@
<h1 class="h1">Logbuch</h1> <h1 class="h1">Logbuch</h1>
<div class="mt-3"> <div class="mt-3">
<div class="bg-gray-200 p-3 mt-4 rounded-t-md"> <div class="search-wrapper">
<label for="name" class="sr-only">Suche</label> <label for="name" class="sr-only">Suche</label>
<input type="search" name="name" id="filter-js" class="w-full relative block rounded-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 mb-2 md:mb-0" placeholder="Suchen nach Bootsname oder Ruderer..."> <input type="search" name="name" id="filter-js" class="search-bar" placeholder="Suchen nach Bootsname oder Ruderer...">
</div> </div>
<div id="filter-result-js" class="bg-gray-200 text-primary-950 pb-3 px-3 text-right"></div> <div id="filter-result-js" class="search-result"></div>
{% for log in logs %} {% for log in logs %}
{{ log::show_old(log=log, state="completed", only_ones=false, index=loop.index) }} {{ log::show_old(log=log, state="completed", only_ones=false, index=loop.index) }}
{% endfor %} {% endfor %}

12
templates/stat.boats.html.tera
View File

@ -5,19 +5,19 @@
{% block content %} {% block content %}
<div class="max-w-screen-lg w-full"> <div class="max-w-screen-lg w-full">
<h1 class="h1">Bootsauswertung</h1> <h1 class="h1">Bootsauswertung</h1>
<div class="bg-gray-200 p-3 mt-4 rounded-t-md"> <div class="search-wrapper">
<label for="name" class="sr-only">Suche</label> <label for="name" class="sr-only">Suche</label>
<input type="search" name="name" id="filter-js" class="w-full relative block rounded-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 mb-2 md:mb-0" placeholder="Suchen nach Bootsnamen..."> <input type="search" name="name" id="filter-js" class="search-bar" placeholder="Suchen nach Bootsnamen...">
</div> </div>
<div id="filter-result-js" class="bg-gray-200 text-primary-950 pb-3 px-3 text-right"></div> <div id="filter-result-js" class="search-result"></div>
<div class="border-r border-l"> <div class="border-r border-l border-gray-200 dark:border-primary-600">
{% set_global km = 0 %} {% set_global km = 0 %}
{% set_global index = 1 %} {% set_global index = 1 %}
{% for s in stat %} {% for s in stat %}
<div class="border-t {% if loop.last %} border-b {% endif %} bg-white flex justify-between items-center px-3 py-1" data-filterable="true" data-filter="{{ s.name }}"> <div class="border-t border-gray-200 dark:border-primary-600 {% if loop.last %} border-b {% endif %} bg-white dark:bg-primary-900 text-black dark:text-white flex justify-between items-center px-3 py-1" data-filterable="true" data-filter="{{ s.name }}">
<span class="text-sm text-gray-600 w-10"> <span class="text-sm text-gray-600 dark:text-gray-100 w-10">
{% if km != s.rowed_km %} {% if km != s.rowed_km %}
{{loop.index}} {{loop.index}}
{% set_global index = loop.index %} {% set_global index = loop.index %}

12
templates/stat.people.html.tera
View File

@ -7,19 +7,19 @@
<div class="max-w-screen-lg w-full"> <div class="max-w-screen-lg w-full">
<h1 class="h1">Statistik</h1> <h1 class="h1">Statistik</h1>
<div class="bg-gray-200 p-3 mt-4 rounded-t-md"> <div class="search-wrapper">
<label for="name" class="sr-only">Suche</label> <label for="name" class="sr-only">Suche</label>
<input type="search" name="name" id="filter-js" class="w-full relative block rounded-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 mb-2 md:mb-0" placeholder="Suchen nach Namen..."> <input type="search" name="name" id="filter-js" class="search-bar" placeholder="Suchen nach Namen...">
</div> </div>
<div id="filter-result-js" class="bg-gray-200 text-primary-950 pb-3 px-3 text-right"></div> <div id="filter-result-js" class="search-result"></div>
<div class="border-r border-l"> <div class="border-r border-l border-gray-200 dark:border-primary-600">
{% set_global km = 0 %} {% set_global km = 0 %}
{% set_global index = 1 %} {% set_global index = 1 %}
{% for s in stat %} {% for s in stat %}
<div class="border-t {% if loop.last %} border-b {% endif %} bg-white flex justify-between items-center px-3 py-1" data-filterable="true" data-filter="{{ s.name }}"> <div class="border-t border-gray-200 dark:border-primary-600 {% if loop.last %} border-b {% endif %} bg-white dark:bg-primary-900 text-black dark:text-white flex justify-between items-center px-3 py-1" data-filterable="true" data-filter="{{ s.name }}">
<span class="text-sm text-gray-600 w-10"> <span class="text-sm text-gray-600 dark:text-gray-100 w-10">
{% if km != s.rowed_km %} {% if km != s.rowed_km %}
{{loop.index}} {{loop.index}}
{% set_global index = loop.index %} {% set_global index = loop.index %}