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

[TASK] streamline form

Browse Source
This commit is contained in:
Marie Birner 2023-09-27 14:46:34 +02:00
parent b6a91f1017
commit 0e143381cf
3 changed files with 56 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/main.ts
View File

@ -17,8 +17,15 @@ document.addEventListener('DOMContentLoaded', function() {
selectBoatChange(); selectBoatChange();
addRelationMagic(<HTMLElement>document.querySelector('body')); addRelationMagic(<HTMLElement>document.querySelector('body'));
reloadPage(); reloadPage();
setCurrentdate(<HTMLInputElement>document.querySelector('#departure'));
}); });
function setCurrentdate(input: HTMLInputElement) {
if(input) {
input.value = (new Date().toJSON().slice(0,19));
}
}
function selectBoatChange() { function selectBoatChange() {
const boatSelect = <HTMLSelectElement>document.querySelector('#boat_id'); const boatSelect = <HTMLSelectElement>document.querySelector('#boat_id');
@ -77,7 +84,7 @@ function reloadPage() {
if(!isPageActive){ if(!isPageActive){
document.title = attentionMessage; document.title = attentionMessage;
}else { } else {
document.title = pageTitle; document.title = pageTitle;
location.reload(); location.reload();
} }

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

@ -47,14 +47,12 @@ select {
.choices[data-type*=select-one] { .choices[data-type*=select-one] {
cursor: pointer; cursor: pointer;
} }
.choices[data-type*=select-one] .choices__inner {
padding-bottom: 7.5px;
}
.choices[data-type*=select-one] .choices__input { .choices[data-type*=select-one] .choices__input {
display: block; display: block;
width: 100%; width: 100%;
padding: 10px; padding: 10px;
border-bottom: 1px solid #ddd; @apply border-0 ring-1 ring-inset ring-gray-300;
background-color: #fff; background-color: #fff;
margin: 0; margin: 0;
} }
@ -95,7 +93,7 @@ select {
pointer-events: none; pointer-events: none;
} }
.choices[data-type*=select-one].is-open::after { .choices[data-type*=select-one].is-open::after {
border-color: transparent transparent #333 transparent; @apply border-0 ring-1 ring-inset ring-gray-300;
margin-top: -7.5px; margin-top: -7.5px;
} }
.choices[data-type*=select-one][dir=rtl]::after { .choices[data-type*=select-one][dir=rtl]::after {
@ -137,24 +135,16 @@ select {
} }
.choices__inner { .choices__inner {
display: inline-block; @apply input rounded-md;
vertical-align: top;
width: 100%;
padding: 7.5px 7.5px 3.75px;
border: 1px solid #ddd;
border-radius: 2.5px;
font-size: 14px;
min-height: 44px;
overflow: hidden;
} }
.is-focused .choices__inner, .is-open .choices__inner { .is-focused .choices__inner, .is-open .choices__inner {
border-color: #b7b7b7; @apply border-0 ring-1 ring-inset ring-gray-300;
} }
.is-open .choices__inner { .is-open .choices__inner {
border-radius: 2.5px 2.5px 0 0; border-radius: 0;
} }
.is-flipped.is-open .choices__inner { .is-flipped.is-open .choices__inner {
border-radius: 0 0 2.5px 2.5px; border-radius: 0;
} }
.choices__list { .choices__list {
@ -164,7 +154,6 @@ select {
} }
.choices__list--single { .choices__list--single {
display: inline-block; display: inline-block;
padding: 4px 16px 4px 4px;
width: 100%; width: 100%;
} }
[dir=rtl] .choices__list--single { [dir=rtl] .choices__list--single {
@ -182,11 +171,10 @@ select {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
@apply rounded-md bg-primary-600; @apply rounded-md bg-primary-600;
padding: 4px 10px; padding: 0px 10px;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
margin-right: 3.75px; margin-right: 3.75px;
margin-bottom: 3.75px;
color: #fff; color: #fff;
word-break: break-all; word-break: break-all;
box-sizing: border-box; box-sizing: border-box;
@ -199,12 +187,10 @@ select {
margin-left: 3.75px; margin-left: 3.75px;
} }
.choices__list--multiple .choices__item.is-highlighted { .choices__list--multiple .choices__item.is-highlighted {
background-color: #00a5bb; @apply bg-primary-900;
border: 1px solid #008fa1;
} }
.is-disabled .choices__list--multiple .choices__item { .is-disabled .choices__list--multiple .choices__item {
background-color: #aaaaaa; @apply bg-gray-600;
border: 1px solid #919191;
} }
.choices__list--dropdown, .choices__list[aria-expanded] { .choices__list--dropdown, .choices__list[aria-expanded] {
@ -213,7 +199,7 @@ select {
position: absolute; position: absolute;
width: 100%; width: 100%;
background-color: #fff; background-color: #fff;
border: 1px solid #ddd; @apply border;
top: 100%; top: 100%;
margin-top: -1px; margin-top: -1px;
border-bottom-left-radius: 2.5px; border-bottom-left-radius: 2.5px;
@ -226,7 +212,7 @@ select {
visibility: visible; visibility: visible;
} }
.is-open .choices__list--dropdown, .is-open .choices__list[aria-expanded] { .is-open .choices__list--dropdown, .is-open .choices__list[aria-expanded] {
border-color: #b7b7b7; @apply border-0 ring-1 ring-inset ring-gray-300;
} }
.is-flipped .choices__list--dropdown, .is-flipped .choices__list[aria-expanded] { .is-flipped .choices__list--dropdown, .is-flipped .choices__list[aria-expanded] {
top: auto; top: auto;
@ -274,7 +260,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 {
background-color: #f2f2f2; @apply bg-gray-100;
} }
.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;
@ -299,8 +285,7 @@ select {
font-weight: 600; font-weight: 600;
font-size: 12px; font-size: 12px;
padding: 10px; padding: 10px;
border-bottom: 1px solid #f7f7f7; @apply text-gray-400
color: gray;
} }
.choices__button { .choices__button {
@ -321,11 +306,9 @@ select {
display: inline-block; display: inline-block;
vertical-align: baseline; vertical-align: baseline;
font-size: 14px; font-size: 14px;
margin-bottom: 5px;
border: 0; border: 0;
border-radius: 0; border-radius: 0;
max-width: 100%; max-width: 100%;
padding: 4px 0 4px 2px;
} }
.choices__input:focus { .choices__input:focus {
outline: 0; outline: 0;

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

@ -32,26 +32,30 @@
{{ log::boat_select(only_ones=only_ones) }} {{ log::boat_select(only_ones=only_ones) }}
{% if allow_any_shipmaster %} {% if allow_any_shipmaster %}
<select name="shipmaster" id="shipmaster" class="input rounded-md h-10"> <div>
<optgroup label="Steuerleute"> <label for="shipmaster" class=" small text-gray-600 ">Schiffsführer</label>
{% for cox in coxes %}
<option value="{{ cox.id }}" {% if cox.on_water %} disabled="disabled" {% else %} {% if cox.id == shipmaster %} selected {% endif %} {% endif %}>{{ cox.name }} <select name="shipmaster" id="shipmaster" class="input rounded-md h-10">
{% if cox.on_water %} <optgroup label="Steuerleute">
(am Wasser) {% for cox in coxes %}
{% endif %} <option value="{{ cox.id }}" {% if cox.on_water %} disabled="disabled" {% else %} {% if cox.id == shipmaster %} selected {% endif %} {% endif %}>{{ cox.name }}
</option> {% if cox.on_water %}
{% endfor %} (am Wasser)
</optgroup> {% endif %}
<optgroup label="Mitglieder"> </option>
{% for user in users | filter(attribute="is_cox", value=false) %} {% endfor %}
<option value="{{ user.id }}" {% if user.id == shipmaster %} selected {% endif %} {% if user.on_water %} disabled="disabled" {% endif %}>{{ user.name }} </optgroup>
{% if user.on_water %} <optgroup label="Mitglieder">
(am Wasser) {% for user in users | filter(attribute="is_cox", value=false) %}
{% endif %} <option value="{{ user.id }}" {% if user.id == shipmaster %} selected {% endif %} {% if user.on_water %} disabled="disabled" {% endif %}>{{ user.name }}
</option> {% if user.on_water %}
{% endfor %} (am Wasser)
</optgroup> {% endif %}
</select> </option>
{% endfor %}
</optgroup>
</select>
</div>
{% else %} {% else %}
<input type="hidden" name="shipmaster" value="{{shipmaster}}"/> <input type="hidden" name="shipmaster" value="{{shipmaster}}"/>
{% endif %} {% endif %}
@ -94,17 +98,21 @@
{% macro boat_select(only_ones) %} {% macro boat_select(only_ones) %}
{% if not only_ones %} <div class="col-span-2">
{{ macros::select(data=boats, name='boat_id', display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats", "on_water"], class="col-span-2") }} <label for="boat_id" class=" small text-gray-600 ">Boot</label>
{% else %} {% if not only_ones %}
{% set ones = boats | filter(attribute="amount_seats", value=1) %} {{ macros::select(data=boats, name='boat_id', display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats", "on_water"], class="col-span-2") }}
{{ macros::select(data=ones, name='boat_id', display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats", "on_water"], class="col-span-2") }} {% else %}
{% endif %} {% set ones = boats | filter(attribute="amount_seats", value=1) %}
{{ macros::select(data=ones, name='boat_id', display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats", "on_water"], class="col-span-2") }}
{% endif %}
</div>
{% endmacro boat_select %} {% endmacro boat_select %}
{% macro rower_select(id, selected, amount_seats='', class='', init='false') %} {% macro rower_select(id, selected, amount_seats='', class='', init='false') %}
{% if not amount_seats or amount_seats > 1 %} {% if not amount_seats or amount_seats > 1 %}
<div class="{{ class }}"> <div class="{{ class }}">
<label for="{{id}}" class="small text-gray-600 ">Ruderer</label>
<select style="width: 100%;" multiple name="rowers[]" id="{{id}}" class="w-full" data-seats="{{amount_seats}}" data-init={{init}}> <select style="width: 100%;" multiple name="rowers[]" id="{{id}}" class="w-full" data-seats="{{amount_seats}}" data-init={{init}}>
{% for user in users %} {% for user in users %}
{% set_global sel = false %} {% set_global sel = false %}