From 8634ad6adab6fe04a83fb4365bb6b1c951df6331 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Tue, 8 May 2018 22:59:46 +0200
Subject: [PATCH 1/3] readded removed JavaScript libraries

---
 src/Foundation.hs | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/Foundation.hs b/src/Foundation.hs
index 314229d96..db639d8ee 100644
--- a/src/Foundation.hs
+++ b/src/Foundation.hs
@@ -236,7 +236,12 @@ instance Yesod UniWorX where
 
         pc <- widgetToPageContent $ do
             addStylesheetRemote "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,800,900"
+            addScript $ StaticR js_zepto_js
+            addScript $ StaticR js_fetchPolyfill_js
+            addScript $ StaticR js_urlPolyfill_js
             addScript $ StaticR js_featureChecker_js
+            addScript $ StaticR js_tabber_js
+            addStylesheet $ StaticR css_tabber_css
             addStylesheet $ StaticR css_fonts_css
             addStylesheet $ StaticR css_icons_css
             $(widgetFile "default-layout")

From a17ba443ad23b90968d3f29176d1e4813e502738 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Wed, 16 May 2018 23:20:08 +0200
Subject: [PATCH 2/3] less obtrusive validation for forms and fix for
 submit-button

---
 templates/standalone/inputs.julius |  2 --
 templates/standalone/inputs.lucius | 37 +++++++++++++++++++-----------
 templates/widgets/form.julius      |  8 +++----
 3 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/templates/standalone/inputs.julius b/templates/standalone/inputs.julius
index e677cdcc4..ce38268ad 100644
--- a/templates/standalone/inputs.julius
+++ b/templates/standalone/inputs.julius
@@ -63,7 +63,6 @@
         if (formGroup.classList.contains('form-group')) {
           formGroup.classList.add('form-group--valid')
         }
-        submitBtn.removeAttribute('disabled');
         if (isMulti) {
           addNextInput();
         }
@@ -71,7 +70,6 @@
         if (formGroup.classList.contains('form-group')) {
           formGroup.classList.remove('form-group--valid')
         }
-        submitBtn.setAttribute('disabled', 'disabled');
       }
     }
     // addseventlistener destInput
diff --git a/templates/standalone/inputs.lucius b/templates/standalone/inputs.lucius
index e22350888..550fe84ac 100644
--- a/templates/standalone/inputs.lucius
+++ b/templates/standalone/inputs.lucius
@@ -15,19 +15,7 @@ form {
   align-items: center;
   margin: 10px 0;
   padding-left: 10px;
-  border-left: 8px solid transparent;
-}
-
-.form-group--required {
-  border-left: 8px solid var(--lighterbase);
-}
-
-.form-group--valid {
-  border-left: 8px solid var(--validbase);
-}
-
-.form-group--has-error {
-  border-left: 8px solid var(--errorbase) !important;
+  border-left: 2px solid transparent;
 }
 
 .form-group__label {
@@ -68,6 +56,27 @@ input[type="email"] {
   min-width: 400px;
 }
 
+.form-group--required {
+
+  input, textarea {
+    border-bottom-color: var(--lighterbase);
+  }
+}
+
+.form-group--valid {
+
+  input, textarea {
+    border-bottom-color: var(--validbase);
+  }
+}
+
+.form-group--has-error {
+
+  input, textarea {
+    border-bottom-color: var(--errorbase);
+  }
+}
+
 input[type="text"]:focus,
 input[type="password"]:focus,
 input[type="url"]:focus,
@@ -75,6 +84,7 @@ input[type="number"]:focus,
 input[type="email"]:focus {
   border-bottom-color: var(--lightbase);
   background-color: transparent;
+  box-shadow: 0 0 13px var(--lighterbase);
 }
 
 /* BUTTON STYLE SEE default-layout.lucius */
@@ -97,6 +107,7 @@ textarea {
 textarea:focus {
   background-color: transparent;
   border-bottom-color: var(--lightbase);
+  box-shadow: 0 0 13px var(--lighterbase);
 }
 
 /* CUSTOM LEGACY CHECKBOX AND RADIO BOXES */
diff --git a/templates/widgets/form.julius b/templates/widgets/form.julius
index 973e1217d..994f1bece 100644
--- a/templates/widgets/form.julius
+++ b/templates/widgets/form.julius
@@ -4,8 +4,8 @@
   window.utils = window.utils || {};
 
   // 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) {
+  // enables <button> if <validation> for these elements returns true
+  window.utils.reactiveButton = function(elements, button, validation) {
     if (elements.length == 0) {
       return false;
     }
@@ -19,7 +19,7 @@
     });
 
     function updateButtonState() {
-      if (fn.call(null, elements)) {
+      if (validation.call(null, elements) === true) {
         button.removeAttribute('disabled');
       } else {
         button.setAttribute('disabled', 'true');
@@ -36,7 +36,7 @@ document.addEventListener('DOMContentLoaded', function() {
     var requireds = form.querySelectorAll('[required]');
     var submitBtn = form.querySelector('[type=submit]');
     if (submitBtn && requireds) {
-      window.utils.reactiveButton(Array.from(requireds), submitBtn, function(inputs) {
+      window.utils.reactiveButton(Array.from(requireds), submitBtn, function validateForm(inputs) {
         var done = true;
         inputs.forEach(function(inp) {
           var len = inp.value.trim().length;

From 3a38c36f914dc886185cff53a60825c6b0180254 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Wed, 16 May 2018 23:30:39 +0200
Subject: [PATCH 3/3] cleaner look for tab-groups and tab-openers

---
 static/css/tabber.css | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/static/css/tabber.css b/static/css/tabber.css
index 8643ddbe3..f768f6f24 100644
--- a/static/css/tabber.css
+++ b/static/css/tabber.css
@@ -1,5 +1,7 @@
 .tab-group {
-  box-shadow: 0 0 0 18px white, 0 0 0 20px #b3b7c1;
+  /* box-shadow: 0 0 0 18px white, 0 0 0 20px #b3b7c1; */
+  border-top: 2px solid #dcdcdc;
+  padding-top: 30px;
   margin-top: 40px;
 }
 
@@ -22,21 +24,18 @@
   font-size: 16px;
   text-transform: uppercase;
   font-weight: 600;
-  transition: all .2s ease;
-  box-shadow: inset 0 -4px 4px rgba(0, 0, 0, 0.1);
-  border-top: 5px solid transparent;
+  transition: all .1s ease;
+  border-bottom: 5px solid rgba(100, 100, 100, 0.2);
 }
 .tab-opener:not(.tab-visible):hover {
   cursor: pointer;
   background-color: transparent;
   color: rgb(52, 48, 58);
-  box-shadow: none;
-  border-top-color: grey;
+  border-bottom-color: grey;
 }
 
 .tab-opener.tab-visible {
   background-color: transparent;
   color: rgb(52, 48, 58);
-  border-top-color: #5F98C2;
-  box-shadow: none;
+  border-bottom-color: #5F98C2;
 }