ag-admin/OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Responsive design improvements

Browse Source 
- 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
openslides/core/static/css/app.css
View File

@ -209,13 +209,13 @@ img {
#nav .navbar {
width: 100%;
float: left;
border: none;
margin: 0;
}
#nav .navbar-toggle {
padding: 5px 0;
z-index: 2;
}
#nav .navbar-toggle i {
@ -310,7 +310,7 @@ img {
}
#content .col1.sidebar-max { /*with maximized sidebar*/
width: calc(100% - 330px);
width: calc(100% - 325px);
}
#content .col1.sidebar-min { /*with minimized sidebar*/
@ -723,16 +723,22 @@ img {
/** Projector sidebar column **/
#content .col2 {
#content .col2 { /*TODO*/
float: right;
position: relative;
display: inline-flex;
z-index: 3;
margin-bottom: 20px;
top: 0px;
right: 0px;
}
#sidebar-xs {
display: none !important;
}
#content .col2.sidebar-max {
width: 330px;
width: 325px;
}
#content .col2.sidebar-min {
@ -787,7 +793,6 @@ img {
opacity: 1;
}
.col2 .projector_min .icon a {
color: #fff;
display: block;
@ -798,7 +803,7 @@ img {
width: auto;
}
.col2 .projector_full .title {
.col2 .projector_full .title {
width: 100%;
color: #fff;
height: 50px;
@ -939,11 +944,10 @@ img {
.iframeoverlay {
width: 256px;
position: absolute;
top: 0px;
left: 0px;
margin: 0 auto;
display: block;
z-index: 1;
background-color: #f5f5f5;
}
/** Motion **/
@ -1699,6 +1703,13 @@ tr.selected td {
/* show replacement elements, if any */
#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; }
#nav .navbar { box-shadow: none; }
#nav .navbar { box-shadow: none; padding-right: 60px !important; }
#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; }
@ -1734,16 +1745,20 @@ tr.selected td {
padding: 0;
}
#content .col2 {
position: relative !important;
margin-top: -20px;
width: 100%;
}
#content .col2.sidebar-max {
width: 296px;
#content .col2.sidebar-max, #content .col2.sidebar-min,
#content .col1.sidebar-min, #content .col1.sidebar-max {
width: 100%;
}
#content .col2 .projector_full, #content .col2 .projector_min {
margin-left: 0;
#sidebar {
display: none !important;
}
#content .col1.sidebar-min, #content .col1.sidebar-max {
#sidebar-xs {
display: block !important;
}
#sidebar-xs .projector_full {
margin-left: 0 !important;
width: 100%;
}
#groups-table .perm-head {

8
openslides/core/static/js/core/site.js
View File

@ -887,17 +887,17 @@ angular.module('OpenSlidesApp.core.site', [
if ((scrollTop + marginTop + sidebarHeight) > (documentHeight - marginBottom)) {
// Stick to the bottom
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) {
// scroll with the user
sidebar.css({'position': 'fixed', 'top': marginTop, 'bottom': ''});
sidebar.css({'position': 'fixed', 'top': marginTop, 'right': '30px', 'bottom': ''});
} else {
// Stick to the top
sidebar.css({'position': 'relative', 'top': 0, 'bottom': ''});
sidebar.css({'position': 'relative', 'top': 0, 'right': 0, 'bottom': ''});
}
} else {
// 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': ''});
}
};

62
openslides/core/static/templates/index.html
View File

@ -175,18 +175,8 @@
<!-- Content -->
<div id="content" ng-controller="ProjectorSidebarCtrl">
<div class="containerOS">
<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>
<!-- col2 -->
<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'),
@ -213,7 +203,53 @@
</a>
</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-->

64
openslides/motions/static/templates/motions/motion-detail/toolbar.html
View File

@ -21,8 +21,8 @@
<div class="toolbar-left {{ lineNumberMode }}">
<!-- line number mode -->
<div class="btn-group" data-toggle="buttons">
<!-- line number mode 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">
<i class="fa fa-list-ol" aria-hidden="true"></i>
<translate>Line numbering</translate>:
@ -46,6 +46,31 @@
<translate>outside</translate>
</label>
</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 -->
<div class="popover-wrapper">
@ -67,7 +92,9 @@
<!-- View Modes (Original, Diff, Changed) -->
<div class="motion-toolbar" ng-if="change_recommendations.length > 0">
<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">
<i class="fa fa-edit" aria-hidden="true"></i>
<translate>Change recommendations</translate>:
@ -101,5 +128,36 @@
<translate>Final version</translate>
</label>
</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>