CSS improvements for projector sidebar on small devices.

This commit is contained in:
Emanuel Schütze 2017-02-20 19:46:44 +01:00
parent 0db900dc9f
commit acf996a720
2 changed files with 30 additions and 16 deletions

View File

@ -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;

View File

@ -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">