Responsive design improvements

- Reduce search bar on small devices.
- Use separate projector sidebar for small devices.
- motion detail toolbar: show line number mode and change recommendation
  controls as dropdown (for small/extra small devices) or as
  button group (for medium/large devices).

openslides/core/static/css/app.css

@@ -209,13 +209,13 @@ img {
 
 #nav .navbar {
     width: 100%;
-    float: left;
     border: none;
     margin: 0;
 }
 
 #nav .navbar-toggle {
     padding: 5px 0;
+    z-index: 2;
 }
 
 #nav .navbar-toggle i {
@@ -310,7 +310,7 @@ img {
 }
 
 #content .col1.sidebar-max { /*with maximized sidebar*/
-    width: calc(100% - 330px);
+    width: calc(100% - 325px);
 }
 
 #content .col1.sidebar-min { /*with minimized sidebar*/
@@ -723,16 +723,22 @@ img {
 
 /** Projector sidebar column **/
 
-#content .col2 {
+#content .col2 { /*TODO*/
     float: right;
     position: relative;
     display: inline-flex;
     z-index: 3;
     margin-bottom: 20px;
+    top: 0px;
+    right: 0px;
+}
+
+#sidebar-xs {
+    display: none !important;
 }
 
 #content .col2.sidebar-max {
-    width: 330px;
+    width: 325px;
 }
 
 #content .col2.sidebar-min {
@@ -787,7 +793,6 @@ img {
     opacity: 1;
 }
 
-
 .col2 .projector_min .icon a {
     color: #fff;
     display: block;
@@ -798,7 +803,7 @@ img {
     width: auto;
 }
 
- .col2 .projector_full .title {
+.col2 .projector_full .title {
     width: 100%;
     color: #fff;
     height: 50px;
@@ -939,11 +944,10 @@ img {
 
 .iframeoverlay {
     width: 256px;
-    position: absolute;
+    margin: 0 auto;
-    top: 0px;
-    left: 0px;
     display: block;
     z-index: 1;
+    background-color: #f5f5f5;
 }
 
 /** Motion **/
@@ -1699,6 +1703,13 @@ tr.selected td {
 
     /* show replacement elements, if any */
     #groups-table .optional-show { display: block !important; }
+
+    /* hide searchbar input */
+    #nav .searchbar input { display: none !important; }
+    #nav .searchbar .btn {
+        border-top-left-radius: 4px !important;
+        border-bottom-left-radius: 4px !important;
+    }
 }
 
 
@@ -1713,9 +1724,9 @@ tr.selected td {
 
     .user i { font-size: 16px;  padding: 3px; }
 
-    #nav .navbar { box-shadow: none; }
+    #nav .navbar { box-shadow: none; padding-right: 60px !important; }
     #nav .navbar ul li a { padding: 10px 15px; }
-    #nav .searchbar { margin: 15px 0; }
+    #nav .searchbar { margin: 15px -53px 0 0 !important; }
 
     #chatbox { width: 100%; top: 40px; }
 
@@ -1734,16 +1745,20 @@ tr.selected td {
         padding: 0;
     }
     #content .col2 {
-        position: relative !important;
+        width: 100%;
-        margin-top: -20px;
     }
-    #content .col2.sidebar-max {
+    #content .col2.sidebar-max, #content .col2.sidebar-min,
-        width: 296px;
+    #content .col1.sidebar-min, #content .col1.sidebar-max  {
+        width: 100%;
     }
-    #content .col2 .projector_full, #content .col2 .projector_min {
+    #sidebar {
-        margin-left: 0;
+        display: none !important;
     }
-    #content .col1.sidebar-min, #content .col1.sidebar-max {
+    #sidebar-xs {
+        display: block !important;
+    }
+    #sidebar-xs .projector_full {
+        margin-left: 0 !important;
         width: 100%;
     }
     #groups-table .perm-head {

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

@@ -887,17 +887,17 @@ angular.module('OpenSlidesApp.core.site', [
                 if ((scrollTop + marginTop + sidebarHeight) > (documentHeight - marginBottom)) {
                     // Stick to the bottom
                     var bottom = marginBottom + scrollTop + windowHeight - documentHeight;
-                    sidebar.css({'position': 'fixed', 'top': '', 'bottom': bottom});
+                    sidebar.css({'position': 'fixed', 'top': '', 'right': '30px', 'bottom': bottom});
                 } else if ((scrollTop + marginTop) > sidebarMinOffset) {
                     // scroll with the user
-                    sidebar.css({'position': 'fixed', 'top': marginTop, 'bottom': ''});
+                    sidebar.css({'position': 'fixed', 'top': marginTop, 'right': '30px', 'bottom': ''});
                 } else {
                     // Stick to the top
-                    sidebar.css({'position': 'relative', 'top': 0, 'bottom': ''});
+                    sidebar.css({'position': 'relative', 'top': 0, 'right': 0, 'bottom': ''});
                 }
             } else {
                 // Stick to the top, if the sidebar is larger then the content
-                sidebar.css({'position': 'relative', 'top': 0, 'bottom': ''});
+                sidebar.css({'position': 'relative', 'top': 0, 'right': 0, 'bottom': ''});
             }
         };
 

openslides/core/static/templates/index.html

@@ -175,18 +175,8 @@
 <!-- Content -->
 <div id="content" ng-controller="ProjectorSidebarCtrl">
   <div class="containerOS">
-    <div class="col1" ng-class="{
+
-        'sidebar-max': isProjectorSidebar && operator.hasPerms('core.can_see_projector'),
+    <!-- col2 -->
-        'sidebar-min': !isProjectorSidebar && operator.hasPerms('core.can_see_projector'),
-        'sidebar-none': !operator.hasPerms('core.can_see_projector') }">
-        <!-- dynamic views -->
-        <div ui-view ng-if="openslidesBootstrapDone && baseViewPermissionsGranted"></div>
-        <!-- footer -->
-        <div id="footer">
-          &copy; Copyright by <a href="http://www.openslides.org" target="_blank">OpenSlides</a> |
-          <a ui-sref="legalnotice" translate>Legal notice</a>
-        </div><!--end footer-->
-    </div>
     <div id="sidebar" class="col2" os-perms="core.can_see_projector" ng-class="{
         'sidebar-max': isProjectorSidebar && operator.hasPerms('core.can_see_projector'),
         'sidebar-min': !isProjectorSidebar && operator.hasPerms('core.can_see_projector'),
@@ -213,7 +203,53 @@
           </a>
         </div>
       </div>
-    </div><!--end col2-->
+    </div>
+
+    <!-- col2 sidebar-xs (for small devices)-->
+    <div id="sidebar-xs" class="col2" os-perms="core.can_see_projector" ng-class="{
+        'sidebar-max': isProjectorSidebar && operator.hasPerms('core.can_see_projector'),
+        'sidebar-min': !isProjectorSidebar && operator.hasPerms('core.can_see_projector'),
+        'sidebar-none': !operator.hasPerms('core.can_see_projector') }">
+      <!-- sidebar maximized -->
+      <div class="projector_full" ng-if="isProjectorSidebar">
+        <div class="title" ng-click="showProjectorSidebar(false)">
+          <div class="name">
+            <i class="fa fa-video-camera"></i>
+            <translate>Projector</translate>
+          </div>
+          <div class="icon">
+            <i class="fa fa-angle-up"></i>
+          </div>
+        </div>
+        <div ng-include src="'static/templates/core/projector-controls.html'"></div>
+      </div>
+      <!-- sidebar minimized -->
+      <div class="projector_full" ng-if="!isProjectorSidebar">
+        <div class="title" ng-click="showProjectorSidebar(true)">
+          <div class="name">
+            <i class="fa fa-video-camera"></i>
+            <translate>Projector</translate>
+          </div>
+          <div class="icon">
+            <i class="fa fa-angle-down"></i>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- col1 -->
+    <div class="col1" ng-class="{
+        'sidebar-max': isProjectorSidebar && operator.hasPerms('core.can_see_projector'),
+        'sidebar-min': !isProjectorSidebar && operator.hasPerms('core.can_see_projector'),
+        'sidebar-none': !operator.hasPerms('core.can_see_projector') }">
+        <!-- dynamic views -->
+        <div ui-view ng-if="openslidesBootstrapDone && baseViewPermissionsGranted"></div>
+        <!-- footer -->
+        <div id="footer">
+          &copy; Copyright by <a href="http://www.openslides.org" target="_blank">OpenSlides</a> |
+          <a ui-sref="legalnotice" translate>Legal notice</a>
+        </div><!--end footer-->
+    </div>
 
   </div><!--end content-container-->
 </div><!--end content-->

openslides/motions/static/templates/motions/motion-detail/toolbar.html

@@ -21,8 +21,8 @@
 
     <div class="toolbar-left {{ lineNumberMode }}">
 
-        <!-- line number mode -->
+        <!-- line number mode for resonsive size medium/large (button group) -->
-        <div class="btn-group" data-toggle="buttons">
+        <div class="btn-group hidden-sm hidden-xs" data-toggle="buttons">
             <span class="btn btn-sm btn-default disabled">
                 <i class="fa fa-list-ol" aria-hidden="true"></i>
                 <translate>Line numbering</translate>:
@@ -46,6 +46,31 @@
                 <translate>outside</translate>
             </label>
         </div>
+        <!-- line number mode for resonsive size small/extra small (dropdown) -->
+        <div class="dropdown hidden-md hidden-lg" uib-dropdown>
+          <button type="button" class="btn btn-default btn-sm" id="dropdownLineMode" uib-dropdown-toggle>
+            <i class="fa fa-list-ol" aria-hidden="true"></i>
+            <translate>Line numbering</translate>
+            <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownLineMode">
+            <li>
+              <a href="" ng-click="setLineNumberMode('none')">
+                <i class="fa fa-check" ng-if="lineNumberMode == 'none'"></i>
+                <translate>none</translate>
+              </a>
+            <li>
+              <a href="" ng-click="setLineNumberMode('inline')">
+                <i class="fa fa-check" ng-if="lineNumberMode == 'inline'"></i>
+                <translate>inline</translate>
+              </a>
+            <li>
+              <a href="" ng-click="setLineNumberMode('outside')">
+                <i class="fa fa-check" ng-if="lineNumberMode == 'outside'"></i>
+                <translate>outside</translate>
+              </a>
+          </ul>
+        </div>
 
         <!-- go to line number -->
         <div class="popover-wrapper">
@@ -67,7 +92,9 @@
 <!-- View Modes (Original, Diff, Changed) -->
 <div class="motion-toolbar" ng-if="change_recommendations.length > 0">
     <div class="toolbar-left">
-        <div class="btn-group" data-toggle="buttons">
+
+        <!-- change recommendations for resonsive size medium/large (button group) -->
+        <div class="btn-group hidden-sm hidden-xs" data-toggle="buttons">
             <span class="btn btn-sm btn-default disabled">
                 <i class="fa fa-edit" aria-hidden="true"></i>
                 <translate>Change recommendations</translate>:
@@ -101,5 +128,36 @@
                 <translate>Final version</translate>
             </label>
         </div>
+
+        <!-- change recommendations for resonsive size small/extra small (dropdown) -->
+        <div class="dropdown hidden-md hidden-lg" uib-dropdown>
+          <button type="button" class="btn btn-default btn-sm" id="dropdownChangeVersion" uib-dropdown-toggle>
+            <i class="fa fa-edit"></i>
+            <translate>Change recommendations</translate>
+            <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownChangeVersion">
+            <li>
+              <a href="" ng-click="viewChangeRecommendations.mode = 'original'">
+                <i class="fa fa-check" ng-if="viewChangeRecommendations.mode == 'original'"></i>
+                <translate>Original version</translate>
+              </a>
+            <li>
+              <a href="" ng-click="viewChangeRecommendations.mode = 'changed'">
+                <i class="fa fa-check" ng-if="viewChangeRecommendations.mode == 'changed'"></i>
+                <translate>Changed version</translate>
+              </a>
+            <li>
+              <a href="" ng-click="viewChangeRecommendations.mode = 'diff'">
+                <i class="fa fa-check" ng-if="viewChangeRecommendations.mode == 'diff'"></i>
+                <translate>Diff version</translate>
+              </a>
+            <li>
+              <a href="" ng-click="viewChangeRecommendations.mode = 'agreed'">
+                <i class="fa fa-check" ng-if="viewChangeRecommendations.mode == 'agreed'"></i>
+                <translate>Final version</translate>
+              </a>
+          </ul>
+        </div>
     </div>
 </div>