Merge pull request #2386 from FinnStutzenstein/sidebarScroll

First attempt to scroll the projector sidebar

openslides/core/static/css/app.css

@@ -450,7 +450,9 @@ img {
 #content .col2 {
     float: right;
     position: relative;
+    display: inline-table;
     z-index: 3;
+    margin-bottom: 20px;
 }
 
 #content .col2.max {
@@ -1252,7 +1254,11 @@ tr.selected td {
     }
     #content .col2.max {
         width: 100%;
-        position: absolute;
+        position: absolute !important;
+        left: 0;
+    }
+    #content .col1.min {
+        width: calc(100% - 70px);
     }
     .col2 .projector_full {
         margin-left: 0px;

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

@@ -989,11 +989,54 @@ angular.module('OpenSlidesApp.core.site', [
 // Projector Sidebar Controller
 .controller('ProjectorSidebarCtrl', [
     '$scope',
-    function ($scope) {
+    '$document',
+    '$window',
+    function ($scope, $document, $window) {
         $scope.isProjectorSidebar = false;
         $scope.showProjectorSidebar = function (show) {
             $scope.isProjectorSidebar = show;
         };
+
+        // Sidebar scroll
+        var marginTop = 20, // margin-top from #content
+            marginBottom = 30, // 30px + 20px sidebar margin-bottom = 50px from footer
+            sidebar;
+
+        var sidebarScroll = function () {
+            var sidebarHeight = sidebar.height(),
+                sidebarOffset = sidebar.offset().top,
+                sidebarMinOffset = $('#header').height() + $('#nav').height() + marginTop,
+                documentHeight = $document.height(),
+                windowHeight = $window.innerHeight,
+                scrollTop = $window.pageYOffset;
+
+            // First, check if there is a need to scroll: scroll if the sidebar is smaller then the content
+            if (sidebarHeight < $('.col1').height()) {
+                if ((scrollTop + marginTop + sidebarHeight) > (documentHeight - marginBottom)) {
+                    // Stick to the bottom
+                    var bottom = marginBottom + scrollTop + windowHeight - documentHeight;
+                    sidebar.css({'position': 'fixed', 'top': '', 'bottom': bottom});
+                } else if ((scrollTop + marginTop) > sidebarMinOffset) {
+                    // scroll with the user
+                    sidebar.css({'position': 'fixed', 'top': marginTop, 'bottom': ''});
+                } else {
+                    // Stick to the top
+                    sidebar.css({'position': 'relative', 'top': 0, 'bottom': ''});
+                }
+            } else {
+                // Stick to the top, if the sidebar is larger then the content
+                sidebar.css({'position': 'relative', 'top': 0, 'bottom': ''});
+            }
+        };
+
+        $scope.initSidebar = function () {
+            sidebar = $('#sidebar');
+            $scope.$watch(function () {
+                return sidebar.height();
+            }, sidebarScroll);
+            angular.element($window).bind('scroll', sidebarScroll);
+        };
+
     }
 ])
 
@@ -1237,7 +1280,7 @@ angular.module('OpenSlidesApp.core.site', [
         }, function () {
             var conf = Config.get('projector_resolution').value;
             // With multiprojector, get the resolution from Prjector.get(pk).{width; height}
-            if(!last_conf || last_conf.width != conf.width || last-conf.height != conf.height) {
+            if(!last_conf || last_conf.width != conf.width || last_conf.height != conf.height) {
                 last_conf = conf;
                 $scope.projectorWidth = conf.width;
                 $scope.projectorHeight = conf.height;

openslides/core/static/templates/index.html

@@ -171,8 +171,9 @@
           <a ui-sref="legalnotice" translate>Legal notice</a>
         </div><!--end footer-->
     </div>
-    <div class="col2" os-perms="core.can_see_projector"
-        ng-class="isProjectorSidebar ? 'max' : 'min'">
+    <div id="sidebar" class="col2" os-perms="core.can_see_projector"
+        ng-class="isProjectorSidebar ? 'max' : 'min'"
+        ng-init="initSidebar()">
       <!-- sidebar maximized -->
       <div class="projector_full" ng-if="isProjectorSidebar">
         <div class="title" ng-click="showProjectorSidebar(false)">