From c18dbae6f96c6b46d8dad5c5a45cc10fc03c800f Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Wed, 20 Jun 2018 23:19:49 +0200
Subject: [PATCH] no more reactive labels and breakpoint changes in forms

---
 templates/standalone/inputs.julius | 63 ------------------------------
 templates/standalone/inputs.lucius | 49 +++++++++--------------
 templates/widgets/form.hamlet      |  6 ++-
 3 files changed, 23 insertions(+), 95 deletions(-)

diff --git a/templates/standalone/inputs.julius b/templates/standalone/inputs.julius
index ce38268ad..a1e824d27 100644
--- a/templates/standalone/inputs.julius
+++ b/templates/standalone/inputs.julius
@@ -3,27 +3,6 @@
 
   window.utils = window.utils || {};
 
-  // makes <label> smaller if <input> is focussed
-  window.utils.reactiveInputLabel = function(input, label) {
-    // updates to dom
-    if (input.value.length > 0) {
-      label.classList.add('reactive-label--small');
-    }
-    // add event listeners
-    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');
-      }
-    });
-  };
-
   // allows for multiple file uploads with separate inputs
   window.utils.reactiveFileUpload = function(input, formGroup) {
     var currValidInputCount = 0;
@@ -182,52 +161,10 @@
     setup();
   }
 
-  window.utils.reactiveFormGroup = function(formGroup, input) {
-    // updates to dom
-    if (input.value.length > 0) {
-      formGroup.classList.add('form-group--valid');
-    } else {
-      formGroup.classList.remove('form-group--valid');
-    }
-    input.addEventListener('input', function() {
-      formGroup.classList.remove('form-group--has-error');
-      if (input.value.length > 0) {
-        formGroup.classList.add('form-group--valid');
-      } else {
-        formGroup.classList.remove('form-group--valid');
-      }
-    });
-  };
-
 })();
 
 document.addEventListener('DOMContentLoaded', function() {
 
-  // setup reactive labels
-  Array.from(document.querySelectorAll('.reactive-label')).forEach(function(label) {
-    var input = document.querySelector('#' + label.getAttribute('for'));
-    if (!input) {
-      console.error('No input found for ReactiveLabel! Targeted input: \'#%s\'', label.getAttribute('for'));
-      label.classList.remove('reactive-label');
-      return false;
-    }
-
-    var parent = label.parentElement;
-    var type = input.getAttribute('type');
-    var isListening = !RegExp(['date', 'checkbox', 'radio', 'hidden', 'file'].join('|')).test(type);
-    var isInFormGroup = parent.classList.contains('form-group') && parent.classList.contains('form-group--required');
-
-
-    if (isInFormGroup) {
-      window.utils.reactiveFormGroup(parent, input);
-    }
-    if (isListening) {
-      window.utils.reactiveInputLabel(input, label);
-    } else {
-      label.classList.remove('reactive-label');
-    }
-  });
-
   // initialize file-upload-fields
   Array.from(document.querySelectorAll('input[type="file"]')).map(function(inp) {
     var formGroup = inp.parentNode;
diff --git a/templates/standalone/inputs.lucius b/templates/standalone/inputs.lucius
index 4729a1d47..685ddcbff 100644
--- a/templates/standalone/inputs.lucius
+++ b/templates/standalone/inputs.lucius
@@ -24,7 +24,7 @@ form {
   font-weight: 600;
 }
 
-@media (max-width: 999px) {
+@media (max-width: 768px) {
   .form-group {
     grid-template-columns: 1fr;
     grid-template-rows: 30px;
@@ -179,12 +179,12 @@ input[type="checkbox"]:checked::after {
 .radio {
   position: relative;
 
-  > [type="checkbox"],
-  > [type="radio"] {
+  [type="checkbox"],
+  [type="radio"] {
     display: none;
   }
 
-  > label {
+  label {
     display: block;
     height: 30px;
     width: 30px;
@@ -194,8 +194,8 @@ input[type="checkbox"]:checked::after {
     cursor: pointer;
   }
 
-  > label::before,
-  > label::after {
+  label::before,
+  label::after {
     content: '';
     position: absolute;
     top: 14px;
@@ -207,52 +207,52 @@ input[type="checkbox"]:checked::after {
     transition: all .2s;
   }
 
-  > label::before {
+  label::before {
     width: 20px;
     height: 2px;
     transform: scale(0.1, 0.1);
   }
 
-  > label::after {
+  label::after {
     width: 20px;
     height: 2px;
     transform: scale(0.1, 0.1);
   }
 
-  > :checked + label {
+  :checked + label {
     background-color: var(--color-light);
     text-decoration: underline;
   }
 
-  &:hover > label {
+  &:hover label {
     background-color: var(--color-lighter);
   }
 
-  &:hover > label::before {
+  &:hover label::before {
     transform: scale(0.8, 0.4);
   }
 
-  > :checked + label::before {
+  :checked + label::before {
     transform: scale(1, 1) rotate(45deg);
   }
 
-  > :checked + label:hover::after,
-  > :checked + label:hover::before {
+  :checked + label:hover::after,
+  :checked + label:hover::before {
     transform: scale(1, 1) rotate(0deg);
   }
 
-  &:hover > label::after {
+  &:hover label::after {
     transform: scale(0.8, 0.4);
   }
 
-  > :checked + label::after {
+  :checked + label::after {
     transform: scale(1, 1) rotate(-45deg);
   }
 }
-.radio > label::before {
+.radio label::before {
   transform: scale(0.01, 0.01) rotate(45deg);
 }
-.radio > label::after {
+.radio label::after {
   transform: scale(0.01, 0.01) rotate(-45deg);
 }
 
@@ -279,17 +279,6 @@ input[type="checkbox"]:checked::after {
   cursor: default;
   color: var(--color-font);
 }
-@media (max-width: 999px) {
-  .reactive-label {
-    position: relative;
-    transform: translate(2px, 30px);
-  }
-  .reactive-label--small {
-    transform: translate(2px, 0px);
-    color: var(--color-fontsec);
-    /*font-size: 14px;*/
-  }
-}
 
 /* CUSTOM FILE INPUT */
 input[type="file"].js-file-input {
@@ -397,7 +386,7 @@ input[type="file"].js-file-input {
 .file-input__container--valid > .file-input__remover {
   display: block;
 }
-@media (max-width: 999px) {
+@media (max-width: 768px) {
   .file-input__wrapper,
   .file-input__container,
   .file-checkbox__container,
diff --git a/templates/widgets/form.hamlet b/templates/widgets/form.hamlet
index 34a01c9a3..dd0b0e214 100644
--- a/templates/widgets/form.hamlet
+++ b/templates/widgets/form.hamlet
@@ -7,5 +7,7 @@ $case formLayout
         $if not (Blaze.null $ fvLabel view)
           <label .form-group__label .reactive-label for=#{fvId view}>#{fvLabel view}
         $# TODO: inputs should have proper placeholders
-        ^{fvInput view}
-        $# FIXME: file-input element  does not have `required` attribute, although set on form-group
+        $# TODO: can we wrap checkboxes in a <div.checkbox> and radio buttons in a <div.radio>?
+        <div .form-group__input>
+          $# FIXME: file-input does not have `required` attribute, although set on form-group
+          ^{fvInput view}