[TASK] streamline form

frontend/main.ts

@@ -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');
 

frontend/scss/components/_input.scss

@@ -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;
+  @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 {
-  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;
+  @apply bg-primary-900;
-  border: 1px solid #008fa1;
 }
 .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] {
@@ -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;
+  @apply text-gray-400
-  color: gray;
 }
 
 .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;

templates/includes/forms/log.html.tera

@@ -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 %}