improve a11y in room-search, closes #1024

Closes #1024

Merge request studip/studip!649

10 files changed, 194 insertions, 338 deletions

diff --git a/resources/assets/javascripts/bootstrap/resources.js b/resources/assets/javascripts/bootstrap/resources.js
index c5370df..96c0547 100644
--- a/resources/assets/javascripts/bootstrap/resources.js
+++ b/resources/assets/javascripts/bootstrap/resources.js
@@ -491,20 +491,17 @@ STUDIP.ready(function () {
         $("#clipboard-group-container").find('.widget-links').removeClass('invisible');
     }
 
-    $('.special-item-switch').each(function () {
-        if ($(this).prop('checked') == false) {
-            $(this).next('label').children(':not(span)').hide();
-        }
-    });
-
     jQuery(document).on(
-        'click',
+        'change',
         '.special-item-switch',
         function () {
-            $(this).next('label').children(':not(span)').toggle();
+            let checked = $(this).prop('checked');
+            jQuery(this).parent().next('.special-item-content').toggle(checked);
         }
     );
 
+    jQuery('.special-item-switch').trigger('change');
+
     jQuery(document).on(
         'change',
         'select[name="special__time_range_semester_id"]',
diff --git a/resources/assets/javascripts/lib/resources.js b/resources/assets/javascripts/lib/resources.js
index 57965ce..78b913b 100644
--- a/resources/assets/javascripts/lib/resources.js
+++ b/resources/assets/javascripts/lib/resources.js
@@ -227,13 +227,13 @@ class Resources
         let option_type = jQuery(selected_option).data('type');
         let option_select_options = jQuery(selected_option).data('select_options').split(';;');
         let option_range_search = jQuery(selected_option).data('range-search');
-        let template = undefined;
+        let template;
 
         if (option_type === 'bool') {
             template = jQuery(select_node).parent().parent().find(
                 '.criteria-list .template[data-template-type="'
-                    + option_type
-                    + '"]'
+                + option_type
+                + '"]'
             )[0];
         } else if (option_type === 'select') {
             template = jQuery(select_node).parent().parent().find(
diff --git a/resources/assets/stylesheets/scss/resources.scss b/resources/assets/stylesheets/scss/resources.scss
index 11eec3d..c7e5d4b 100644
--- a/resources/assets/stylesheets/scss/resources.scss
+++ b/resources/assets/stylesheets/scss/resources.scss
@@ -159,15 +159,7 @@ ul.resource-tree {
         li {
             margin-bottom: 0.5em;
 
-            img.remove-icon {
-                margin-right: 5px;
-            }
-
-            .special-item-switch {
-                vertical-align: text-bottom;
-            }
-
-            & > label {
+            > label {
                 input[type=text],
                 input[type=number],
                 input[type=date],
@@ -175,10 +167,6 @@ ul.resource-tree {
                     width: calc(100% - 2em);
                     height: 30px;
 
-                    &.has-date-picker {
-                        width: calc(100% - 2em - 84px);
-                    }
-
                     &[type=number], &[data-time=yes] {
                         width: 4em;
                     }
@@ -196,28 +184,21 @@ ul.resource-tree {
                     }
                 }
             }
-        }
-    }
-}
-
-.room-search-widget_criteria-list {
-    list-style-type: none;
-    padding-left: 0.5em;
-
-    .item {
-        margin-bottom: 0.75em;
 
-        > label {
-            display: inline-block;
-            width: calc(100% - 2em);
-        }
+            input[type="number"] {
+                max-width: 5em;
+            }
 
-        > label.range-search-label {
-            > .range-input-container {
-                margin-left: 1em;
+            .range-input-container {
+                input {
+                    &.hasDatePicker {
+                        width: 70%;
+                    }
 
-                > input[type="number"] {
-                    max-width: 5em;
+                    &.hasTimepicker {
+                        width: 20%;
+                        margin: 5px 0;
+                    }
                 }
             }
         }
@@ -423,6 +404,7 @@ form#resolve-request, form#decline-request {
                 margin-bottom: 5px;
             }
         }
+
         dt {
             grid-column: 1;
         }
@@ -451,6 +433,7 @@ form#resolve-request, form#decline-request {
                     max-height: 250px;
                 }
             }
+
             article.assign-dates, div[data-dialog-button] {
                 header {
                     margin: 0;
@@ -464,6 +447,7 @@ form#resolve-request, form#decline-request {
                             }
                         }
                     }
+
                     &.default {
                         > thead {
                             > tr {
@@ -474,6 +458,7 @@ form#resolve-request, form#decline-request {
                                         min-width: 180px;
                                         left: 0;
                                     }
+
                                     position: sticky;
                                     top: 0;
                                     z-index: 1;
@@ -483,6 +468,7 @@ form#resolve-request, form#decline-request {
                                 }
                             }
                         }
+
                         > tbody {
                             > tr {
                                 > td {
@@ -515,6 +501,7 @@ form#resolve-request, form#decline-request {
                 &.left-part {
                     width: 50%;
                 }
+
                 &.right-part {
                     width: 40%;
                     padding-left: 1em;
diff --git a/templates/sidebar/room-search-criteria-available-range.php b/templates/sidebar/room-search-criteria-available-range.php
index aeba823..a84cba5 100644
--- a/templates/sidebar/room-search-criteria-available-range.php
+++ b/templates/sidebar/room-search-criteria-available-range.php
@@ -38,149 +38,80 @@
  */
 ?>
 <li class="item">
-    <input type="checkbox" class="special-item-switch" value="1"
-           title="<?= _('Kriterium ausgewählt'); ?>" id="cb_<?= htmlReady($criteria['name']); ?>"
-           name="<?= htmlReady($criteria['name'] . '_enabled')?>"
-           <?= $criteria['enabled'] ? 'checked="checked"' : ''?>>
-    <label class="undecorated" for="cb_<?= htmlReady($criteria['name']) ?>">
-        <span><?= htmlReady($criteria['title']) ?></span>
+    <label class="undecorated">
+        <input type="checkbox" class="special-item-switch" value="1"
+               name="<?= htmlReady($criteria['name'] . '_enabled') ?>"
+            <?= $criteria['enabled'] ? 'checked' : '' ?>>
+        <?= htmlReady($criteria['title']) ?>
+    </label>
+
+    <div class="special-item-content">
         <? if ($criteria['semester']): ?>
-            <div><?= _('Semester') ?></div>
-            <select name="<?= htmlReady($criteria['name'] . '_semester_id') ?>">
-                <option value=""><?= _('Bitte wählen') ?></option>
-                <? if (is_array($semesters)) : ?>
-                    <? foreach ($semesters as $semester): ?>
-                        <option value="<?= htmlReady($semester->id) ?>"
+            <label>
+                <?= _('Semester') ?>
+                <select name="<?= htmlReady($criteria['name'] . '_semester_id') ?>">
+                    <option value=""><?= _('Bitte wählen') ?></option>
+                    <? if (is_array($semesters)) : ?>
+                        <? foreach ($semesters as $semester): ?>
+                            <option value="<?= htmlReady($semester->id) ?>"
                                 <?= ($semester->id == $criteria['semester']['value']
-                                   ? 'selected="selected"'
-                                   : '') ?>
-                                data-begin="<?= htmlReady($semester->vorles_beginn) ?>"
-                                data-end="<?= htmlReady($semester->vorles_ende) ?>">
-                            <?= htmlReady($semester->name) ?>
-                        </option>
-                    <? endforeach ?>
-                <? endif ?>
-            </select>
+                                    ? 'selected="selected"'
+                                    : '') ?>
+                                    data-begin="<?= htmlReady($semester->vorles_beginn) ?>"
+                                    data-end="<?= htmlReady($semester->vorles_ende) ?>">
+                                <?= htmlReady($semester->name) ?>
+                            </option>
+                        <? endforeach ?>
+                    <? endif ?>
+                </select>
+            </label>
         <? endif ?>
         <? if ($criteria['range']): ?>
-            <div><?= _('Zeitbereich') ?></div>
             <div class="range-input-container">
-                <input type="text"
+                <input type="text" aria-label="<?= _('Startdatum') ?>" title="<?= _('Startdatum') ?>"
                        id="<?= htmlReady($criteria['name']) ?>_begin_date"
                        name="<?= htmlReady($criteria['name']) ?>_begin_date"
                        value="<?= htmlReady($criteria['range']['begin']->format('d.m.Y')) ?>"
-                       class="has-date-picker">
-                <input type="text" data-time="yes"
-                       data-time-picker='{"<":"#<?=htmlReady($criteria['name']) ?>_end_time"}'
+                       class="hasDatePicker" data-date-picker>
+                <input type="text" data-time="yes" aria-label="<?= _('Startzeitpunkt') ?>" title="<?= _('Startzeitpunkt') ?>"
+                       data-time-picker='{"<":"#<?= htmlReady($criteria['name']) ?>_end_time"}'
                        id="<?= htmlReady($criteria['name']) ?>_begin_time"
                        name="<?= htmlReady($criteria['name']) ?>_begin_time"
                        value="<?= htmlReady($criteria['range']['begin']->format('H:i')) ?>"
-                       class="has-time-picker">
-                <?= _('Uhr') ?>
-                <input type="text"
-                       data-date-picker='{">=":"#<?=htmlReady($criteria['name']) ?>_begin_date"}'
+                       class="hasTimepicker">
+            </div>
+            <div class="range-input-container">
+                <input type="text" aria-label="<?= _('Enddatum') ?>" title="<?= _('Enddatum') ?>"
+                       data-date-picker='{">=":"#<?= htmlReady($criteria['name']) ?>_begin_date"}'
                        id="<?= htmlReady($criteria['name']) ?>_end_date"
                        name="<?= htmlReady($criteria['name']) ?>_end_date"
                        value="<?= htmlReady($criteria['range']['end']->format('d.m.Y')) ?>"
-                       class="has-date-picker">
-                <input type="text" data-time="yes"
-                       data-time-picker='{">":"#<?=htmlReady($criteria['name']) ?>_begin_time"}'
+                       class="hasDatePicker">
+                <input type="text" data-time="yes" aria-label="<?= _('Endzeitpunkt') ?>" title="<?= _('Endzeitpunkt') ?>"
+                       data-time-picker='{">":"#<?= htmlReady($criteria['name']) ?>_begin_time"}'
                        id="<?= htmlReady($criteria['name']) ?>_end_time"
                        name="<?= htmlReady($criteria['name']) ?>_end_time"
                        value="<?= htmlReady($criteria['range']['end']->format('H:i')) ?>"
-                       class="has-time-picker">
-                    <?= _('Uhr') ?>
+                       class="hasTimepicker">
             </div>
         <? endif ?>
         <? if ($criteria['day_of_week']): ?>
-            <div><?= _('Wochentag') ?></div>
+        <label>
+            <?= _('Wochentag') ?>
             <select name="<?= htmlReady($criteria['name'] . '_day_of_week') ?>">
                 <? if (is_array($criteria['day_of_week']['options'])): ?>
                     <option value=""><?= _('Bitte wählen') ?></option>
                     <? foreach ($criteria['day_of_week']['options'] as $value => $title): ?>
                         <option value="<?= htmlReady($value) ?>"
-                                <?= ($value === (int)$criteria['day_of_week']['value']
-                                   ? 'selected="selected"'
-                                   : '') ?>>
+                            <?= ($value === (int)$criteria['day_of_week']['value']
+                                ? 'selected="selected"'
+                                : '') ?>>
                             <?= htmlReady($title) ?>
                         </option>
                     <? endforeach ?>
                 <? endif ?>
             </select>
-        <? endif ?>
-    </label>
+            <? endif ?>
+        </label>
+    </div>
 </li>
-<script type="text/javascript">
-jQuery(function ($) {
-    $("#<?= htmlReady($criteria['name']) ?>_begin_date").on('change', function(){
-        var selected_beginn_val = $(this).val().split('.');
-        var selected_end_val = $("#<?= htmlReady($criteria['name']) ?>_end_date").val().split('.');
-        if (selected_beginn_val.length < 3) {
-            $(this).val(new Date().toLocaleDateString('de-DE'));
-        } else if (selected_beginn_val[0] > 31 || selected_beginn_val[1] > 12 || selected_beginn_val[2] < 1970) {
-            var today = new Date();
-            if (selected_beginn_val[2] < 1970) {
-                $(this).val(selected_beginn_val[0] + '.' + selected_beginn_val[1] + '.' + today.getFullYear());
-            } else if (selected_beginn_val[1] > 12) {
-                $(this).val(selected_beginn_val[0] + '.' + (today.getMonth() + 1) + '.' + selected_beginn_val[2]);
-            } else {
-                $(this).val(today.getDate() + '.' + selected_beginn_val[1] + '.' + selected_beginn_val[2]);
-            }
-        }
-        if (selected_beginn_val.length == 3 && selected_end_val.length == 3) {
-            var selected_beginn_date = new Date(selected_beginn_val[2] + '-' + selected_beginn_val[1] + '-' +selected_beginn_val[0]);
-            var selected_end_date = new Date(selected_end_val[2] + '-' + selected_end_val[1] + '-' +selected_end_val[0]);
-            if (selected_beginn_date > selected_end_date) {
-                $("#<?= htmlReady($criteria['name']) ?>_end_date").val($(this).val());
-            }
-        }
-    });
-
-    $("#<?= htmlReady($criteria['name']) ?>_end_date").on('change', function(){
-        var selected_beginn_val = $(this).val().split('.');
-        if (selected_beginn_val.length < 3) {
-            $(this).val(new Date().toLocaleDateString('de-DE'));
-        } else if (selected_beginn_val[0] > 31 || selected_beginn_val[1] > 12 || selected_beginn_val[2] < 1970) {
-            var today = new Date();
-            if (selected_beginn_val[2] < 1970) {
-                $(this).val(selected_beginn_val[0] + '.' + selected_beginn_val[1] + '.' + today.getFullYear());
-            } else if (selected_beginn_val[1] > 12) {
-                $(this).val(selected_beginn_val[0] + '.' + (today.getMonth() + 1) + '.' + selected_beginn_val[2]);
-            } else {
-                $(this).val(today.getDate() + '.' + selected_beginn_val[1] + '.' + selected_beginn_val[2]);
-            }
-        }
-        $("#<?= htmlReady($criteria['name']) ?>_begin_date").trigger('change');
-    });
-
-    $("#<?= htmlReady($criteria['name']) ?>_begin_time").on('change', function(){
-        var selected_beginn_val = $(this).val().split(':');
-        var selected_end_val = $("#<?= htmlReady($criteria['name']) ?>_end_time").val().split(':');
-        if (selected_beginn_val.length < 2) {
-            if (selected_beginn_val[0] == '') {
-                $(this).val('00');
-            }
-            $(this).val($(this).val() + ':00');
-        }
-        if (selected_beginn_val.length == 2 && selected_end_val.length == 2) {
-            var selected_beginn_date = new Date('1970-01-01T' + selected_beginn_val[0] + ':' + selected_beginn_val[1] + ':00+00:00');
-            var selected_end_date = new Date('1970-01-01T' + selected_end_val[0] + ':' + selected_end_val[1] + ':00+00:00');
-            if (selected_beginn_date > selected_end_date) {
-                $("#<?= htmlReady($criteria['name']) ?>_end_time").val(selected_beginn_val[0] + ':' + (parseInt(selected_beginn_val[1]) + 30));
-            }
-        }
-    });
-
-    $("#<?= htmlReady($criteria['name']) ?>_end_time").on('change', function(){
-        var selected_end_val = $(this).val().split(':');
-        if (selected_end_val.length < 2) {
-            if (selected_end_val[0] == '') {
-                $(this).val('00');
-            }
-            $(this).val($(this).val() + ':00');
-        }
-        $("#<?= htmlReady($criteria['name']) ?>_begin_time").trigger('change');
-    });
-
-});
-</script>
diff --git a/templates/sidebar/room-search-criteria-seats.php b/templates/sidebar/room-search-criteria-seats.php
new file mode 100644
index 0000000..a947bb1
--- /dev/null
+++ b/templates/sidebar/room-search-criteria-seats.php
@@ -0,0 +1,37 @@
+<?php
+/**
+ * Template documentation:
+ *
+ * @param Array $criteria: A search criteria with the following structure:
+ *     [
+ *         'name' => The criteria's internal name.
+ *         'title' => The title of the criteria.
+ *         'enabled' => Whether this criteria is enabled (true) or not.
+ *         'value' => The value of the search criteria.
+ *             For range search criteria the values are split by ':'.
+ *     ]
+ */
+?>
+<li class="item">
+    <label class="undecorated">
+        <input type="checkbox" class="special-item-switch" value="1"
+               title="<?= _('Kriterium ausgewählt'); ?>"
+               name="<?= htmlReady($criteria['name'] . '_enabled')?>"
+               <?= $criteria['enabled'] ? 'checked' : ''?>>
+        <?= htmlReady($criteria['title']) ?>
+    </label>
+    <div class="hgroup special-item-content">
+        <label class="undecorated">
+            <?= _('von') ?>
+            <input type="number"
+                   name="<?= htmlReady($criteria['name'])?>_min"
+                   value="<?= empty($criteria['value'][0])?'':intval($criteria['value'][0])?>">
+        </label>
+        <label class="undecorated">
+            <?= _('bis') ?>
+            <input type="number"
+                   name="<?= htmlReady($criteria['name'])?>_max"
+                   value="<?= empty($criteria['value'][1])?'':intval($criteria['value'][1])?>">
+        </label>
+    </div>
+</li>
diff --git a/templates/sidebar/room-search-criteria-templates.php b/templates/sidebar/room-search-criteria-templates.php
index d75ccbd..d084fa4 100644
--- a/templates/sidebar/room-search-criteria-templates.php
+++ b/templates/sidebar/room-search-criteria-templates.php
@@ -1,7 +1,8 @@
-<li class="template invisible"
-    data-template-type="bool">
-    <?= Icon::create('trash')->asImg(
+<li class="template invisible" data-template-type="bool">
+    <?= Icon::create('trash')->asInput(
         [
+            'title' => _('Kriterium entfernen'),
+            'aria-label' => _('Kriterium entfernen'),
             'class' => 'text-bottom remove-icon'
         ]
     ) ?>
@@ -14,46 +15,43 @@
         <span></span>
     </label>
 </li>
-<li class="template invisible"
-    data-template-type="range">
+<li class="template invisible" data-template-type="range">
     <?= Icon::create('trash')->asImg(
         [
-            'class' => 'text-bottom remove-icon'
+            'class' => 'text-bottom remove-icon',
+            'aria-label' => _('Kriterium entfernen'),
+            'title' => _('Kriterium entfernen'),
         ]
     ) ?>
-    <label class="range-search-label undecorated">
+    <label class="range-search-label undecorated"><span></span></label>
         <input type="hidden">
-        <span></span>
-        <div class="range-input-container">
-                    <?= _('von') ?>
-            <input type="number" value="10"
-                   class="room-search-widget_criteria-list_input">
-                    <?= _('bis') ?>
-            <input type="number" value="100"
-                   class="room-search-widget_criteria-list_input">
+        <div class="range-input-container hgroup">
+            <label>
+                <?= _('von') ?>
+                <input type="number" value="10" class="room-search-widget_criteria-list_input">
+            </label>
+            <label>
+                <?= _('bis') ?>
+                <input type="number" value="100" class="room-search-widget_criteria-list_input">
+            </label>
         </div>
     </label>
 </li>
-<li class="template invisible"
-    data-template-type="num">
+<li class="template invisible" data-template-type="num">
     <?= Icon::create('trash')->asImg(
         [
-            'class' => 'text-bottom remove-icon'
+            'class' => 'text-bottom remove-icon',
+            'aria-label' => _('Kriterium entfernen'),
+            'title' => _('Kriterium entfernen'),
         ]
     ) ?>
     <label class="undecorated">
         <span></span>
-        <input type="number"
-               class="room-search-widget_criteria-list_input">
+        <input type="number" class="room-search-widget_criteria-list_input">
     </label>
 </li>
-<li class="template invisible"
-    data-template-type="select">
-    <?= Icon::create('trash')->asImg(
-        [
-            'class' => 'text-bottom remove-icon'
-        ]
-    ) ?>
+<li class="template invisible" data-template-type="select">
+    <?= Icon::create('trash')->asImg(['class' => 'text-bottom remove-icon']) ?>
     <label class="undecorated">
         <span></span>
         <select class="room-search-widget_criteria-list_input">
@@ -61,52 +59,16 @@
     </label>
 </li>
 <li class="template invisible"
-    data-template-type="date">
-    <?= Icon::create('trash')->asImg(
-        [
-            'class' => 'text-bottom remove-icon'
-        ]
-    ) ?>
-    <label class="undecorated">
-        <span></span>
-        <div class="range-input-container">
-            <input type="date">
-            <input type="text" data-time="yes">
-            <?= _('Uhr') ?>
-            <input type="text" data-time="yes">
-            <?= _('Uhr') ?>
-        </div>
-    </label>
-</li>
-<li class="template invisible"
-    data-template-type="date_range">
-    <?= Icon::create('trash')->asImg(
-        [
-            'class' => 'text-bottom remove-icon'
-        ]
-    ) ?>
-    <label class="undecorated">
-        <span></span>
-        <div class="range-input-container">
-            <input type="date">
-            <input type="date">
-            <input type="text" data-time="yes">
-            <?= _('Uhr') ?>
-            <input type="text" data-time="yes">
-            <?= _('Uhr') ?>
-        </div>
-    </label>
-</li>
-<li class="template invisible"
     data-template-type="other">
     <?= Icon::create('trash')->asImg(
         [
-            'class' => 'text-bottom remove-icon'
+            'class' => 'text-bottom remove-icon',
+            'aria-label' => _('Kriterium entfernen'),
+            'title' => _('Kriterium entfernen'),
         ]
     ) ?>
     <label class="undecorated">
         <span></span>
-        <input type="text"
-               class="room-search-widget_criteria-list_input">
+        <input type="text" class="room-search-widget_criteria-list_input">
     </label>
 </li>
diff --git a/templates/sidebar/room-search-criteria.php b/templates/sidebar/room-search-criteria.php
index 96c24d8..0f869ad 100644
--- a/templates/sidebar/room-search-criteria.php
+++ b/templates/sidebar/room-search-criteria.php
@@ -9,8 +9,6 @@
  *                   'bool', 'num', 'select', 'date' or 'text'
  *         'range_search' => Whether a range search shall be used or not.
  *             This is only evaluated for the types 'date' and 'num'
- *         'switch' => Whether a checkbox shall be added to the criteria
- *             that enables/disables the input fields of the criteria.
  *         'value' => The value of the search criteria.
  *             For range search criteria the values are split by ':'.
  *     ]
@@ -21,55 +19,49 @@
 ?>
 <li class="item">
     <? if ($removable): ?>
-        <?= Icon::create('trash', 'clickable')->asImg(
-            '16px',
+        <?= Icon::create('trash')->asInput(
             [
+                'title' => _('Kriterium entfernen'),
+                'aria-label' => _('Kriterium entfernen'),
                 'class' => 'text-bottom remove-icon'
             ]
         ) ?>
     <? endif ?>
-    <? if ($criteria['switch']): ?>
-        <input type="checkbox" class="special-item-switch" value="1"
-               title="<?= _('Kriterium ausgewählt'); ?>" id="cb_<?= htmlReady($criteria['name']); ?>"
-               name="<?= htmlReady($criteria['name'] . '_enabled')?>"
-               <?= $criteria['enabled'] ? 'checked="checked"' : ''?>>
-    <? endif ?>
-    <? if ($criteria['type'] == 'bool'): ?>
-    <input type="hidden" name="options_<?= htmlReady($criteria['name']) ?>" value="1">
-        <label class="undecorated" for="cb_<?= htmlReady($criteria['name']) ?>">
+    <? if ($criteria['type'] === 'bool'): ?>
+        <input type="hidden" name="options_<?= htmlReady($criteria['name']) ?>" value="1">
+        <label class="undecorated">
             <input type="checkbox"
                    value="1"
                     <?= Request::get($criteria['name']) ? 'checked': ''?>
                    name="<?= htmlReady($criteria['name'])?>">
             <span><?= htmlReady($criteria['title']) ?></span>
         </label>
-    <? elseif ($criteria['type'] == 'num'): ?>
+    <? elseif ($criteria['type'] === 'num'): ?>
         <? if ($criteria['range_search']): ?>
-            <label class="range-search-label undecorated" for="cb_<?= htmlReady($criteria['name']); ?>">
-                <input type="hidden" name="<?= htmlReady($criteria['name']) ?>">
-                <span><?= htmlReady($criteria['title']) ?></span>
-                <div class="range-input-container">
+            <label class="undecorated"><?= htmlReady($criteria['title']) ?></label>
+            <div class="hgroup">
+                <label class="undecorated">
                     <?= _('von') ?>
                     <input type="number"
                            name="<?= htmlReady($criteria['name'])?>_min"
                            value="<?= empty($criteria['value'][0])?'':intval($criteria['value'][0])?>">
+                </label>
+                <label class="undecorated">
                     <?= _('bis') ?>
                     <input type="number"
                            name="<?= htmlReady($criteria['name'])?>_max"
                            value="<?= empty($criteria['value'][1])?'':intval($criteria['value'][1])?>">
-                </div>
-            </label>
+                </label>
+            </div>
         <? else: ?>
-            <label class="undecorated" for="cb_<?= htmlReady($criteria['name']); ?>">
-                <span><?= htmlReady($criteria['title']) ?></span>
-                <input type="number"
-                       name="<?= htmlReady($criteria['name'])?>"
-                       value="<?= intval($criteria['value'])?>">
+            <label class="undecorated">
+                <?= htmlReady($criteria['title']) ?>
+                <input type="number" name="<?= htmlReady($criteria['name'])?>" value="<?= (int)$criteria['value']?>">
             </label>
         <? endif ?>
-    <? elseif ($criteria['type'] == 'select'): ?>
-        <label class="undecorated" for="cb_<?= htmlReady($criteria['name']); ?>">
-            <span><?= htmlReady($criteria['title']) ?></span>
+    <? elseif ($criteria['type'] === 'select'): ?>
+        <label class="undecorated">
+            <?= htmlReady($criteria['title']) ?>
             <select name="<?= htmlReady($criteria['name']) ?>">
                 <? if (is_array($criteria['options'])): ?>
                     <? foreach ($criteria['options'] as $value => $title): ?>
@@ -83,90 +75,44 @@
                 <? endif ?>
             </select>
         </label>
-    <? elseif ($criteria['type'] == 'select2'): ?>
-        <label class="undecorated" for="cb_<?= htmlReady($criteria['name']); ?>">
-            <span><?= htmlReady($criteria['title']) ?></span>
-            <div class="wrapper_wrapper">
-                <select name="<?= htmlReady($criteria['name']) ?>"
-                        class="nested-select">
-                    <? if (is_array($criteria['options'])): ?>
-                        <? foreach ($criteria['options'] as $option): ?>
-                            <option value="<?= htmlReady($option['id']) ?>"
-                                    <?= ($option['id'] == $criteria['value']
+    <? elseif ($criteria['type'] === 'select2'): ?>
+        <label class="undecorated">
+            <?= htmlReady($criteria['title']) ?>
+            <select name="<?= htmlReady($criteria['name']) ?>"
+                    class="nested-select">
+                <? if (is_array($criteria['options'])): ?>
+                    <? foreach ($criteria['options'] as $option): ?>
+                        <option value="<?= htmlReady($option['id']) ?>"
+                                <?= ($option['id'] == $criteria['value']
+                                ? 'selected="selected"'
+                                : '') ?>>
+                            <?= htmlReady($option['name']) ?>
+                        </option>
+                        <? foreach ($option['sub_options'] as $sub_option): ?>
+                            <option value="<?= htmlReady($sub_option['id']) ?>"
+                                    class="nested-item nested-level-1"
+                                    <?= ($sub_option['id'] == $criteria['value']
                                     ? 'selected="selected"'
                                     : '') ?>>
-                                <?= htmlReady($option['name']) ?>
+                                <?= htmlReady($sub_option['name']) ?>
                             </option>
-                            <? foreach ($option['sub_options'] as $sub_option): ?>
-                                <option value="<?= htmlReady($sub_option['id']) ?>"
-                                        class="nested-item nested-level-1"
-                                        <?= ($sub_option['id'] == $criteria['value']
-                                        ? 'selected="selected"'
-                                        : '') ?>>
-                                    <?= htmlReady($sub_option['name']) ?>
-                                </option>
-                            <? endforeach ?>
                         <? endforeach ?>
-                    <? endif ?>
-                </select>
-            </div>
-        </label>
-    <? elseif ($criteria['type'] == 'date'): ?>
-        <label class="undecorated" for="cb_<?= htmlReady($criteria['name']); ?>">
-            <span><?= htmlReady($criteria['title']) ?></span>
-            <? if ($criteria['range_search']): ?>
-                <div class="range-input-container">
-                    <input type="text"
-                           name="<?= htmlReady($criteria['name']) ?>_begin_date"
-                           value="<?= htmlReady($criteria['value']['begin']->format('d.m.Y')) ?>"
-                           class="has-date-picker">
-                    <input type="text" data-time="yes"
-                           name="<?= htmlReady($criteria['name']) ?>_begin_time"
-                           value="<?= htmlReady($criteria['value']['begin']->format('H:i')) ?>"
-                           class="has-time-picker">
-                    <?= _('Uhr') ?>
-                    <input type="text"
-                           name="<?= htmlReady($criteria['name']) ?>_end_date"
-                           value="<?= htmlReady($criteria['value']['end']->format('d.m.Y')) ?>"
-                           class="has-date-picker">
-                    <input type="text" data-time="yes"
-                           name="<?= htmlReady($criteria['name']) ?>_end_time"
-                           value="<?= htmlReady($criteria['value']['end']->format('H:i')) ?>"
-                           class="has-time-picker">
-                    <?= _('Uhr') ?>
-                </div>
-            <? else: ?>
-                <div class="range-input-container">
-                    <input type="text"
-                           name="<?= htmlReady($criteria['name']) ?>_date"
-                           value="<?= htmlReady($criteria['value']->format('d.m.Y')) ?>"
-                           class="has-date-picker">
-                    <input type="text" data-time="yes"
-                           name="<?= htmlReady($criteria['name']) ?>_time"
-                           value="<?= htmlReady($criteria['value']->format('H:i')) ?>"
-                           class="has-time-picker">
-                    <?= _('Uhr') ?>
-                </div>
-            <? endif ?>
+                    <? endforeach ?>
+                <? endif ?>
+            </select>
         </label>
-    <? elseif ($criteria['type'] == 'hidden'): ?>
-        <input type="hidden"
-            name="<?= htmlReady($criteria['name'])?>"
-            value="<?= htmlReady(strval($criteria['value']))?>">
+    <? elseif ($criteria['type'] === 'hidden'): ?>
+        <input type="hidden" name="<?= htmlReady($criteria['name'])?>" value="<?= htmlReady((string)$criteria['value'])?>">
     <? elseif ($criteria['type'] == 'disabled_text'): ?>
-        <label class="undecorated" for="cb_<?= htmlReady($criteria['name']); ?>">
+        <label class="undecorated">
             <span><?= htmlReady($criteria['title']) ?></span>
-            <input type="text"
-                name="<?= htmlReady($criteria['name'])?>"
-                value="<?= htmlReady(strval($criteria['value']))?>"
-                disabled="disabled">
+            <input type="text" disabled="disabled"
+                name="<?= htmlReady($criteria['name'])?>" value="<?= htmlReady((string)$criteria['value'])?>">
         </label>
     <? else: ?>
-        <label class="undecorated" for="cb_<?= htmlReady($criteria['name']); ?>">
-            <span><?= htmlReady($criteria['title']) ?></span>
-            <input type="text"
-                   name="<?= htmlReady($criteria['name'])?>"
-                   value="<?= htmlReady(strval($criteria['value']))?>">
+        <label class="undecorated">
+            <?= htmlReady($criteria['title']) ?>
+            <input type="text" name="<?= htmlReady($criteria['name'])?>" value="<?= htmlReady((string)$criteria['value'])?>">
         </label>
     <? endif ?>
 </li>
diff --git a/templates/sidebar/room-search-tree-widget.php b/templates/sidebar/room-search-tree-widget.php
index 39f4aa9..008b1bc 100644
--- a/templates/sidebar/room-search-tree-widget.php
+++ b/templates/sidebar/room-search-tree-widget.php
@@ -8,8 +8,7 @@
         <li <?=  ((!$resource_path && $resource->level > $max_open_depth) || $hide) ? 'style="display: none;"' : ''; ?> >
             <? if (count($resource->children)): ?>
 
-                <?= Icon::create('arr_1right', 'clickable')->asImg(
-                    '16px',
+                <?= Icon::create('arr_1right')->asImg(
                     [
                         'class' => implode(
                             ' ',
@@ -39,8 +38,7 @@
 
             <? endif ?>
             <span id="<?= $search_object; ?>" style="cursor: pointer;">
-                <?= $resource->getIcon('clickable')->asImg(
-                    '16px',
+                <?= $resource->getIcon()->asImg(
                     [
                         'class' => 'text-bottom'
                     ]
diff --git a/templates/sidebar/room-search-widget.php b/templates/sidebar/room-search-widget.php
index d6a323c..6a0fb91 100644
--- a/templates/sidebar/room-search-widget.php
+++ b/templates/sidebar/room-search-widget.php
@@ -60,14 +60,12 @@
             ) ?>
         <? endif; ?>
         <?= $this->render_partial(
-            'sidebar/room-search-criteria.php',
+            'sidebar/room-search-criteria-seats.php',
             [
-                'criteria' => (
+                'criteria' =>
                     $selected_criteria['special__seats']
                     ? $selected_criteria['special__seats']
                     : $criteria['special__seats']
-                    ),
-                'removable' => false
             ]
         ) ?>
         <?= $this->render_partial(
diff --git a/templates/sidebar/time-range-filter.php b/templates/sidebar/time-range-filter.php
index 1e343b0..793381e 100644
--- a/templates/sidebar/time-range-filter.php
+++ b/templates/sidebar/time-range-filter.php
@@ -3,12 +3,12 @@
     <label>
         <?= _('Dateien neuer als') ?>:
         <input type="text" name="begin" value="<?= htmlReady($begin) ?>"
-               class="has-date-picker">
+               class="hasDatePicker">
     </label>
     <label>
         <?= _('Dateien älter als') ?>:
         <input type="text" name="end" value="<?= htmlReady($end) ?>"
-               class="has-date-picker submit-on-change">
+               class="hasDatePicker submit-on-change">
     </label>
     <? if ($course_options) : ?>
         <label>