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

templates/default-layout.lucius

@@ -281,11 +281,7 @@ a.btn.btn-info:hover,
 }
 
 /* TABLE DESIGN */
-.table__row {
+.table__td, .table__th {
-
-  /* TODO: move outside of table__row as soon as tds and ths get their own class */
-  /* .table__td, .table__th { */
-  td, th {
   padding-top: 14px;
   padding-bottom: 10px;
   padding-left: 10px;
@@ -293,16 +289,14 @@ a.btn.btn-info:hover,
   max-width: 300px;
 }
 
-  /* .table__td { */
+.table__td {
-  td {
   font-size: 16px;
   color: #808080;
   line-height: 1.4;
   vertical-align: top;
 }
 
-  /* .table__th { */
+.table__th {
-  th {
   background-color: var(--color-dark);
   position: relative;
   font-size: 16px;
@@ -313,7 +307,6 @@ a.btn.btn-info:hover,
   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}>
+  <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,15 +1,12 @@
-/* SORTABLE TABLE */
+/* SORTABLE TABLE-HEADERS*/
-.table {
+.table__th.sortable {
-
-  /* TODO: move outside of table as soon as tds and ths get their own class */
-  th.sortable {
   position: relative;
   padding-right: 24px;
   cursor: pointer;
 }
 
-  th.sortable::after,
+.table__th.sortable::after,
-  th.sortable::before {
+.table__th.sortable::before {
   content: '';
   position: absolute;
   top: 50%;
@@ -21,24 +18,23 @@
   border-bottom: 8px solid rgba(255, 255, 255, 0.4);
 }
 
-  th.sortable::before {
+.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 */
   transform: translateY(150%) scale(1, -1);
   transform-origin: top;
 }
 
-  th.sortable::after {
+.table__th.sortable::after {
   transform: translateY(-150%);
 }
 
-  th.sortable:hover::before,
+.table__th.sortable:hover::before,
-  th.sortable:hover::after {
+.table__th.sortable:hover::after {
   border-bottom-color: rgba(255, 255, 255, 0.7);
 }
 
-  th.sorted-asc::before,
+.table__th.sorted-asc::before,
-  th.sorted-desc::after {
+.table__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;
+}