added reactive input labels and general form styling

src/Handler/Home.hs

@@ -46,9 +46,11 @@ getHomeR = do
     addStylesheet $ StaticR css_stickybar_css
     addStylesheet $ StaticR css_show_hide_css
     addStylesheet $ StaticR css_sortable_css
+    addStylesheet $ StaticR css_reactive_input_css
     addScript $ StaticR js_stickybar_js
     addScript $ StaticR js_show_hide_js
     addScript $ StaticR js_sortable_js
+    addScript $ StaticR js_reactive_input_js
     setTitle "Willkommen zum ReWorX Test!"
     $(widgetFile "home")
 

static/css/reactive_input.css

@@ -0,0 +1,14 @@
+.reactive-label {
+  position: absolute;
+  left: 4px;
+  top: 2px;
+  transition: all .1s;
+  cursor: text;
+  color: #666;
+}
+.reactive-label.small {
+  transform: translateY(-100%);
+  font-size: 12px;
+  cursor: default;
+  color: #333;
+}

static/js/reactive_input.js

@@ -0,0 +1,68 @@
+document.addEventListener('DOMContentLoaded', function() {
+
+  if (!window.utils) {
+    window.utils = {};
+  }
+
+  // makes <label> smaller if <input> is focussed
+  window.utils.reactiveInputLabel = function(input, label) {
+    input.addEventListener('focus', function() {
+      label.classList.add('small');
+    });
+    label.addEventListener('click', function() {
+      label.classList.add('small');
+      input.focus();
+    });
+    input.addEventListener('blur', function() {
+      if (input.value.length < 1) {
+        label.classList.remove('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) {
+    if (elements.length == 0) {
+      return false;
+    }
+    var checkboxes = elements[0].getAttribute('type') === 'checkbox';
+    var eventType = checkboxes ? 'change' : 'input';
+    updateButtonState();
+    elements.forEach(function(el) {
+      el.addEventListener(eventType, function() {
+        updateButtonState();
+      });
+    });
+
+    function updateButtonState() {
+      if (fn.call(null, elements)) {
+        button.removeAttribute('disabled');
+      } else {
+        button.setAttribute('disabled', 'true');
+      }
+    }
+  };
+
+  // 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]');
+    window.utils.reactiveButton(Array.from(requireds), submitBtn, function(inputs) {
+      var done = true;
+      inputs.forEach(function(inp) {
+        var len = inp.value.trim().length;
+        if (done && len === 0) {
+          done = false;
+        }
+      });
+      return done;
+    });
+  });
+});

static/js/sortable.js

@@ -8,7 +8,6 @@ document.addEventListener('DOMContentLoaded', function() {
     var DESC = -1;
 
     function initTable(table, tableIndex) {
-      console.log('initTable for ', table);
         var trs = table.querySelectorAll('tr');
         var ths = table.querySelectorAll('th');
         var trContents = [];

templates/default-layout.lucius

@@ -1,23 +1,19 @@
-/* THEME 1 */
+:root {
-@base00: #72a85b;
+  /* THEME 1 */
-@base-bg-color: #1d1c1d;
+  --base00: #72a85b;
-@base-font-color: #fff;
+  --base-bg-color: #1d1c1d;
-@sec-font-color: #fff;
+  --base-font-color: #fff;
-@box-bg-color: #3c3c3c;
+  --sec-font-color: #fff;
-/* THEME 2 */
+  --box-bg-color: #3c3c3c;
-@base00: #38428a;
+  /* THEME 2 */
-@base-bg-color: #ffffff;
+  --base00: #38428a;
-@base-font-color: rgb(53, 53, 53);
+  --base-bg-color: #ffffff;
-@sec-font-color: #eaf2ff;
+  --base-font-color: rgb(53, 53, 53);
-@box-bg-color: #dddddd;
+  --sec-font-color: #eaf2ff;
-/* THEME 3 */
+  --box-bg-color: #dddddd;
-@base00: rebeccapurple;
+  /* THEME 3 */
-
+  --base00: rebeccapurple;
-
+}
-
-
-@footer-height: 50px;
-
 
 
 
@@ -91,3 +87,59 @@ th, td {
     margin: 10px 0;
   }
 }
+
+/* FORMS */
+input[type="text"],
+input[type="password"],
+input[type="email"] {
+  background-color: rgba(0, 0, 0, 0.05);
+  padding: 7px 3px 4px;
+  border: none;
+  outline: 0;
+  border-bottom: 2px solid rebeccapurple;
+  color: var(--base-font-color);
+  transition: all .1s;
+  font-size: 16px;
+}
+
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="email"]:focus {
+  border-bottom-color: red;
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+input[type="submit"],
+input[type="button"],
+button {
+  outline: 0;
+  border: 0;
+  box-shadow: 0;
+  background-color: var(--base00);
+  color: white;
+  padding: 7px 13px;
+  border: 1px solid rebeccapurple;
+  transition: all .1s;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+input[type="submit"][disabled],
+input[type="button"][disabled],
+button[disabled] {
+  opacity: 0.3;
+  border: 1px solid transparent;
+  cursor: default;
+}
+
+input[type="submit"]:not([disabled]):hover,
+input[type="button"]:not([disabled]):hover,
+button:not([disabled]):hover {
+  background-color: var(--base-bg-color);
+  color: var(--base-font-color);
+  transform: scale(1.1);
+}
+
+.form-group {
+  position: relative;
+}

templates/home.hamlet

@@ -2,27 +2,13 @@
   <h1>ReWorX - Demo
   <h3>
     Testumgebung für die Re-Implementierung von <a href="https://uniworx.ifi.lmu.de/">UniWorX</a>
-
-<div>
-  <h2>Übersicht
   <p>
     Die Reimplementierung von
     UniWorX ist noch nicht abgeschlossen.
 
   <p .alert .alert-danger>Das System ist noch nicht produktiv einsetzbar
 
-<div>
+<!-- SHOW-HIDE-TEST -->
-  <h2>Design
-  <p>
-    Wir konzentrieren uns derzeit
-    ausschließlich auf die Funktionalität.
-  <p>
-    Insbesondere Formulare zeigen
-    alle Eingabefelder und Knöpfe
-    ohne eine gezielte Anordnung
-    und Reihenfolge.
-    Dies läßt sich leicht nachträglich einstellen.
-
 <div .js-show-hide>
   <h2 .js-show-hide-toggle>Teilweise funktionierende Abschnitte
 
@@ -39,8 +25,8 @@
     <li .list-group-item>
       <a href=@{SubmissionListR}>Dateien hochladen und abrufen
 
-
 <div>
+  <h2>SORTABLE-TEST
   <table .js-sortable>
     <thead>
       <tr>
@@ -70,6 +56,46 @@
         <td>T2C2
         <td>35
 
+<div>
+  <h2>FORM-TEST & STYLEGUIDE
+  <form method=post action=@{HomeR}>
+    <div .form-group>
+      <label .reactive-label for=text>Vorname*
+      <input type=text id=text required=true>
+    <div .form-group>
+      <label .reactive-label for=password>Passwort*
+      <input type=password id=password required=true>
+    <div .form-group>
+      <label .reactive-label for=email>Email*
+      <input type=email id=email required=true>
+    <div .form-group>
+      <label for=date>Date
+      <input type=date id=date>
+    <div .form-group>
+      <select required=true>
+        <option>Option 1
+        <option>Option 2
+        <option>Option 3
+
+    <div .form-group>
+      <textarea>No content yet
+
+    <div .form-group>
+      <label for=chkbox1>Opt A
+      <input type=checkbox id=chkbox1>
+      <label for=chkbox2>Opt B
+      <input type=checkbox id=chkbox2>
+
+    <div .form-group>
+      <label for=rdbtn1>Exkl Opt A
+      <input type=radio name=group1[] id=rdbtn1>
+      <label for=rdbtn2>Exkl Opt B
+      <input type=radio name=group1[] id=rdbtn2>
+
+    <input type=submit value="Senden" id=submit-btn>
+
+    <input type=button value="Test">
+
 <div>
   <h2>Funktionen zum Testen