11 files changed, 135 insertions, 5 deletions
diff --git a/includes/pages/user_shifts.php b/includes/pages/user_shifts.php
index 81b405b1..f3ffd501 100644
--- a/includes/pages/user_shifts.php
+++ b/includes/pages/user_shifts.php
@@ -332,7 +332,7 @@ function make_select($items, $selected, $name, $title = null, $additionalButtons
             . (in_array($i['id'], $selected) ? ' checked="checked"' : '')
             . ' > ' . $i['name'] . '</label>'
             . (!isset($i['enabled']) || $i['enabled'] ? '' : glyph('lock'))
-            . '</div><br />';
+            . '</div>';
     }
     $html .= '<div id="selection_' . $name . '" class="selection ' . $name . '">' . "\n";
     $html .= implode("\n", $htmlItems);
diff --git a/public/css/theme0.css b/public/css/theme0.css
index b3214c54..1393cd63 100644
--- a/public/css/theme0.css
+++ b/public/css/theme0.css
@@ -6818,6 +6818,9 @@ body {
 .panel-danger .panel-heading a {
   color: #a94442;
 }
+.selection .checkbox {
+  display: block;
+}
 .shift-calendar {
   display: flex;
   flex-direction: row;
@@ -6949,3 +6952,15 @@ body {
     transform: rotate(0deg) translateY(0px);
   }
 }
+@media (max-width: 525px) {
+  .col-xxs-12 {
+    float: none;
+    width: 100%;
+    position: relative;
+    left: 0;
+    right: 0;
+    min-height: 1px;
+    padding-right: 15px;
+    padding-left: 15px;
+  }
+}
diff --git a/public/css/theme1.css b/public/css/theme1.css
index 842ea757..d443d81e 100644
--- a/public/css/theme1.css
+++ b/public/css/theme1.css
@@ -6841,6 +6841,9 @@ body {
 .panel-danger .panel-heading a {
   color: #ffffff;
 }
+.selection .checkbox {
+  display: block;
+}
 .shift-calendar {
   display: flex;
   flex-direction: row;
@@ -6972,6 +6975,18 @@ body {
     transform: rotate(0deg) translateY(0px);
   }
 }
+@media (max-width: 525px) {
+  .col-xxs-12 {
+    float: none;
+    width: 100%;
+    position: relative;
+    left: 0;
+    right: 0;
+    min-height: 1px;
+    padding-right: 15px;
+    padding-left: 15px;
+  }
+}
 .messages .text-danger {
   color: #fff;
 }
diff --git a/public/css/theme2.css b/public/css/theme2.css
index 9a04d8b8..6aba33e1 100644
--- a/public/css/theme2.css
+++ b/public/css/theme2.css
@@ -6818,6 +6818,9 @@ body {
 .panel-danger .panel-heading a {
   color: #694374;
 }
+.selection .checkbox {
+  display: block;
+}
 .shift-calendar {
   display: flex;
   flex-direction: row;
@@ -6949,3 +6952,15 @@ body {
     transform: rotate(0deg) translateY(0px);
   }
 }
+@media (max-width: 525px) {
+  .col-xxs-12 {
+    float: none;
+    width: 100%;
+    position: relative;
+    left: 0;
+    right: 0;
+    min-height: 1px;
+    padding-right: 15px;
+    padding-left: 15px;
+  }
+}
diff --git a/public/css/theme3.css b/public/css/theme3.css
index 99d3eafd..b1509c6f 100644
--- a/public/css/theme3.css
+++ b/public/css/theme3.css
@@ -6827,6 +6827,9 @@ body {
 .panel-danger .panel-heading a {
   color: #da1639;
 }
+.selection .checkbox {
+  display: block;
+}
 .shift-calendar {
   display: flex;
   flex-direction: row;
@@ -6958,3 +6961,15 @@ body {
     transform: rotate(0deg) translateY(0px);
   }
 }
+@media (max-width: 525px) {
+  .col-xxs-12 {
+    float: none;
+    width: 100%;
+    position: relative;
+    left: 0;
+    right: 0;
+    min-height: 1px;
+    padding-right: 15px;
+    padding-left: 15px;
+  }
+}
diff --git a/public/css/theme4.css b/public/css/theme4.css
index cb9f95c5..c68b0238 100644
--- a/public/css/theme4.css
+++ b/public/css/theme4.css
@@ -6841,6 +6841,9 @@ body {
 .panel-danger .panel-heading a {
   color: #ffffff;
 }
+.selection .checkbox {
+  display: block;
+}
 .shift-calendar {
   display: flex;
   flex-direction: row;
@@ -6972,6 +6975,18 @@ body {
     transform: rotate(0deg) translateY(0px);
   }
 }
+@media (max-width: 525px) {
+  .col-xxs-12 {
+    float: none;
+    width: 100%;
+    position: relative;
+    left: 0;
+    right: 0;
+    min-height: 1px;
+    padding-right: 15px;
+    padding-left: 15px;
+  }
+}
 .messages .text-danger {
   color: #fff;
 }
diff --git a/public/css/theme5.css b/public/css/theme5.css
index 0b32c10f..95e9b848 100644
--- a/public/css/theme5.css
+++ b/public/css/theme5.css
@@ -6821,6 +6821,9 @@ body {
 .panel-danger .panel-heading a {
   color: #331400;
 }
+.selection .checkbox {
+  display: block;
+}
 .shift-calendar {
   display: flex;
   flex-direction: row;
@@ -6952,3 +6955,15 @@ body {
     transform: rotate(0deg) translateY(0px);
   }
 }
+@media (max-width: 525px) {
+  .col-xxs-12 {
+    float: none;
+    width: 100%;
+    position: relative;
+    left: 0;
+    right: 0;
+    min-height: 1px;
+    padding-right: 15px;
+    padding-left: 15px;
+  }
+}
diff --git a/public/css/theme6.css b/public/css/theme6.css
index 705ddc28..dff2de34 100644
--- a/public/css/theme6.css
+++ b/public/css/theme6.css
@@ -6845,6 +6845,9 @@ body {
 .panel-danger .panel-heading a {
   color: #ffffff;
 }
+.selection .checkbox {
+  display: block;
+}
 .shift-calendar {
   display: flex;
   flex-direction: row;
@@ -6976,6 +6979,18 @@ body {
     transform: rotate(0deg) translateY(0px);
   }
 }
+@media (max-width: 525px) {
+  .col-xxs-12 {
+    float: none;
+    width: 100%;
+    position: relative;
+    left: 0;
+    right: 0;
+    min-height: 1px;
+    padding-right: 15px;
+    padding-left: 15px;
+  }
+}
 .messages .text-danger {
   color: #fff;
 }
diff --git a/public/index.php b/public/index.php
index adf22e71..adf22e71 100644..100755
--- a/public/index.php
+++ b/public/index.php
diff --git a/templates/user_shifts.html b/templates/user_shifts.html
index e137210c..2fdade29 100644
--- a/templates/user_shifts.html
+++ b/templates/user_shifts.html
@@ -60,13 +60,22 @@
                 </div>
             </div>
         </div>
-        <div class="col-md-2">%room_select%</div>
-        <div class="col-md-2">%type_select%</div>
-        <div class="col-md-2">%filled_select%</div>
+        <div class="col-md-6">
+            <button class="btn btn-info btn-sm" style="margin-top: 20px; margin-bottom:10px" type="button" data-toggle="collapse" 
+              data-target="#collapseRoomSelect" aria-expanded="false"
+              aria-controls="collapseRoomSelect">
+                collapse/show filters
+            </button>
+            <div class="collapse in row" id="collapseRoomSelect">
+                <div class="col-xs-4 col-xxs-12">%room_select%</div>
+                <div class="col-xs-4 col-xxs-12">%type_select%</div>
+                <div class="col-xs-4 col-xxs-12">%filled_select%</div>
+                <div class="col-sm-12"><p>%task_notice%</p></div>
+            </div>
+        </div>
     </div>
     <div class="row">
         <div class="col-md-12">
-            <div><p>%task_notice%</p></div>
             <input class="btn btn-primary" type="submit" style="width:75%; margin-bottom: 20px" value="%filter%">
         </div>
     </div>
diff --git a/themes/base.less b/themes/base.less
index e45b7f85..beddc39d 100644
--- a/themes/base.less
+++ b/themes/base.less
@@ -100,6 +100,10 @@ body {
   color: @panel-danger-text;
 }
 
+.selection .checkbox {
+	display: block;
+}
+
 .shift-calendar {
   display: flex;
   flex-direction: row;
@@ -247,3 +251,15 @@ body {
     transform: rotate(0deg) translateY(0px);
   }
 }
+
+@media (max-width: 525px) {
+  .col-xxs-12 {
+    float: none;
+    width: 100%;
+
+    position: relative; left: 0; right: 0;
+    min-height: 1px;
+    padding-right: 15px;
+    padding-left: 15px;
+  }
+}