From acf996a7208e6ea586d57c8d130927370cf082b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emanuel=20Sch=C3=BCtze?= <emanuel@intevation.de>
Date: Mon, 20 Feb 2017 19:46:44 +0100
Subject: [PATCH] CSS improvements for projector sidebar on small devices.

---
 openslides/core/static/css/app.css          | 35 +++++++++++++--------
 openslides/core/static/templates/index.html | 11 +++++--
 2 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/openslides/core/static/css/app.css b/openslides/core/static/css/app.css
index dab3bdeb0..302a8b70b 100644
--- a/openslides/core/static/css/app.css
+++ b/openslides/core/static/css/app.css
@@ -309,14 +309,18 @@ img {
     float: left;
 }
 
-#content .col1.min { /*with maximized sidebar*/
+#content .col1.sidebar-max { /*with maximized sidebar*/
     width: calc(100% - 330px);
 }
 
-#content .col1.max { /*with minimized sidebar*/
+#content .col1.sidebar-min { /*with minimized sidebar*/
     width: calc(100% - 70px);
 }
 
+#content .col1.sidebar-none { /*without sidebar*/
+    width: 100%;
+}
+
 .col1 .header {
     background: #fff;
     border: 1px solid #d3d3d3;
@@ -730,13 +734,16 @@ img {
     margin-bottom: 20px;
 }
 
-#content .col2.max {
+#content .col2.sidebar-max {
     width: 330px;
 }
 
-#content .col2.min {
+#content .col2.sidebar-min {
     width: 70px;
 }
+#content .col2.sidebar-none {
+    width: 0px;
+}
 
 #content .col2 h4 {
     font-size: 22px;
@@ -1717,16 +1724,18 @@ tr.selected td {
     #content .containerOS {
         padding: 0;
     }
-    #content .col2.max {
+    #content .col2 {
+        position: relative !important;
+        margin-top: -20px;
+    }
+    #content .col2.sidebar-max {
+        width: 296px;
+    }
+    #content .col2 .projector_full, #content .col2 .projector_min {
+        margin-left: 0;
+    }
+    #content .col1.sidebar-min, #content .col1.sidebar-max {
         width: 100%;
-        position: absolute !important;
-        left: 0;
-    }
-    #content .col1.min {
-        width: calc(100% - 70px);
-    }
-    .col2 .projector_full {
-        margin-left: 0px;
     }
     #groups-table .perm-head {
         width: 150px;
diff --git a/openslides/core/static/templates/index.html b/openslides/core/static/templates/index.html
index cd3c05ae9..36353bfee 100644
--- a/openslides/core/static/templates/index.html
+++ b/openslides/core/static/templates/index.html
@@ -175,7 +175,10 @@
 <!-- Content -->
 <div id="content" ng-controller="ProjectorSidebarCtrl">
   <div class="containerOS">
-    <div class="col1" ng-class="(isProjectorSidebar && operator.hasPerms('core.can_see_projector')) ? 'min' : 'max'">
+    <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 -->
@@ -184,8 +187,10 @@
           <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="(isProjectorSidebar && operator.hasPerms('core.can_see_projector')) ? 'max' : 'min'"
+    <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'),
+        'sidebar-none': !operator.hasPerms('core.can_see_projector') }"
         ng-init="initSidebar()">
       <!-- sidebar maximized -->
       <div class="projector_full" ng-if="isProjectorSidebar">