Merge branch 'master' into feat/exercises

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")

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;
 }

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

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 */

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;