hide filter in showhide

messages/uniworx/de.msg

@@ -87,6 +87,7 @@ CourseRegisterToTip: Anmeldung darf auch unbegrenzt offen bleiben
 CourseDeregisterUntilTip: Abmeldung darf auch unbegrenzt erlaubt bleiben
 CourseFilterSearch: Volltext-Suche
 CourseFilterRegistered: Registriert
+CourseFilterNone: Egal
 CourseDeleteQuestion: Wollen Sie den unten aufgeführten Kurs wirklich löschen?
 CourseDeleted: Kurs gelöscht
 CourseUserNote: Notiz

static/css/utils/radio.scss

@@ -24,18 +24,21 @@
 
   label {
     display: block;
-    height: 48px;
+    height: 34px;
-    min-width: 48px;
+    min-width: 42px;
+    line-height: 34px;
+    text-align: center;
     padding: 0 7px;
     background-color: #f3f3f3;
-    box-shadow: inset 0 1px 2px 1px rgba(50, 50, 50, 0.05);
+    box-shadow: inset 2px 1px 2px 1px rgba(50, 50, 50, 0.05);
-    border: 2px solid var(--color-primary);
     color: var(--color-font);
     cursor: pointer;
   }
 
   :checked + label {
-    background-color: #dedede;
+    background-color: #818181;
+    color: var(--color-lightwhite);
+    box-shadow: inset -2px -1px 2px 1px rgba(255, 255, 255, 0.15);
   }
 
   :focus + label {
@@ -51,3 +54,23 @@
     filter: grayscale(1);
   }
 }
+
+.radio:first-child {
+  label {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+}
+
+.radio:last-child {
+  label {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+}
+
+@media (max-width: 768px) {
+  .radio + .radio {
+    margin-left: 10px;
+  }
+}

static/js/utils/asyncTable.js

@@ -51,6 +51,9 @@
       // check all
       utilInstances.push(window.utils.setup('checkAll', wrapper));
 
+      // showhide
+      utilInstances.push(window.utils.setup('showHide', wrapper));
+
       // filter
       var filterForm = wrapper.querySelector('.' + TABLE_FILTER_FORM_CLASS);
       if (filterForm) {

static/js/utils/showHide.js

@@ -4,6 +4,10 @@
   window.utils = window.utils || {};
 
   var LOCAL_STORAGE_SHOW_HIDE = 'SHOW_HIDE';
+  var SHOW_HIDE_TOGGLE_CLASS = 'js-show-hide__toggle';
+  var SHOW_HIDE_COLLAPSED_CLASS = 'js-show-hide--collapsed';
+  var SHOW_HIDE_TARGET_CLASS = 'js-show-hide__target';
+
   /**
    * div
    *   div.js-show-hide__toggle
@@ -12,9 +16,13 @@
    *     content here
    */
   window.utils.showHide = function(wrapper, options) {
+
+    options = options || {};
+    // make
+
     function addEventHandler(el) {
       el.addEventListener('click', function elClickListener() {
-        var newState = el.parentElement.classList.toggle('js-show-hide--collapsed');
+        var newState = el.parentElement.classList.toggle(SHOW_HIDE_COLLAPSED_CLASS);
         updateLSState(el.dataset.shIndex || null, newState);
       });
     }
@@ -37,16 +45,16 @@
     }
 
     Array
-      .from(wrapper.querySelectorAll('.js-show-hide__toggle'))
+      .from(wrapper.querySelectorAll('.' + SHOW_HIDE_TOGGLE_CLASS))
       .forEach(function(el) {
         var index = el.dataset.shIndex || null;
         el.parentElement.classList.toggle(
-          'js-show-hide--collapsed',
+          SHOW_HIDE_COLLAPSED_CLASS,
           collapsedStateInLocalStorage(index) || el.dataset.collapsed === 'true'
         );
         Array.from(el.parentElement.children).forEach(function(el) {
-          if (!el.classList.contains('js-show-hide__toggle')) {
+          if (!el.classList.contains('' + SHOW_HIDE_TOGGLE_CLASS)) {
-            el.classList.add('js-show-hide__target');
+            el.classList.add(SHOW_HIDE_TARGET_CLASS);
           }
         });
         addEventHandler(el);

templates/table/layout-filter-default.hamlet

@@ -1,8 +1,9 @@
 $newline never
-<section>
+<div .table-filter>
-  <form .table-filter-form method=GET action=#{filterAction} enctype=#{filterEnctype}>
+  <h3 .js-show-hide__toggle data-sh-index='table-filter'>Filter
-    ^{filterWgdt}
+  <div>
-    <button type=submit data-autosubmit>
+    <form .table-filter-form method=GET action=#{filterAction} enctype=#{filterEnctype}>
-      ^{btnLabel BtnSubmit}
+      ^{filterWgdt}
-<section>
+      <button type=submit data-autosubmit>
-  ^{scrolltable}
+        ^{btnLabel BtnSubmit}
+^{scrolltable}

templates/table/layout-filter-default.lucius

@@ -0,0 +1,4 @@
+.table-filter {
+  border-bottom: 1px solid #d3d3d3;
+  margin-bottom: 13px;
+}

templates/widgets/fields/bool.hamlet

@@ -3,7 +3,7 @@ $newline never
   $if not isReq
     <div .radio>
       <input id=#{theId}-none *{attrs} type=radio name=#{name} value=none checked>
-      <label for=#{theId}-none>_{MsgSelectNone}
+      <label for=#{theId}-none>_{MsgCourseFilterNone}
 
   <div .radio>
     <input id=#{theId}-yes *{attrs} type=radio name=#{name} value=yes :showVal id val:checked>