Fix main menu on small devices (Fixes #2005)

Use bootstraps navbar-toggle button to bring up a
vertical responsive main menu.
Some additional responsive CSS impmprovements.

openslides/core/static/css/app.css

@@ -143,30 +143,30 @@ img {
 }
 
 #nav .navbar {
+    width: 100%;
     float: left;
     border: none;
     margin: 0;
 }
 
-#nav .navbar .button {
-    float: left;
-    display: none;
+#nav .navbar-toggle {
+    padding: 5px 0;
 }
 
-#nav .navbar .button i {
-    padding-top: 33px;
+#nav .navbar-toggle i {
     font-size: 28px;
+    color: #fff;
     opacity: 0.5;
 }
 
-#nav .navbar .button a i {
-    display: block;
-    color: #fff;
-}
-#nav .navbar .button a:hover i {
+#nav .navbar-toggle:hover i {
     opacity: 1;
 }
 
+#nav .navbar-collapse {
+    padding: 0;
+}
+
 #nav .navbar ul {
     list-style: none;
     margin: 0;
@@ -752,12 +752,13 @@ img {
     box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.2);
     height: 200px;
     padding: 0 10px 10px 10px;
-    z-index: 99;
+    z-index: 1;
 }
 
 #chatbox-text {
     overflow-y: scroll;
     height: 190px;
+    color: #222;
 }
 
 /* tables */
@@ -809,7 +810,6 @@ tr.selected td {
 
     body { font-size: 12px;}
 
-
     h1 { font-size: 30px; padding-bottom: 6px; }
 
     h2 { font-size: 22px; padding-bottom: 10px; }
@@ -819,43 +819,30 @@ tr.selected td {
 }
 
 
-
 /* display for resolutions smaller that 900px */
 @media only screen and (max-width: 900px) {
 
     #nav .navbar li a { padding: 24px 5px; }
 }
 
+
 /* display for resolutions smaller that 760px */
 @media only screen and (max-width: 760px) {
 
-    #nav .navbar li a { padding: 24px 2px; }
-    #nav .searchbar input { width: 100px; }
-}
-
-
-/* display for resolutions smaller that 480px */
-@media only screen and (max-width: 480px) {
-
     h1 { font-size: 22px; padding-bottom: 4px; }
 
     h2 { font-size: 16px; padding-bottom: 4px; }
 
     h3 { font-size: 14px; padding-bottom: 4px; }
 
-    #header { height: 80px;  }
-    #header .title { width: 100%; text-align: center; margin-top: 5px;  }
-    #header .user { float: left; width: 100%;  }
+    .user i { font-size: 16px;  padding: 3px; }
 
-    #nav { height: 60px; }
-    #nav .navbar ul { display:none;}
-    #nav .navbar .button { display: block;}
-    #nav .navbar .button i { padding-top: 15px;}
-    #nav .searchbar { margin-top: 15px; }
-    #nav .searchbar input { width: 150px; }
+    #nav .navbar { box-shadow: none; }
+    #nav .navbar ul li a { padding: 10px 15px; }
+    #nav .searchbar { margin: 15px 0; }
 
-    #chatbox { width: 100%; top: 130px; }
-    .optional { /* hide optional column */
-        display: none;
-    }
+    #chatbox { width: 100%; top: 40px; }
+
+    /* hide marked element / column */
+    .optional, .hide-sm { display: none; }
 }

openslides/core/static/js/core/site.js

@@ -437,6 +437,10 @@ angular.module('OpenSlidesApp.core.site', [
     'mainMenu',
     function ($scope, mainMenu) {
         mainMenu.registerScope($scope);
+        $scope.isMenuOpen = false;
+        $scope.closeMenu = function () {
+            $scope.isMenuOpen = false;
+        };
     }
 ])
 

openslides/core/static/templates/index.html

@@ -34,7 +34,7 @@
             <a href ng-click="openChatbox()" class="headerlink"
                 ng-class="{ 'active': !chatboxIsCollapsed }" uib-dropdown-toggle>
               <i class="fa fa-comment"></i>
-              <translate>Chat</translate>
+              <translate class="hide-sm">Chat</translate>
               <span ng-if="unreadMessages > 0 && chatboxIsCollapsed" class="badge">
                 {{ unreadMessages }}
               </span>
@@ -72,7 +72,7 @@
           <span uib-dropdown>
             <a href class="headerlink" uib-dropdown-toggle>
               <i class="fa fa-user"></i>
-              <span>{{ operator.user.get_short_name() }}</span>
+              <span class="hide-sm">{{ operator.user.get_short_name() }}</span>
             </a>
             <ul class="uib-dropdown-menu pull-right" role="menu" aria-labelledby="simple-dropdown">
               <li>
@@ -107,7 +107,7 @@
       <span uib-dropdown>
         | <a href class="headerlink" uib-dropdown-toggle>
           <i class="fa fa-flag"></i>
-          {{ selectedLanguage[0].name | translate }}
+          <span class="hide-sm">{{ selectedLanguage[0].name | translate }}</span>
         </a>
         <ul class="uib-dropdown-menu pull-right" role="menu" aria-labelledby="simple-dropdown">
           <li ng-repeat="language in languages">
@@ -122,21 +122,24 @@
 </div><!--end header-->
 
 <!-- Navbar -->
-<div id="nav">
-  <div class="containerOS">
-    <div class="navbar">
-      <div class="button"><a href="#"><i class="fa fa-bars"></i></a></div>
+<div id="nav" ng-controller="MainMenuCtrl">
+  <div class="containerOS" >
+    <!-- mobile (vertical) main menu -->
+    <button class="navbar-toggle" ng-click="isMenuOpen = !isMenuOpen">
+      <i class="fa fa-bars"></i>
+    </button>
+    <div class="navbar navbar-collapse" ng-class="{collapse: !isMenuOpen}" >
       <!-- Main menu -->
-      <ul ng-controller="MainMenuCtrl">
-        <li ng-repeat="element in elements" ui-sref-active="active">
+      <ul>
+        <li ng-repeat="element in elements" ui-sref-active="active" ng-click="closeMenu()">
           <a ui-sref="{{ element.ui_sref }}">
             <i class="fa fa-{{ element.img_class }}"></i>
             {{ element.title | translate }}
           </a>
       </ul>
-    </div>
+      <!-- Search bar -->
       <div class="searchbar pull-right" ng-controller="SearchBarCtrl">
-      <form ng-submit="search(query)">
+        <form ng-submit="search(query); closeMenu()">
           <div class="input-group">
             <input ng-model="query" class="form-control" type="text" placeholder="{{ 'Search' | translate}}">
             <span class="input-group-btn">
@@ -147,6 +150,7 @@
           </div>
         </form>
       </div>
+    </div>
 
    </div>
 </div><!--end nav-->