Responsive design improvements

- Reduce search bar on small devices.
- Use separate projector sidebar for small devices.
- motion detail toolbar: show line number mode and change recommendation
  controls as dropdown (for small/extra small devices) or as
  button group (for medium/large devices).
This commit is contained in:
Emanuel Schütze 2017-03-04 22:56:43 +01:00
parent 95c19159f8
commit f67afd1823
4 changed files with 147 additions and 38 deletions

View File

@ -209,13 +209,13 @@ img {
#nav .navbar { #nav .navbar {
width: 100%; width: 100%;
float: left;
border: none; border: none;
margin: 0; margin: 0;
} }
#nav .navbar-toggle { #nav .navbar-toggle {
padding: 5px 0; padding: 5px 0;
z-index: 2;
} }
#nav .navbar-toggle i { #nav .navbar-toggle i {
@ -310,7 +310,7 @@ img {
} }
#content .col1.sidebar-max { /*with maximized sidebar*/ #content .col1.sidebar-max { /*with maximized sidebar*/
width: calc(100% - 330px); width: calc(100% - 325px);
} }
#content .col1.sidebar-min { /*with minimized sidebar*/ #content .col1.sidebar-min { /*with minimized sidebar*/
@ -723,16 +723,22 @@ img {
/** Projector sidebar column **/ /** Projector sidebar column **/
#content .col2 { #content .col2 { /*TODO*/
float: right; float: right;
position: relative; position: relative;
display: inline-flex; display: inline-flex;
z-index: 3; z-index: 3;
margin-bottom: 20px; margin-bottom: 20px;
top: 0px;
right: 0px;
}
#sidebar-xs {
display: none !important;
} }
#content .col2.sidebar-max { #content .col2.sidebar-max {
width: 330px; width: 325px;
} }
#content .col2.sidebar-min { #content .col2.sidebar-min {
@ -787,7 +793,6 @@ img {
opacity: 1; opacity: 1;
} }
.col2 .projector_min .icon a { .col2 .projector_min .icon a {
color: #fff; color: #fff;
display: block; display: block;
@ -939,11 +944,10 @@ img {
.iframeoverlay { .iframeoverlay {
width: 256px; width: 256px;
position: absolute; margin: 0 auto;
top: 0px;
left: 0px;
display: block; display: block;
z-index: 1; z-index: 1;
background-color: #f5f5f5;
} }
/** Motion **/ /** Motion **/
@ -1699,6 +1703,13 @@ tr.selected td {
/* show replacement elements, if any */ /* show replacement elements, if any */
#groups-table .optional-show { display: block !important; } #groups-table .optional-show { display: block !important; }
/* hide searchbar input */
#nav .searchbar input { display: none !important; }
#nav .searchbar .btn {
border-top-left-radius: 4px !important;
border-bottom-left-radius: 4px !important;
}
} }
@ -1713,9 +1724,9 @@ tr.selected td {
.user i { font-size: 16px; padding: 3px; } .user i { font-size: 16px; padding: 3px; }
#nav .navbar { box-shadow: none; } #nav .navbar { box-shadow: none; padding-right: 60px !important; }
#nav .navbar ul li a { padding: 10px 15px; } #nav .navbar ul li a { padding: 10px 15px; }
#nav .searchbar { margin: 15px 0; } #nav .searchbar { margin: 15px -53px 0 0 !important; }
#chatbox { width: 100%; top: 40px; } #chatbox { width: 100%; top: 40px; }
@ -1734,18 +1745,22 @@ tr.selected td {
padding: 0; padding: 0;
} }
#content .col2 { #content .col2 {
position: relative !important; width: 100%;
margin-top: -20px;
}
#content .col2.sidebar-max {
width: 296px;
}
#content .col2 .projector_full, #content .col2 .projector_min {
margin-left: 0;
} }
#content .col2.sidebar-max, #content .col2.sidebar-min,
#content .col1.sidebar-min, #content .col1.sidebar-max { #content .col1.sidebar-min, #content .col1.sidebar-max {
width: 100%; width: 100%;
} }
#sidebar {
display: none !important;
}
#sidebar-xs {
display: block !important;
}
#sidebar-xs .projector_full {
margin-left: 0 !important;
width: 100%;
}
#groups-table .perm-head { #groups-table .perm-head {
width: 150px; width: 150px;
} }

View File

@ -887,17 +887,17 @@ angular.module('OpenSlidesApp.core.site', [
if ((scrollTop + marginTop + sidebarHeight) > (documentHeight - marginBottom)) { if ((scrollTop + marginTop + sidebarHeight) > (documentHeight - marginBottom)) {
// Stick to the bottom // Stick to the bottom
var bottom = marginBottom + scrollTop + windowHeight - documentHeight; var bottom = marginBottom + scrollTop + windowHeight - documentHeight;
sidebar.css({'position': 'fixed', 'top': '', 'bottom': bottom}); sidebar.css({'position': 'fixed', 'top': '', 'right': '30px', 'bottom': bottom});
} else if ((scrollTop + marginTop) > sidebarMinOffset) { } else if ((scrollTop + marginTop) > sidebarMinOffset) {
// scroll with the user // scroll with the user
sidebar.css({'position': 'fixed', 'top': marginTop, 'bottom': ''}); sidebar.css({'position': 'fixed', 'top': marginTop, 'right': '30px', 'bottom': ''});
} else { } else {
// Stick to the top // Stick to the top
sidebar.css({'position': 'relative', 'top': 0, 'bottom': ''}); sidebar.css({'position': 'relative', 'top': 0, 'right': 0, 'bottom': ''});
} }
} else { } else {
// Stick to the top, if the sidebar is larger then the content // Stick to the top, if the sidebar is larger then the content
sidebar.css({'position': 'relative', 'top': 0, 'bottom': ''}); sidebar.css({'position': 'relative', 'top': 0, 'right': 0, 'bottom': ''});
} }
}; };

View File

@ -175,18 +175,8 @@
<!-- 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="{
'sidebar-max': isProjectorSidebar && operator.hasPerms('core.can_see_projector'), <!-- col2 -->
'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 -->
<div id="footer">
&copy; Copyright by <a href="http://www.openslides.org" target="_blank">OpenSlides</a> |
<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="{ <div id="sidebar" class="col2" os-perms="core.can_see_projector" ng-class="{
'sidebar-max': isProjectorSidebar && operator.hasPerms('core.can_see_projector'), 'sidebar-max': isProjectorSidebar && operator.hasPerms('core.can_see_projector'),
'sidebar-min': !isProjectorSidebar && operator.hasPerms('core.can_see_projector'), 'sidebar-min': !isProjectorSidebar && operator.hasPerms('core.can_see_projector'),
@ -213,7 +203,53 @@
</a> </a>
</div> </div>
</div> </div>
</div><!--end col2--> </div>
<!-- col2 sidebar-xs (for small devices)-->
<div id="sidebar-xs" 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') }">
<!-- sidebar maximized -->
<div class="projector_full" ng-if="isProjectorSidebar">
<div class="title" ng-click="showProjectorSidebar(false)">
<div class="name">
<i class="fa fa-video-camera"></i>
<translate>Projector</translate>
</div>
<div class="icon">
<i class="fa fa-angle-up"></i>
</div>
</div>
<div ng-include src="'static/templates/core/projector-controls.html'"></div>
</div>
<!-- sidebar minimized -->
<div class="projector_full" ng-if="!isProjectorSidebar">
<div class="title" ng-click="showProjectorSidebar(true)">
<div class="name">
<i class="fa fa-video-camera"></i>
<translate>Projector</translate>
</div>
<div class="icon">
<i class="fa fa-angle-down"></i>
</div>
</div>
</div>
</div>
<!-- col1 -->
<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 -->
<div id="footer">
&copy; Copyright by <a href="http://www.openslides.org" target="_blank">OpenSlides</a> |
<a ui-sref="legalnotice" translate>Legal notice</a>
</div><!--end footer-->
</div>
</div><!--end content-container--> </div><!--end content-container-->
</div><!--end content--> </div><!--end content-->

View File

@ -21,8 +21,8 @@
<div class="toolbar-left {{ lineNumberMode }}"> <div class="toolbar-left {{ lineNumberMode }}">
<!-- line number mode --> <!-- line number mode for resonsive size medium/large (button group) -->
<div class="btn-group" data-toggle="buttons"> <div class="btn-group hidden-sm hidden-xs" data-toggle="buttons">
<span class="btn btn-sm btn-default disabled"> <span class="btn btn-sm btn-default disabled">
<i class="fa fa-list-ol" aria-hidden="true"></i> <i class="fa fa-list-ol" aria-hidden="true"></i>
<translate>Line numbering</translate>: <translate>Line numbering</translate>:
@ -46,6 +46,31 @@
<translate>outside</translate> <translate>outside</translate>
</label> </label>
</div> </div>
<!-- line number mode for resonsive size small/extra small (dropdown) -->
<div class="dropdown hidden-md hidden-lg" uib-dropdown>
<button type="button" class="btn btn-default btn-sm" id="dropdownLineMode" uib-dropdown-toggle>
<i class="fa fa-list-ol" aria-hidden="true"></i>
<translate>Line numbering</translate>
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownLineMode">
<li>
<a href="" ng-click="setLineNumberMode('none')">
<i class="fa fa-check" ng-if="lineNumberMode == 'none'"></i>
<translate>none</translate>
</a>
<li>
<a href="" ng-click="setLineNumberMode('inline')">
<i class="fa fa-check" ng-if="lineNumberMode == 'inline'"></i>
<translate>inline</translate>
</a>
<li>
<a href="" ng-click="setLineNumberMode('outside')">
<i class="fa fa-check" ng-if="lineNumberMode == 'outside'"></i>
<translate>outside</translate>
</a>
</ul>
</div>
<!-- go to line number --> <!-- go to line number -->
<div class="popover-wrapper"> <div class="popover-wrapper">
@ -67,7 +92,9 @@
<!-- View Modes (Original, Diff, Changed) --> <!-- View Modes (Original, Diff, Changed) -->
<div class="motion-toolbar" ng-if="change_recommendations.length > 0"> <div class="motion-toolbar" ng-if="change_recommendations.length > 0">
<div class="toolbar-left"> <div class="toolbar-left">
<div class="btn-group" data-toggle="buttons">
<!-- change recommendations for resonsive size medium/large (button group) -->
<div class="btn-group hidden-sm hidden-xs" data-toggle="buttons">
<span class="btn btn-sm btn-default disabled"> <span class="btn btn-sm btn-default disabled">
<i class="fa fa-edit" aria-hidden="true"></i> <i class="fa fa-edit" aria-hidden="true"></i>
<translate>Change recommendations</translate>: <translate>Change recommendations</translate>:
@ -101,5 +128,36 @@
<translate>Final version</translate> <translate>Final version</translate>
</label> </label>
</div> </div>
<!-- change recommendations for resonsive size small/extra small (dropdown) -->
<div class="dropdown hidden-md hidden-lg" uib-dropdown>
<button type="button" class="btn btn-default btn-sm" id="dropdownChangeVersion" uib-dropdown-toggle>
<i class="fa fa-edit"></i>
<translate>Change recommendations</translate>
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownChangeVersion">
<li>
<a href="" ng-click="viewChangeRecommendations.mode = 'original'">
<i class="fa fa-check" ng-if="viewChangeRecommendations.mode == 'original'"></i>
<translate>Original version</translate>
</a>
<li>
<a href="" ng-click="viewChangeRecommendations.mode = 'changed'">
<i class="fa fa-check" ng-if="viewChangeRecommendations.mode == 'changed'"></i>
<translate>Changed version</translate>
</a>
<li>
<a href="" ng-click="viewChangeRecommendations.mode = 'diff'">
<i class="fa fa-check" ng-if="viewChangeRecommendations.mode == 'diff'"></i>
<translate>Diff version</translate>
</a>
<li>
<a href="" ng-click="viewChangeRecommendations.mode = 'agreed'">
<i class="fa fa-check" ng-if="viewChangeRecommendations.mode == 'agreed'"></i>
<translate>Final version</translate>
</a>
</ul>
</div>
</div> </div>
</div> </div>