Make the sidebar scroll and one typofix

This commit is contained in:
FinnStutzenstein 2016-09-15 16:20:02 +02:00
parent 858f4a2b43
commit 9347a78d56
3 changed files with 55 additions and 5 deletions

View File

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

View File

@ -948,11 +948,54 @@ angular.module('OpenSlidesApp.core.site', [
// Projector Sidebar Controller // Projector Sidebar Controller
.controller('ProjectorSidebarCtrl', [ .controller('ProjectorSidebarCtrl', [
'$scope', '$scope',
function ($scope) { '$document',
'$window',
function ($scope, $document, $window) {
$scope.isProjectorSidebar = false; $scope.isProjectorSidebar = false;
$scope.showProjectorSidebar = function (show) { $scope.showProjectorSidebar = function (show) {
$scope.isProjectorSidebar = 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);
};
} }
]) ])
@ -1196,7 +1239,7 @@ angular.module('OpenSlidesApp.core.site', [
}, function () { }, function () {
var conf = Config.get('projector_resolution').value; var conf = Config.get('projector_resolution').value;
// With multiprojector, get the resolution from Prjector.get(pk).{width; height} // 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; last_conf = conf;
$scope.projectorWidth = conf.width; $scope.projectorWidth = conf.width;
$scope.projectorHeight = conf.height; $scope.projectorHeight = conf.height;

View File

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