[TASK] streamline form
This commit is contained in:
parent
b6a91f1017
commit
0e143381cf
@ -17,8 +17,15 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
selectBoatChange();
|
||||
addRelationMagic(<HTMLElement>document.querySelector('body'));
|
||||
reloadPage();
|
||||
setCurrentdate(<HTMLInputElement>document.querySelector('#departure'));
|
||||
});
|
||||
|
||||
function setCurrentdate(input: HTMLInputElement) {
|
||||
if(input) {
|
||||
input.value = (new Date().toJSON().slice(0,19));
|
||||
}
|
||||
}
|
||||
|
||||
function selectBoatChange() {
|
||||
const boatSelect = <HTMLSelectElement>document.querySelector('#boat_id');
|
||||
|
||||
@ -77,7 +84,7 @@ function reloadPage() {
|
||||
|
||||
if(!isPageActive){
|
||||
document.title = attentionMessage;
|
||||
}else {
|
||||
} else {
|
||||
document.title = pageTitle;
|
||||
location.reload();
|
||||
}
|
||||
|
@ -47,14 +47,12 @@ select {
|
||||
.choices[data-type*=select-one] {
|
||||
cursor: pointer;
|
||||
}
|
||||
.choices[data-type*=select-one] .choices__inner {
|
||||
padding-bottom: 7.5px;
|
||||
}
|
||||
|
||||
.choices[data-type*=select-one] .choices__input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
@apply border-0 ring-1 ring-inset ring-gray-300;
|
||||
background-color: #fff;
|
||||
margin: 0;
|
||||
}
|
||||
@ -95,7 +93,7 @@ select {
|
||||
pointer-events: none;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.choices[data-type*=select-one][dir=rtl]::after {
|
||||
@ -137,24 +135,16 @@ select {
|
||||
}
|
||||
|
||||
.choices__inner {
|
||||
display: inline-block;
|
||||
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;
|
||||
@apply input rounded-md;
|
||||
}
|
||||
.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 {
|
||||
border-radius: 2.5px 2.5px 0 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.is-flipped.is-open .choices__inner {
|
||||
border-radius: 0 0 2.5px 2.5px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.choices__list {
|
||||
@ -164,7 +154,6 @@ select {
|
||||
}
|
||||
.choices__list--single {
|
||||
display: inline-block;
|
||||
padding: 4px 16px 4px 4px;
|
||||
width: 100%;
|
||||
}
|
||||
[dir=rtl] .choices__list--single {
|
||||
@ -182,11 +171,10 @@ select {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
@apply rounded-md bg-primary-600;
|
||||
padding: 4px 10px;
|
||||
padding: 0px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
margin-right: 3.75px;
|
||||
margin-bottom: 3.75px;
|
||||
color: #fff;
|
||||
word-break: break-all;
|
||||
box-sizing: border-box;
|
||||
@ -199,12 +187,10 @@ select {
|
||||
margin-left: 3.75px;
|
||||
}
|
||||
.choices__list--multiple .choices__item.is-highlighted {
|
||||
background-color: #00a5bb;
|
||||
border: 1px solid #008fa1;
|
||||
@apply bg-primary-900;
|
||||
}
|
||||
.is-disabled .choices__list--multiple .choices__item {
|
||||
background-color: #aaaaaa;
|
||||
border: 1px solid #919191;
|
||||
@apply bg-gray-600;
|
||||
}
|
||||
|
||||
.choices__list--dropdown, .choices__list[aria-expanded] {
|
||||
@ -213,7 +199,7 @@ select {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
@apply border;
|
||||
top: 100%;
|
||||
margin-top: -1px;
|
||||
border-bottom-left-radius: 2.5px;
|
||||
@ -226,7 +212,7 @@ select {
|
||||
visibility: visible;
|
||||
}
|
||||
.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] {
|
||||
top: auto;
|
||||
@ -274,7 +260,7 @@ select {
|
||||
}
|
||||
}
|
||||
.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 {
|
||||
opacity: 0.5;
|
||||
@ -299,8 +285,7 @@ select {
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #f7f7f7;
|
||||
color: gray;
|
||||
@apply text-gray-400
|
||||
}
|
||||
|
||||
.choices__button {
|
||||
@ -321,11 +306,9 @@ select {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
font-size: 14px;
|
||||
margin-bottom: 5px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
max-width: 100%;
|
||||
padding: 4px 0 4px 2px;
|
||||
}
|
||||
.choices__input:focus {
|
||||
outline: 0;
|
||||
|
@ -32,6 +32,9 @@
|
||||
{{ log::boat_select(only_ones=only_ones) }}
|
||||
|
||||
{% if allow_any_shipmaster %}
|
||||
<div>
|
||||
<label for="shipmaster" class=" small text-gray-600 ">Schiffsführer</label>
|
||||
|
||||
<select name="shipmaster" id="shipmaster" class="input rounded-md h-10">
|
||||
<optgroup label="Steuerleute">
|
||||
{% for cox in coxes %}
|
||||
@ -52,6 +55,7 @@
|
||||
{% endfor %}
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
{% else %}
|
||||
<input type="hidden" name="shipmaster" value="{{shipmaster}}"/>
|
||||
{% endif %}
|
||||
@ -94,17 +98,21 @@
|
||||
|
||||
|
||||
{% macro boat_select(only_ones) %}
|
||||
<div class="col-span-2">
|
||||
<label for="boat_id" class=" small text-gray-600 ">Boot</label>
|
||||
{% if not only_ones %}
|
||||
{{ 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") }}
|
||||
{% else %}
|
||||
{% 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 %}
|
||||
|
||||
{% macro rower_select(id, selected, amount_seats='', class='', init='false') %}
|
||||
{% if not amount_seats or amount_seats > 1 %}
|
||||
<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}}>
|
||||
{% for user in users %}
|
||||
{% set_global sel = false %}
|
||||
|
Loading…
Reference in New Issue
Block a user