Improve usability and appearance on medium and small

devices like tablets and smartphones.

Signed-off-by: Roberto Rosario <roberto.rosario.gonzalez@gmail.com>

docs/releases/2.5.rst

@@ -85,6 +85,8 @@ Other Changes
   loads. This change avoids "jumping" effect when loading many thumbnails.
 - Increase lazy load thresholds. More thumbnails and document pages
   will be loaded and visible by default when a view loads.
+- Improve usability and appearance on medium and small devices like 
+  tablets and smartphones.
 
 Removals
 --------

mayan/apps/appearance/static/appearance/css/base.css

@@ -180,3 +180,55 @@ a i {
     padding-left: 10px;
     padding-right: 20px;
 }
+
+
+/* Make facet list group horizontal on small or smaller */
+@media (max-width: 767px) {
+    ul.list-group:after {
+      clear: both;
+      display: block;
+      content: "";
+    }
+
+    .list-group-item {
+        float: left;
+    }
+}
+
+/* Collapse navigation on medium or smaller */
+@media (max-width: 991px) {
+  .navbar-header {
+      float: none;
+  }
+  .navbar-left,.navbar-right {
+      float: none !important;
+  }
+  .navbar-toggle {
+      display: block;
+  }
+  .navbar-collapse {
+      border-top: 1px solid transparent;
+      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
+  }
+  .navbar-fixed-top {
+      top: 0;
+      border-width: 0 0 1px;
+  }
+  .navbar-collapse.collapse {
+      display: none!important;
+  }
+  .navbar-nav {
+      float: none!important;
+      margin-top: 7.5px;
+  }
+  .navbar-nav>li {
+      float: none;
+  }
+  .navbar-nav>li>a {
+      padding-top: 10px;
+      padding-bottom: 10px;
+  }
+  .collapse.in{
+      display:block !important;
+  }
+}

mayan/apps/appearance/templates/appearance/base.html

@@ -96,7 +96,7 @@
 
                 <div class="row">
                     {% if links or form_navigation_links %}
-                        <div class="col-xs-8 col-sm-8 col-md-10 col-lg-10">
+                        <div class="col-xs-12 col-sm-9 col-md-10 col-lg-10">
                     {% else %}
                         <div class="col-xs-12">
                     {% endif %}
@@ -105,7 +105,7 @@
                     </div>
 
                     {% if links or form_navigation_links %}
-                        <div class="col-xs-4 col-sm-2 col-md-2 col-lg-2">
+                        <div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">
                     {% endif %}
 
                     {% if links %}