Merge pull request #2991 from emanuelschuetze/css-fixes

CSS improvements for projector sidebar on small devices.
This commit is contained in:
Norman Jäckel 2017-02-20 20:39:22 +01:00 committed by GitHub
commit 4d3a45c8fb
2 changed files with 30 additions and 16 deletions

View File

@ -309,14 +309,18 @@ img {
float: left; float: left;
} }
#content .col1.min { /*with maximized sidebar*/ #content .col1.sidebar-max { /*with maximized sidebar*/
width: calc(100% - 330px); width: calc(100% - 330px);
} }
#content .col1.max { /*with minimized sidebar*/ #content .col1.sidebar-min { /*with minimized sidebar*/
width: calc(100% - 70px); width: calc(100% - 70px);
} }
#content .col1.sidebar-none { /*without sidebar*/
width: 100%;
}
.col1 .header { .col1 .header {
background: #fff; background: #fff;
border: 1px solid #d3d3d3; border: 1px solid #d3d3d3;
@ -730,13 +734,16 @@ img {
margin-bottom: 20px; margin-bottom: 20px;
} }
#content .col2.max { #content .col2.sidebar-max {
width: 330px; width: 330px;
} }
#content .col2.min { #content .col2.sidebar-min {
width: 70px; width: 70px;
} }
#content .col2.sidebar-none {
width: 0px;
}
#content .col2 h4 { #content .col2 h4 {
font-size: 22px; font-size: 22px;
@ -1717,16 +1724,18 @@ tr.selected td {
#content .containerOS { #content .containerOS {
padding: 0; 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%; width: 100%;
position: absolute !important;
left: 0;
}
#content .col1.min {
width: calc(100% - 70px);
}
.col2 .projector_full {
margin-left: 0px;
} }
#groups-table .perm-head { #groups-table .perm-head {
width: 150px; width: 150px;

View File

@ -175,7 +175,10 @@
<!-- Content --> <!-- Content -->
<div id="content" ng-controller="ProjectorSidebarCtrl"> <div id="content" ng-controller="ProjectorSidebarCtrl">
<div class="containerOS"> <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 --> <!-- dynamic views -->
<div ui-view ng-if="openslidesBootstrapDone && baseViewPermissionsGranted"></div> <div ui-view ng-if="openslidesBootstrapDone && baseViewPermissionsGranted"></div>
<!-- footer --> <!-- footer -->
@ -184,8 +187,10 @@
<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 id="sidebar" class="col2" os-perms="core.can_see_projector" <div id="sidebar" class="col2" os-perms="core.can_see_projector" ng-class="{
ng-class="(isProjectorSidebar && operator.hasPerms('core.can_see_projector')) ? 'max' : 'min'" '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()"> ng-init="initSidebar()">
<!-- sidebar maximized --> <!-- sidebar maximized -->
<div class="projector_full" ng-if="isProjectorSidebar"> <div class="projector_full" ng-if="isProjectorSidebar">