From 7a97235481166f01905d2952bffd1a287cf4d1e2 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Thu, 21 Jun 2018 22:18:15 +0200
Subject: [PATCH 1/5] fix for reactive buttons

---
 templates/widgets/form.hamlet |  1 -
 templates/widgets/form.julius | 44 +++++++++++++++++++----------------
 2 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/templates/widgets/form.hamlet b/templates/widgets/form.hamlet
index 5da1c6a02..b38d37ed6 100644
--- a/templates/widgets/form.hamlet
+++ b/templates/widgets/form.hamlet
@@ -6,7 +6,6 @@ $case formLayout
       <div .form-group :fvRequired view:.form-group--required :not $ fvRequired view:.form-group--optional :isJust $ fvErrors view:.form-group--has-error>
         $if not (Blaze.null $ fvLabel view)
           <label .form-group__label for=#{fvId view}>#{fvLabel view}
-        $# TODO: inputs should have proper placeholders
         <div .form-group__input>
           $# FIXME: file-input does not have `required` attribute, although set on form-group
           ^{fvInput view}
diff --git a/templates/widgets/form.julius b/templates/widgets/form.julius
index 994f1bece..21d6799ee 100644
--- a/templates/widgets/form.julius
+++ b/templates/widgets/form.julius
@@ -3,23 +3,25 @@
 
   window.utils = window.utils || {};
 
-  // registers input-listener for each element in <elements> (array) and
-  // enables <button> if <validation> for these elements returns true
-  window.utils.reactiveButton = function(elements, button, validation) {
-    if (elements.length == 0) {
+  // registers input-listener for each element in <inputs> (array) and
+  // enables <button> if <validation> for these inputs returns true
+  window.utils.reactiveButton = function(form, button, validation) {
+    var requireds = Array.from(form.querySelectorAll('[required]'));
+    if (requireds.length == 0) {
       return false;
     }
-    var checkboxes = elements[0].getAttribute('type') === 'checkbox';
-    var eventType = checkboxes ? 'change' : 'input';
     updateButtonState();
-    elements.forEach(function(el) {
+
+    requireds.forEach(function(el) {
+      var checkbox = el.getAttribute('type') === 'checkbox';
+      var eventType = checkbox ? 'change' : 'input';
       el.addEventListener(eventType, function() {
         updateButtonState();
       });
     });
 
     function updateButtonState() {
-      if (validation.call(null, elements) === true) {
+      if (validation.call(null, requireds) === true) {
         button.removeAttribute('disabled');
       } else {
         button.setAttribute('disabled', 'true');
@@ -33,19 +35,21 @@ document.addEventListener('DOMContentLoaded', function() {
   // auto reactiveButton submit-buttons with required fields
   var forms = document.querySelectorAll('form');
   Array.from(forms).forEach(function(form) {
-    var requireds = form.querySelectorAll('[required]');
     var submitBtn = form.querySelector('[type=submit]');
-    if (submitBtn && requireds) {
-      window.utils.reactiveButton(Array.from(requireds), submitBtn, function validateForm(inputs) {
-        var done = true;
-        inputs.forEach(function(inp) {
-          var len = inp.value.trim().length;
-          if (done && len === 0) {
-            done = false;
-          }
-        });
-        return done;
-      });
+    if (submitBtn) {
+      window.utils.reactiveButton(form, submitBtn, validateForm);
     }
   });
+
+  function validateForm(inputs) {
+    var done = true;
+    inputs.forEach(function(inp) {
+      var len = inp.value.trim().length;
+      if (done && len === 0) {
+        done = false;
+      }
+    });
+    return done;
+  }
+
 });

From 2971e4003201080c6eb1898f99b1cea9e5692857 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Thu, 21 Jun 2018 22:18:49 +0200
Subject: [PATCH 2/5] less complicated multifile-upload

---
 templates/multiFileField.hamlet    |   4 +-
 templates/standalone/inputs.julius | 170 +++++++++--------------------
 templates/standalone/inputs.lucius | 113 ++-----------------
 3 files changed, 59 insertions(+), 228 deletions(-)

diff --git a/templates/multiFileField.hamlet b/templates/multiFileField.hamlet
index 6a0b9c731..1d8cede30 100644
--- a/templates/multiFileField.hamlet
+++ b/templates/multiFileField.hamlet
@@ -7,8 +7,8 @@ $forall FileUploadInfo{..} <- fileInfos
       <label for=#{fuiHtmlId}>
 
 $# new files
-<input type="file" name=#{fieldName} multiple>
+<input type="file" name=#{fieldName} id=#{fieldId} multiple :req:required="required">
 
 <div .file-input__unpack>
   <label for=#{fieldId}_zip>ZIPs entpacken
-  <input type=checkbox id=#{fieldId}_zip name=#{fieldName} value=#{unpackZips} :req:required>
+  <input type=checkbox id=#{fieldId}_zip name=#{fieldName} value=#{unpackZips}>
diff --git a/templates/standalone/inputs.julius b/templates/standalone/inputs.julius
index eb8c52760..0f8fce6c1 100644
--- a/templates/standalone/inputs.julius
+++ b/templates/standalone/inputs.julius
@@ -4,133 +4,65 @@
   window.utils = window.utils || {};
 
   // allows for multiple file uploads with separate inputs
-  window.utils.reactiveFileUpload = function(input, formGroup) {
-    var currValidInputCount = 0;
-    var addMore = false;
-    var inputName = input.getAttribute('name');
-    var isMulti = input.hasAttribute('multiple') ? true : false;
-    var wrapper = formGroup;
-    // FileInput PseudoClass
-    function FileInput(container, input, label, remover) {
-      this.container = container;
-      this.input = input;
-      this.label = label;
-      this.remover = remover;
-      addListener(this);
+  window.utils.initializeFileUpload = function(input) {
+    var isMulti = input.hasAttribute('multiple');
+    var fileList = addFileList();
+    var label = addFileLabel();
 
-      this.addTo = function(parentElement) {
-        parentElement.appendChild(this.container);
-      }
-      this.remove = function() {
-        this.container.remove();
-      }
-      this.wasValid = function() {
-        return this.container.classList.contains('file-input__container--valid');
-      }
-    }
-    function addNextInput() {
-      var inputs = wrapper.querySelectorAll('.file-input__container');
-      if (inputs[inputs.length - 1].classList.contains('file-input__container--valid')) {
-        makeInput(inputName).addTo(wrapper);
-      }
-    }
-    // updates submitbutton and form-group-stripe
-    function updateForm() {
-      var submitBtn = formGroup.parentElement.querySelector('[type=submit]');
-      formGroup.classList.remove('form-group--has-error');
-      if (currValidInputCount > 0) {
-        if (formGroup.classList.contains('form-group')) {
-          formGroup.classList.add('form-group--valid')
-        }
-        if (isMulti) {
-          addNextInput();
-        }
-      } else {
-        if (formGroup.classList.contains('form-group')) {
-          formGroup.classList.remove('form-group--valid')
-        }
-      }
-    }
-    // addseventlistener destInput
-    function addListener(fileInput) {
-      fileInput.input.addEventListener('change', function(event) {
-        if (fileInput.input.value.length > 0) {
-          // update label
-          var filePath = fileInput.input.value.replace(/\\/g, '/').split('/');
-          var fileName = filePath[filePath.length - 1];
-          fileInput.label.innerHTML = fileName;
-          // increase count if this field was empty previously
-          if (!fileInput.wasValid()) {
-            currValidInputCount++;
-          }
-          fileInput.container.classList.add('file-input__container--valid')
-          // show next input
-        } else {
-          if (isMulti) {
-            currValidInputCount--;
-          }
-          clearInput(fileInput);
-        }
-        updateForm();
-      });
-      fileInput.input.addEventListener('focus', function() {
-        fileInput.container.classList.add('pseudo-focus');
-      });
-      fileInput.input.addEventListener('blur', function() {
-        fileInput.container.classList.remove('pseudo-focus');
-      });
-      fileInput.remover.addEventListener('click', function() {
-        if (fileInput.wasValid()) {
-          currValidInputCount--;
-        }
-        clearInput(fileInput);
+    function renderFileList(files) {
+      fileList.innerHTML = '';
+      Array.from(files).forEach(function(file, index) {
+        var fileDisplayEl = document.createElement('li');
+        fileDisplayEl.innerHTML = file.name;
+        fileList.appendChild(fileDisplayEl);
       });
     }
 
-    // clears or removes fileinput based on multi-file or not
-    function clearInput(fileInput) {
+    function updateLabel(files) {
       if (isMulti) {
-        fileInput.remove();
+        label.innerText = files.length + ' Dateien ausgwählt';
       } else {
-        fileInput.container.classList.remove('file-input__container--valid')
-        fileInput.label.innerHTML = '';
+        label.innerHTML = files[0].name;
       }
-      updateForm();
     }
-    // create new wrapped input element with name name
-    function makeInput(name) {
-      var cont =      document.createElement('div');
-      var desc =      document.createElement('label');
-      var nextInput = document.createElement('input');
-      var remover =   document.createElement('div');
-      cont.classList.add('file-input__container');
-      desc.classList.add('file-input__label', 'btn');
-      nextInput.classList.add('js-file-input');
-      desc.setAttribute('for', name + '-' + currValidInputCount);
-      remover.classList.add('file-input__remover');
-      nextInput.setAttribute('id', name + '-' + currValidInputCount);
-      nextInput.setAttribute('name', name);
-      nextInput.setAttribute('type', 'file');
-      cont.appendChild(nextInput);
-      cont.appendChild(desc);
-      cont.appendChild(remover);
-      return new FileInput(cont, nextInput, desc, remover);
+
+    function addFileList() {
+      var list = document.createElement('ol');
+      list.classList.add('file-input__list');
+      input.parentElement.appendChild(list);
+      return list;
     }
+
+    function addFileLabel() {
+      var label = document.createElement('label');
+      label.classList.add('file-input__label');
+      // interpolate translated String here
+      label.innerText = 'Datei' + (isMulti ? 'en' : '') + ' auswählen';
+      label.setAttribute('for', input.id);
+      input.parentElement.insertBefore(label, input);
+      return label;
+    }
+
+    function addMultiInfo() {
+      var info = document.createElement('div');
+      info.classList.add('file-input__info');
+      // interpolate translated String here
+      info.innerText = '(Mehrere Dateien mit Shift oder Strg auswählen)';
+      input.parentElement.insertBefore(info, input);
+    }
+
     // initial setup
-    function setup() {
-      var newInput = makeInput(inputName);
-      if (isMulti) {
-        wrapper = document.createElement('div');
-        wrapper.classList.add('file-input__wrapper');
-        console.log(wrapper);
-        // TODO: fix file input
-        formGroup.insertBefore(wrapper, input);
-      }
-      input.remove();
-      newInput.addTo(wrapper);
-      updateForm();
+    input.classList.add('file-input__input--hidden');
+    if (isMulti) {
+      addMultiInfo();
     }
-    setup();
+    input.addEventListener('change', function() {
+      if (isMulti) {
+        renderFileList(input.files);
+      }
+
+      updateLabel(input.files);
+    });
   }
 
   // to remove previously uploaded files
@@ -194,11 +126,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
   // initialize file-upload-fields
   Array.from(document.querySelectorAll('input[type="file"]')).forEach(function(inp) {
-    var formGroup = inp.parentNode;
-    while (!formGroup.classList.contains('form-group') && formGroup !== document.body) {
-      formGroup = formGroup.parentNode;
-    }
-    window.utils.reactiveFileUpload(inp, formGroup);
+    window.utils.initializeFileUpload(inp);
   });
 
   // initialize file-checkbox-fields
diff --git a/templates/standalone/inputs.lucius b/templates/standalone/inputs.lucius
index 2cfc1b357..fc659b5c7 100644
--- a/templates/standalone/inputs.lucius
+++ b/templates/standalone/inputs.lucius
@@ -243,114 +243,17 @@ input[type="checkbox"]:checked::after {
 }
 
 /* CUSTOM FILE INPUT */
-input[type="file"].js-file-input {
-  color: white;
-  width: 0.1px;
-  height: 0.1px;
-	opacity: 0;
-	overflow: hidden;
-	position: absolute;
-	z-index: -1;
-  outline: 0;
-  border: 0;
-}
-.file-input__wrapper {
-  grid-column-start: 2;
-}
-.file-input__container,
-.file-checkbox__container,
-.file-input__unpack {
-  grid-column-start: 2;
-  margin: 4px 0;
-}
-.file-input__label,
-.file-input__remover,
-.file-checkbox__label,
-.file-checkbox__remover {
-  display: block;
-  border-radius: 2px;
-  padding: 5px 13px;
-  color: var(--color-lightwhite);
+.file-input__label {
   cursor: pointer;
-}
-.file-input__label,
-.file-checkbox__label {
-  text-align: left;
-  position: relative;
-  height: 30px;
-}
-.file-checkbox__label {
-  background-color: var(--color-grey);
-  text-decoration: line-through;
-}
-.file-input__label.btn,
-.file-checkbox__label.btn {
-  padding: 5px 13px;
-}
-.file-input__label::after,
-.file-input__label::before {
-  position: absolute;
-  content: '';
-  background-color: white;
-  width: 16px;
-  height: 2px;
-  top: 14px;
-  top: 50%;
-  left: 12px;
-  left: 50%;
-}
-
-.file-input__label::after {
-  transform: translate(-50%, -50%) rotate(90deg);
-}
-.file-input__label::before {
-  transform: translate(-50%, -50%);
-}
-.file-checkbox__checkbox {
-  margin-left: 10px;
-}
-.file-input__remover {
-  display: none;
-  width: 40px;
-  height: 30px;
-  text-align: center;
-  background-color: var(--color-warning);
-  position: relative;
-  margin-left: 10px;
-}
-.file-input__remover::before {
-  position: absolute;
-  content: '';
-  width: 16px;
-  height: 2px;
-  top: 14px;
-  left: 12px;
-  background-color: white;
-}
-.file-input__container--valid > .file-input__label {
+  display: inline-block;
   background-color: var(--color-light);
+  color: white;
+  padding: 10px 17px;
+  border-radius: 3px;
 }
-.file-checkbox__container--checked > .file-checkbox__label {
-  text-decoration: none;
-  background-color: var(--color-lighter);
+.file-input__list {
 
-  &.btn:hover {
-    background-color: var(--color-lighter);
-    text-decoration: line-through;
-  }
 }
-.file-input__container--valid > .file-input__label::before,
-.file-input__container--valid > .file-input__label::after {
-  content: none;
-}
-.file-input__container--valid > .file-input__remover {
-  display: block;
-}
-@media (max-width: 768px) {
-  .file-input__wrapper,
-  .file-input__container,
-  .file-checkbox__container,
-  .file-input__unpack {
-    grid-column-start: 1;
-  }
+.file-input__input--hidden {
+  display: none;
 }

From aebdd51d4f9a9a2bef254b516f4be1d0104dc58a Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sat, 23 Jun 2018 18:30:48 +0200
Subject: [PATCH 3/5] styling for selects and options

---
 templates/standalone/inputs.lucius | 62 ++++++++++++++++--------------
 1 file changed, 33 insertions(+), 29 deletions(-)

diff --git a/templates/standalone/inputs.lucius b/templates/standalone/inputs.lucius
index fc659b5c7..4586121b8 100644
--- a/templates/standalone/inputs.lucius
+++ b/templates/standalone/inputs.lucius
@@ -11,11 +11,12 @@ form {
   grid-template-columns: 1fr 3fr;
   grid-gap: 5px;
   justify-content: flex-start;
-  align-items: baseline;
+  align-items: center;
+  padding: 4px;
   border-left: 2px solid transparent;
 
   + .form-group {
-    margin-top: 17px;
+    margin-top: 13px;
   }
 }
 
@@ -23,6 +24,22 @@ form {
   font-weight: 600;
 }
 
+.form-group--required {
+
+  .form-group__label::after {
+    content: ' *';
+    color: var(--color-error);
+  }
+}
+
+.form-group--has-error {
+  background-color: rgba(255, 0, 0, 0.1);
+
+  input, textarea {
+    border-color: var(--color-error) !important;
+  }
+}
+
 @media (max-width: 768px) {
   .form-group {
     grid-template-columns: 1fr;
@@ -63,33 +80,6 @@ input[type*="time"] {
   min-width: 240px;
 }
 
-.form-group--required {
-
-  .form-group__label::before {
-    content: '*';
-    position: absolute;
-    left: -14px;
-  }
-
-  input, textarea {
-    border-bottom-color: var(--color-primary);
-  }
-}
-
-.form-group--valid {
-
-  input, textarea {
-    border-bottom-color: var(--color-success);
-  }
-}
-
-.form-group--has-error {
-
-  input, textarea {
-    border-bottom-color: var(--color-error);
-  }
-}
-
 input[type="text"]:focus,
 input[type="password"]:focus,
 input[type="url"]:focus,
@@ -128,6 +118,20 @@ textarea:focus {
   outline: 0;
 }
 
+/* OPTIONS */
+select,
+option {
+  font-size: 1rem;
+  line-height: 1.5;
+  padding: 4px 13px;
+  border: 1px solid #dbdbdb;
+  border-radius: 2px;
+  outline: 0;
+  color: #363636;
+  background-color: #f3f3f3;
+  box-shadow: inset 0 1px 2px 1px rgba(50,50,50,.05);
+}
+
 /* CUSTOM LEGACY CHECKBOX AND RADIO BOXES */
 input[type="checkbox"] {
   position: relative;

From e7d31c0efbaaa677820c5b230d2fc6908dec3682 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sat, 23 Jun 2018 20:59:20 +0200
Subject: [PATCH 4/5] styling for multi-file-inputs

---
 messages/de.msg                    |  4 ++-
 templates/multiFileField.hamlet    |  9 ++++++-
 templates/multiFileField.lucius    | 37 ++++++++++++++++++++++++++++
 templates/standalone/inputs.julius | 39 ++++++++++++++++++------------
 4 files changed, 71 insertions(+), 18 deletions(-)
 create mode 100644 templates/multiFileField.lucius

diff --git a/messages/de.msg b/messages/de.msg
index 47da259ef..812f45c9a 100644
--- a/messages/de.msg
+++ b/messages/de.msg
@@ -14,7 +14,7 @@ CourseEditOk       tid@TermIdentifier courseShortHand@Text: Kurs #{termToText ti
 CourseNewDupShort  tid@TermIdentifier courseShortHand@Text: Kurs #{termToText tid}-#{courseShortHand} konnte nicht erstellt werden: Es gibt bereits einen anderen Kurs mit dem Kürzel #{courseShortHand} in diesem Semester.
 CourseEditDupShort tid@TermIdentifier courseShortHand@Text: Kurs #{termToText tid}-#{courseShortHand} konnte nicht geändert werden: Es gibt bereits einen anderen Kurs mit dem Kürzel #{courseShortHand} in diesem Semester.
 FFSheetName: Name
-TermCourseListHeading tid@TermIdentifier: Kursübersicht #{termToText tid} 
+TermCourseListHeading tid@TermIdentifier: Kursübersicht #{termToText tid}
 TermCourseListTitle tid@TermIdentifier: Kurse #{termToText tid}
 CourseEditHeading: Kurs editieren/anlegen
 CourseEditTitle: Kurs editieren/anlegen
@@ -75,3 +75,5 @@ SheetExercise: Aufgabenstellung
 SheetHint: Hinweise
 SheetSolution: Lösung
 SheetMarking: Korrekturhinweise
+
+MultiFileUploadInfo: (Mehrere Dateien mit Shift oder Strg auswählen)
diff --git a/templates/multiFileField.hamlet b/templates/multiFileField.hamlet
index 1d8cede30..9b8eb16c9 100644
--- a/templates/multiFileField.hamlet
+++ b/templates/multiFileField.hamlet
@@ -9,6 +9,13 @@ $forall FileUploadInfo{..} <- fileInfos
 $# new files
 <input type="file" name=#{fieldName} id=#{fieldId} multiple :req:required="required">
 
+<div .file-input__multi-info>
+    _{MsgMultiFileUploadInfo}
+
 <div .file-input__unpack>
-  <label for=#{fieldId}_zip>ZIPs entpacken
+  <label for=#{fieldId}_zip>ZIPs automatisch entpacken
   <input type=checkbox id=#{fieldId}_zip name=#{fieldName} value=#{unpackZips}>
+  <span .unpack-zip-info-toggler>?
+
+$# TODO: make modal available in this scope
+$# ^{modal ".unpack-zip-info-toggler" (Just "Entpackt zips automatisch nach dem Upload und fügt den Inhalt im Stamm-Verzeichnis ein.")}
diff --git a/templates/multiFileField.lucius b/templates/multiFileField.lucius
new file mode 100644
index 000000000..06c58f79a
--- /dev/null
+++ b/templates/multiFileField.lucius
@@ -0,0 +1,37 @@
+.file-input__unpack {
+  font-size: .9rem;
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+
+  .checkbox {
+    display: inline-block;
+    margin: 0 10px;
+  }
+}
+
+.file-input__multi-info {
+  font-size: .9rem;
+  font-style: italic;
+  margin-top: 10px;
+  color: var(--color-fontsec);
+}
+
+.unpack-zip-info-toggler {
+  background-color: var(--color-dark);
+  border-radius: 50%;
+  height: 1.5rem;
+  width: 1.5rem;
+  line-height: 1.5rem;
+  font-size: 1.2rem;
+  color: white;
+  display: inline-block;
+  text-align: center;
+  cursor: pointer;
+  margin: 0 10px;
+}
+
+.file-input__list {
+  margin-left: 15px;
+  margin-top: 10px;
+}
diff --git a/templates/standalone/inputs.julius b/templates/standalone/inputs.julius
index 0f8fce6c1..027a5aa76 100644
--- a/templates/standalone/inputs.julius
+++ b/templates/standalone/inputs.julius
@@ -6,7 +6,7 @@
   // allows for multiple file uploads with separate inputs
   window.utils.initializeFileUpload = function(input) {
     var isMulti = input.hasAttribute('multiple');
-    var fileList = addFileList();
+    var fileList = isMulti ? addFileList() : null;
     var label = addFileLabel();
 
     function renderFileList(files) {
@@ -19,43 +19,45 @@
     }
 
     function updateLabel(files) {
-      if (isMulti) {
-        label.innerText = files.length + ' Dateien ausgwählt';
+      if (files.length) {
+        if (isMulti) {
+          label.innerText = files.length + ' Dateien ausgwählt';
+        } else {
+          label.innerHTML = files[0].name;
+        }
       } else {
-        label.innerHTML = files[0].name;
+        resetFileLabel();
       }
     }
 
     function addFileList() {
       var list = document.createElement('ol');
       list.classList.add('file-input__list');
-      input.parentElement.appendChild(list);
+      var unpackEl = input.parentElement.querySelector('.file-input__unpack');
+      if (unpackEl) {
+        input.parentElement.insertBefore(list, unpackEl);
+      } else {
+        input.parentElement.appendChild(list);
+      }
       return list;
     }
 
     function addFileLabel() {
       var label = document.createElement('label');
       label.classList.add('file-input__label');
-      // interpolate translated String here
-      label.innerText = 'Datei' + (isMulti ? 'en' : '') + ' auswählen';
       label.setAttribute('for', input.id);
       input.parentElement.insertBefore(label, input);
       return label;
     }
 
-    function addMultiInfo() {
-      var info = document.createElement('div');
-      info.classList.add('file-input__info');
+    function resetFileLabel() {
       // interpolate translated String here
-      info.innerText = '(Mehrere Dateien mit Shift oder Strg auswählen)';
-      input.parentElement.insertBefore(info, input);
+      label.innerText = 'Datei' + (isMulti ? 'en' : '') + ' auswählen';
     }
 
     // initial setup
+    resetFileLabel();
     input.classList.add('file-input__input--hidden');
-    if (isMulti) {
-      addMultiInfo();
-    }
     input.addEventListener('change', function() {
       if (isMulti) {
         renderFileList(input.files);
@@ -99,6 +101,7 @@
 
     if (!input.parentElement.classList.contains(type)) {
       var parentEl = input.parentElement;
+      var siblingEl = input.nextElementSibling;
       var wrapperEl = document.createElement('div');
       var labelEl = document.createElement('label');
       wrapperEl.classList.add(type);
@@ -106,7 +109,11 @@
       wrapperEl.appendChild(input);
       wrapperEl.appendChild(labelEl);
 
-      parentEl.appendChild(wrapperEl);
+      if (siblingEl) {
+        parentEl.insertBefore(wrapperEl, siblingEl);
+      } else {
+        parentEl.appendChild(wrapperEl);
+      }
     }
   }
 

From 2a57acc99e087c8103089fca7329fe1e13f60854 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sat, 23 Jun 2018 21:18:05 +0200
Subject: [PATCH 5/5] better fitting styling for custom checkboxes and radio
 buttons

---
 templates/multiFileField.lucius    |  3 ++-
 templates/standalone/inputs.lucius | 32 +++++++++++-------------------
 2 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/templates/multiFileField.lucius b/templates/multiFileField.lucius
index 06c58f79a..6d757a82f 100644
--- a/templates/multiFileField.lucius
+++ b/templates/multiFileField.lucius
@@ -6,7 +6,7 @@
 
   .checkbox {
     display: inline-block;
-    margin: 0 10px;
+    margin-left: 5px;
   }
 }
 
@@ -34,4 +34,5 @@
 .file-input__list {
   margin-left: 15px;
   margin-top: 10px;
+  font-weight: 600;
 }
diff --git a/templates/standalone/inputs.lucius b/templates/standalone/inputs.lucius
index 4586121b8..11a32c9cb 100644
--- a/templates/standalone/inputs.lucius
+++ b/templates/standalone/inputs.lucius
@@ -180,9 +180,10 @@ input[type="checkbox"]:checked::after {
 
   label {
     display: block;
-    height: 30px;
-    width: 30px;
-    background-color: var(--color-grey);
+    height: 24px;
+    width: 24px;
+    background-color: #f3f3f3;
+    box-shadow: inset 0 1px 2px 1px rgba(50,50,50,.05);
     border-radius: 4px;
     color: white;
     cursor: pointer;
@@ -192,25 +193,14 @@ input[type="checkbox"]:checked::after {
   label::after {
     content: '';
     position: absolute;
-    top: 14px;
-    left: 5px;
+    top: 11px;
+    left: 3px;
     display: block;
-    width: 20px;
-    height: 20px;
-    background-color: white;
+    width: 18px;
+    height: 2px;
+    background-color: var(--color-font);
     transition: all .2s;
-  }
-
-  label::before {
-    width: 20px;
-    height: 2px;
-    transform: scale(0.1, 0.1);
-  }
-
-  label::after {
-    width: 20px;
-    height: 2px;
-    transform: scale(0.1, 0.1);
+    transform: scale(0.5, 0.1);
   }
 
   :checked + label {
@@ -219,10 +209,12 @@ input[type="checkbox"]:checked::after {
   }
 
   :checked + label::before {
+    background-color: white;
     transform: scale(1, 1) rotate(45deg);
   }
 
   :checked + label::after {
+    background-color: white;
     transform: scale(1, 1) rotate(-45deg);
   }
 }