Merge branch 'feat/pagination' of gitlab.cip.ifi.lmu.de:jost/UniWorX into feat/pagination

templates/default-layout.lucius

@@ -281,38 +281,31 @@ a.btn.btn-info:hover,
 }
 
 /* TABLE DESIGN */
-.table__row {
+.table__td, .table__th {
+  padding-top: 14px;
+  padding-bottom: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  max-width: 300px;
+}
 
-  /* TODO: move outside of table__row as soon as tds and ths get their own class */
+.table__td {
-  /* .table__td, .table__th { */
+  font-size: 16px;
-  td, th {
+  color: #808080;
-    padding-top: 14px;
+  line-height: 1.4;
-    padding-bottom: 10px;
+  vertical-align: top;
-    padding-left: 10px;
+}
-    padding-right: 10px;
-    max-width: 300px;
-  }
 
-  /* .table__td { */
+.table__th {
-  td {
+  background-color: var(--color-dark);
-    font-size: 16px;
+  position: relative;
-    color: #808080;
+  font-size: 16px;
-    line-height: 1.4;
+  color: #fff;
-    vertical-align: top;
+  line-height: 1.4;
-  }
+  padding-top: 10px;
-
+  padding-bottom: 10px;
-  /* .table__th { */
+  font-weight: bold;
-  th {
+  text-align: left;
-    background-color: var(--color-dark);
-    position: relative;
-    font-size: 16px;
-    color: #fff;
-    line-height: 1.4;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    font-weight: bold;
-    text-align: left;
-  }
 }
 
 @media (max-width: 1200px) {
@@ -323,7 +316,7 @@ a.btn.btn-info:hover,
 }
 
 .table__td-content {
-  max-height: 100px;
+  max-height: 200px;
   overflow-y: auto;
 }
 

templates/table/cell/body.hamlet

@@ -1,2 +1,3 @@
-<td *{attrs}>
+<td .table__td *{attrs}>
-  ^{widget}
+  <div .table__td-content>
+    ^{widget}

templates/table/cell/header.hamlet

@@ -1,4 +1,4 @@
-<th *{attrs} :isSortable:.sortable :isSorted SortAsc:.sorted-asc :isSorted SortDesc:.sorted-desc>
+<th .table__th *{attrs} :isSortable:.sortable :isSorted SortAsc:.sorted-asc :isSorted SortDesc:.sorted-desc>
   $maybe flag <- sortableKey
     $case directions
       $of [SortAsc]

templates/table/colonnade.lucius

@@ -1,44 +1,40 @@
-/* SORTABLE TABLE */
+/* SORTABLE TABLE-HEADERS*/
-.table {
+.table__th.sortable {
-
+  position: relative;
-  /* TODO: move outside of table as soon as tds and ths get their own class */
+  padding-right: 24px;
-  th.sortable {
+  cursor: pointer;
-    position: relative;
+}
-    padding-right: 24px;
+
-    cursor: pointer;
+.table__th.sortable::after,
-  }
+.table__th.sortable::before {
-
+  content: '';
-  th.sortable::after,
+  position: absolute;
-  th.sortable::before {
+  top: 50%;
-    content: '';
+  right: 4px;
-    position: absolute;
+  width: 0;
-    top: 50%;
+  height: 0;
-    right: 4px;
+  border-left: 8px solid transparent;
-    width: 0;
+  border-right: 8px solid transparent;
-    height: 0;
+  border-bottom: 8px solid rgba(255, 255, 255, 0.4);
-    border-left: 8px solid transparent;
+}
-    border-right: 8px solid transparent;
+
-    border-bottom: 8px solid rgba(255, 255, 255, 0.4);
+.table__th.sortable::before {
-  }
+  /* magic numbers to move arrow back in the right position after flipping it.
-
+  this allows us to use the same border for the up and the down arrow */
-  th.sortable::before {
+  transform: translateY(150%) scale(1, -1);
-    /* magic numbers to move arrow back in the right position after flipping it.
+  transform-origin: top;
-    this allows us to use the same border for the up and the down arrow */
+}
-    transform: translateY(150%) scale(1, -1);
+
-    transform-origin: top;
+.table__th.sortable::after {
-  }
+  transform: translateY(-150%);
-
+}
-  th.sortable::after {
+
-    transform: translateY(-150%);
+.table__th.sortable:hover::before,
-  }
+.table__th.sortable:hover::after {
-
+  border-bottom-color: rgba(255, 255, 255, 0.7);
-  th.sortable:hover::before,
+}
-  th.sortable:hover::after {
+
-    border-bottom-color: rgba(255, 255, 255, 0.7);
+.table__th.sorted-asc::before,
-  }
+.table__th.sorted-desc::after {
-
+  border-bottom-color: white !important;
-  th.sorted-asc::before,
-  th.sorted-desc::after {
-    border-bottom-color: white !important;
-  }
 }

templates/widgets/form.hamlet

@@ -7,5 +7,4 @@ $case formLayout
         $if not (Blaze.null $ fvLabel view)
           <label .form-group__label for=#{fvId view}>#{fvLabel view}
         <div .form-group__input>
-          $# FIXME: file-input does not have `required` attribute, although set on form-group
           ^{fvInput view}

templates/widgets/form.julius

@@ -28,17 +28,52 @@
       }
     }
   };
+
+  window.utils.interactiveFieldset = function(form, fieldSets) {
+
+    var fields = fieldSets.map(function(fs) {
+      return {
+        fieldSet: fs,
+        condId: fs.dataset.conditionalId,
+        condValue: fs.dataset.conditionalValue,
+        condEl: form.querySelector('#' + fs.dataset.conditionalId),
+      };
+    }).filter(function(field) {
+      return !!field.condEl;
+    });
+
+    function updateFields() {
+      fields.forEach(function(field) {
+        field.fieldSet.classList.toggle('hidden', field.condEl.value !== field.condValue);
+      });
+    }
+
+    function addEventListeners() {
+      fields.forEach(function(field) {
+        field.condEl.addEventListener('input', updateFields)
+      });
+    }
+
+    if (fieldSets.length) {
+      addEventListeners();
+      updateFields();
+    }
+  };
 })();
 
 document.addEventListener('DOMContentLoaded', function() {
 
-  // auto reactiveButton submit-buttons with required fields
   var forms = document.querySelectorAll('form');
   Array.from(forms).forEach(function(form) {
+    // auto reactiveButton submit-buttons with required fields
     var submitBtn = form.querySelector('[type=submit]');
     if (submitBtn) {
       window.utils.reactiveButton(form, submitBtn, validateForm);
     }
+
+    // auto conditonal fieldsets
+    var fieldSets = Array.from(form.querySelectorAll('fieldset[data-conditional-id][data-conditional-value]'));
+    window.utils.interactiveFieldset(form, fieldSets);
   });
 
   function validateForm(inputs) {

templates/widgets/form.lucius

@@ -0,0 +1,3 @@
+.hidden {
+  display: none;
+}