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

Fix main menu on small devices (Fixes #2005)

Browse Source 
Use bootstraps navbar-toggle button to bring up a
vertical responsive main menu.
Some additional responsive CSS impmprovements.
This commit is contained in:
Emanuel Schuetze 2016-03-06 00:58:45 +01:00
parent 7029852043
commit 876d9408fe
3 changed files with 50 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -143,30 +143,30 @@ img {
} }
#nav .navbar { #nav .navbar {
width: 100%;
float: left; float: left;
border: none; border: none;
margin: 0; margin: 0;
} }
#nav .navbar .button { #nav .navbar-toggle {
float: left; padding: 5px 0;
display: none;
} }
#nav .navbar .button i { #nav .navbar-toggle i {
padding-top: 33px;
font-size: 28px; font-size: 28px;
color: #fff;
opacity: 0.5; opacity: 0.5;
} }
#nav .navbar .button a i { #nav .navbar-toggle:hover i {
display: block;
color: #fff;
}
#nav .navbar .button a:hover i {
opacity: 1; opacity: 1;
} }
#nav .navbar-collapse {
padding: 0;
}
#nav .navbar ul { #nav .navbar ul {
list-style: none; list-style: none;
margin: 0; margin: 0;
@ -752,12 +752,13 @@ img {
box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.2); box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.2);
height: 200px; height: 200px;
padding: 0 10px 10px 10px; padding: 0 10px 10px 10px;
z-index: 99; z-index: 1;
} }
#chatbox-text { #chatbox-text {
overflow-y: scroll; overflow-y: scroll;
height: 190px; height: 190px;
color: #222;
} }
/* tables */ /* tables */
@ -809,7 +810,6 @@ tr.selected td {
body { font-size: 12px;} body { font-size: 12px;}
h1 { font-size: 30px; padding-bottom: 6px; } h1 { font-size: 30px; padding-bottom: 6px; }
h2 { font-size: 22px; padding-bottom: 10px; } h2 { font-size: 22px; padding-bottom: 10px; }
@ -819,43 +819,30 @@ tr.selected td {
} }
/* display for resolutions smaller that 900px */ /* display for resolutions smaller that 900px */
@media only screen and (max-width: 900px) { @media only screen and (max-width: 900px) {
#nav .navbar li a { padding: 24px 5px; } #nav .navbar li a { padding: 24px 5px; }
} }
/* display for resolutions smaller that 760px */ /* display for resolutions smaller that 760px */
@media only screen and (max-width: 760px) { @media only screen and (max-width: 760px) {
#nav .navbar li a { padding: 24px 2px; }
#nav .searchbar input { width: 100px; }
}
/* display for resolutions smaller that 480px */
@media only screen and (max-width: 480px) {
h1 { font-size: 22px; padding-bottom: 4px; } h1 { font-size: 22px; padding-bottom: 4px; }
h2 { font-size: 16px; padding-bottom: 4px; } h2 { font-size: 16px; padding-bottom: 4px; }
h3 { font-size: 14px; padding-bottom: 4px; } h3 { font-size: 14px; padding-bottom: 4px; }
#header { height: 80px; } .user i { font-size: 16px; padding: 3px; }
#header .title { width: 100%; text-align: center; margin-top: 5px; }
#header .user { float: left; width: 100%; }
#nav { height: 60px; } #nav .navbar { box-shadow: none; }
#nav .navbar ul { display:none;} #nav .navbar ul li a { padding: 10px 15px; }
#nav .navbar .button { display: block;} #nav .searchbar { margin: 15px 0; }
#nav .navbar .button i { padding-top: 15px;}
#nav .searchbar { margin-top: 15px; }
#nav .searchbar input { width: 150px; }
#chatbox { width: 100%; top: 130px; } #chatbox { width: 100%; top: 40px; }
.optional { /* hide optional column */
display: none; /* hide marked element / column */
} .optional, .hide-sm { display: none; }
} }

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

@ -437,6 +437,10 @@ angular.module('OpenSlidesApp.core.site', [
'mainMenu', 'mainMenu',
function ($scope, mainMenu) { function ($scope, mainMenu) {
mainMenu.registerScope($scope); mainMenu.registerScope($scope);
$scope.isMenuOpen = false;
$scope.closeMenu = function () {
$scope.isMenuOpen = false;
};
} }
]) ])

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

@ -34,7 +34,7 @@
<a href ng-click="openChatbox()" class="headerlink" <a href ng-click="openChatbox()" class="headerlink"
ng-class="{ 'active': !chatboxIsCollapsed }" uib-dropdown-toggle> ng-class="{ 'active': !chatboxIsCollapsed }" uib-dropdown-toggle>
<i class="fa fa-comment"></i> <i class="fa fa-comment"></i>
<translate>Chat</translate> <translate class="hide-sm">Chat</translate>
<span ng-if="unreadMessages > 0 && chatboxIsCollapsed" class="badge"> <span ng-if="unreadMessages > 0 && chatboxIsCollapsed" class="badge">
{{ unreadMessages }} {{ unreadMessages }}
</span> </span>
@ -72,7 +72,7 @@
<span uib-dropdown> <span uib-dropdown>
<a href class="headerlink" uib-dropdown-toggle> <a href class="headerlink" uib-dropdown-toggle>
<i class="fa fa-user"></i> <i class="fa fa-user"></i>
<span>{{ operator.user.get_short_name() }}</span> <span class="hide-sm">{{ operator.user.get_short_name() }}</span>
</a> </a>
<ul class="uib-dropdown-menu pull-right" role="menu" aria-labelledby="simple-dropdown"> <ul class="uib-dropdown-menu pull-right" role="menu" aria-labelledby="simple-dropdown">
<li> <li>
@ -107,7 +107,7 @@
<span uib-dropdown> <span uib-dropdown>
| <a href class="headerlink" uib-dropdown-toggle> | <a href class="headerlink" uib-dropdown-toggle>
<i class="fa fa-flag"></i> <i class="fa fa-flag"></i>
{{ selectedLanguage[0].name | translate }} <span class="hide-sm">{{ selectedLanguage[0].name | translate }}</span>
</a> </a>
<ul class="uib-dropdown-menu pull-right" role="menu" aria-labelledby="simple-dropdown"> <ul class="uib-dropdown-menu pull-right" role="menu" aria-labelledby="simple-dropdown">
<li ng-repeat="language in languages"> <li ng-repeat="language in languages">
@ -122,30 +122,34 @@
</div><!--end header--> </div><!--end header-->
<!-- Navbar --> <!-- Navbar -->
<div id="nav"> <div id="nav" ng-controller="MainMenuCtrl">
<div class="containerOS"> <div class="containerOS" >
<div class="navbar"> <!-- mobile (vertical) main menu -->
<div class="button"><a href="#"><i class="fa fa-bars"></i></a></div> <button class="navbar-toggle" ng-click="isMenuOpen = !isMenuOpen">
<i class="fa fa-bars"></i>
</button>
<div class="navbar navbar-collapse" ng-class="{collapse: !isMenuOpen}" >
<!-- Main menu --> <!-- Main menu -->
<ul ng-controller="MainMenuCtrl"> <ul>
<li ng-repeat="element in elements" ui-sref-active="active"> <li ng-repeat="element in elements" ui-sref-active="active" ng-click="closeMenu()">
<a ui-sref="{{ element.ui_sref }}"> <a ui-sref="{{ element.ui_sref }}">
<i class="fa fa-{{ element.img_class }}"></i> <i class="fa fa-{{ element.img_class }}"></i>
{{ element.title | translate }} {{ element.title | translate }}
</a> </a>
</ul> </ul>
</div> <!-- Search bar -->
<div class="searchbar pull-right" ng-controller="SearchBarCtrl"> <div class="searchbar pull-right" ng-controller="SearchBarCtrl">
<form ng-submit="search(query)"> <form ng-submit="search(query); closeMenu()">
<div class="input-group"> <div class="input-group">
<input ng-model="query" class="form-control" type="text" placeholder="{{ 'Search' | translate}}"> <input ng-model="query" class="form-control" type="text" placeholder="{{ 'Search' | translate}}">
<span class="input-group-btn"> <span class="input-group-btn">
<button type="submit" class="btn btn-default"> <button type="submit" class="btn btn-default">
<i class="fa fa-search"></i> <i class="fa fa-search"></i>
</button> </button>
</span> </span>
</div> </div>
</form> </form>
</div>
</div> </div>
</div> </div>