From 1660c867fed90aeefb05e0056fd2950b92a3e8e9 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Thu, 8 Mar 2018 00:47:34 +0100
Subject: [PATCH] more design on forms done, reactive validation stripes added

---
 templates/default-layout.lucius      |  1 +
 templates/standalone/sortable.lucius |  4 +-
 templates/widgets/form.julius        | 57 ++++++++++++++++++----------
 templates/widgets/form.lucius        | 27 ++++++-------
 4 files changed, 54 insertions(+), 35 deletions(-)

diff --git a/templates/default-layout.lucius b/templates/default-layout.lucius
index 854b030cd..f81c52cea 100644
--- a/templates/default-layout.lucius
+++ b/templates/default-layout.lucius
@@ -18,6 +18,7 @@
   --whitebase: #FCFFFA;
   --greybase: #B1B5C0;
   --fontbase: #34303a;
+  --fontsec: #5b5861;
 
 
   /* THEME INDEPENDENT COLORS */
diff --git a/templates/standalone/sortable.lucius b/templates/standalone/sortable.lucius
index fd2113a48..5f9ea1b64 100644
--- a/templates/standalone/sortable.lucius
+++ b/templates/standalone/sortable.lucius
@@ -23,9 +23,9 @@ table.js-sortable th.sorted-desc::after {
 }
 
 table.js-sortable th.sorted-asc::after {
-  border-bottom: 8px solid var(--lightbase);
+  border-top: 8px solid var(--lightbase);
 }
 
 table.js-sortable th.sorted-desc::after {
-  border-top: 8px solid var(--lightbase);
+  border-bottom: 8px solid var(--lightbase);
 }
diff --git a/templates/widgets/form.julius b/templates/widgets/form.julius
index 3efa02d9f..f6221e21b 100644
--- a/templates/widgets/form.julius
+++ b/templates/widgets/form.julius
@@ -1,26 +1,41 @@
-document.addEventListener('DOMContentLoaded', function() {
+(function() {
+  'use strict';
 
   if (!window.utils) {
     window.utils = {};
   }
 
   // makes <label> smaller if <input> is focussed
-  window.utils.reactiveInputLabel = function(input, label) {
+  window.utils.reactiveInputLabel = function(input, label, staticLabel) {
+    // updates to dom
+    if (staticLabel === true) {
+      label.classList.remove('reactive-label');
+    }
     if (input.value.length > 0) {
-      label.classList.add('reactive-label--small');
+      if (staticLabel === false) {
+        label.classList.add('reactive-label--small');
+      }
       if (label.parentElement.classList.contains('form-group')) {
         label.parentElement.classList.add('form-group--valid');
       }
     } else {
       label.parentElement.classList.remove('form-group--valid');
     }
-    input.addEventListener('focus', function() {
-      label.classList.add('reactive-label--small');
-    });
-    label.addEventListener('click', function() {
-      label.classList.add('reactive-label--small');
-      input.focus();
-    });
+    // add event listeners
+    if (staticLabel === false) {
+      input.addEventListener('focus', function() {
+        label.classList.add('reactive-label--small');
+      });
+      label.addEventListener('click', function() {
+        label.classList.add('reactive-label--small');
+        input.focus();
+      });
+      input.addEventListener('blur', function() {
+        if (input.value.length < 1) {
+          label.classList.remove('reactive-label--small');
+        }
+      });
+    }
     input.addEventListener('input', function() {
       if (label.parentElement.classList.contains('form-group')) {
         if (input.value.length > 0) {
@@ -30,18 +45,8 @@ document.addEventListener('DOMContentLoaded', function() {
         }
       }
     });
-    input.addEventListener('blur', function() {
-      if (input.value.length < 1) {
-        label.classList.remove('reactive-label--small');
-      }
-    });
   };
 
-  Array.from(document.querySelectorAll('.reactive-label')).forEach(function(label) {
-    var input = document.querySelector('#' + label.getAttribute('for'));
-    window.utils.reactiveInputLabel(input, label);
-  });
-
   // registers input-listener for each element in <elements> (array) and
   // enables <button> if <fn> for these elements returns true
   window.utils.reactiveButton = function(elements, button, fn) {
@@ -65,6 +70,18 @@ document.addEventListener('DOMContentLoaded', function() {
       }
     }
   };
+})();
+
+document.addEventListener('DOMContentLoaded', function() {
+
+  Array.from(document.querySelectorAll('.reactive-label')).forEach(function(label) {
+    var input = document.querySelector('#' + label.getAttribute('for'));
+    // dont be reactive if input is date, or checkbox/radioox
+      var type = input.getAttribute('type');
+      var badinputs = ['date', 'checkbox', 'radio', 'hidden'];
+      var badregex = RegExp(badinputs.join('|'));
+    window.utils.reactiveInputLabel(input, label, badregex.test(type));
+  });
 
   // auto reactiveButton submit-buttons with required fields
   var forms = document.querySelectorAll('form');
diff --git a/templates/widgets/form.lucius b/templates/widgets/form.lucius
index fc75dcfd2..790b9a28e 100644
--- a/templates/widgets/form.lucius
+++ b/templates/widgets/form.lucius
@@ -47,7 +47,6 @@ input[type="submit"][disabled],
 input[type="button"][disabled],
 button[disabled] {
   opacity: 0.3;
-  border: 1px solid transparent;
   background-color: var(--greybase);
   cursor: default;
 }
@@ -93,11 +92,7 @@ textarea:focus {
 }
 
 .form-group--valid {
-  border-left: 8px solid var(--lightbase);
-}
-
-.form-group--optional {
-  border-left: 8px solid var(--greybase);
+  border-left: 8px solid #2dcc35;
 }
 
 .form-group--has-error {
@@ -221,7 +216,7 @@ input[type="checkbox"]:checked::after {
 /* REACTIVE LABELS */
 .reactive-label {
   cursor: text;
-  color: #888;
+  color: var(--fontsec);
   transform: translate(0, 0);
   transition: all .1s;
 }
@@ -229,14 +224,20 @@ input[type="checkbox"]:checked::after {
   cursor: default;
   color: var(--fontbase);
 }
-@media (max-width: 768px) {
+@media (max-width: 999px) {
+  .form-group {
+    grid-template-rows: 30px auto;
+    grid-template-columns: 1fr;
+    align-items: baseline;
+    margin-top: 17px;
+  }
   .reactive-label {
-    position: absolute;
-    left: 4px;
-    top: 8px;
+    position: relative;
+    transform: translate(2px, 30px);
   }
   .reactive-label--small {
-    transform: translate(0, -120%);
-    font-size: 12px;
+    transform: translate(2px, 0px);
+    color: var(--fontsec);
+    /*font-size: 14px;*/
   }
 }