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 {
width: 100%;
float: left;
border: none;
margin: 0;
}
#nav .navbar .button {
float: left;
display: none;
#nav .navbar-toggle {
padding: 5px 0;
}
#nav .navbar .button i {
padding-top: 33px;
#nav .navbar-toggle i {
font-size: 28px;
color: #fff;
opacity: 0.5;
}
#nav .navbar .button a i {
display: block;
color: #fff;
}
#nav .navbar .button a:hover i {
#nav .navbar-toggle:hover i {
opacity: 1;
}
#nav .navbar-collapse {
padding: 0;
}
#nav .navbar ul {
list-style: none;
margin: 0;
@ -752,12 +752,13 @@ img {
box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.2);
height: 200px;
padding: 0 10px 10px 10px;
z-index: 99;
z-index: 1;
}
#chatbox-text {
overflow-y: scroll;
height: 190px;
color: #222;
}
/* tables */
@ -809,7 +810,6 @@ tr.selected td {
body { font-size: 12px;}
h1 { font-size: 30px; padding-bottom: 6px; }
h2 { font-size: 22px; padding-bottom: 10px; }
@ -819,43 +819,30 @@ tr.selected td {
}
/* display for resolutions smaller that 900px */
@media only screen and (max-width: 900px) {
#nav .navbar li a { padding: 24px 5px; }
}
/* display for resolutions smaller that 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; }
h2 { font-size: 16px; padding-bottom: 4px; }
h3 { font-size: 14px; padding-bottom: 4px; }
#header { height: 80px; }
#header .title { width: 100%; text-align: center; margin-top: 5px; }
#header .user { float: left; width: 100%; }
.user i { font-size: 16px; padding: 3px; }
#nav { height: 60px; }
#nav .navbar ul { display:none;}
#nav .navbar .button { display: block;}
#nav .navbar .button i { padding-top: 15px;}
#nav .searchbar { margin-top: 15px; }
#nav .searchbar input { width: 150px; }
#nav .navbar { box-shadow: none; }
#nav .navbar ul li a { padding: 10px 15px; }
#nav .searchbar { margin: 15px 0; }
#chatbox { width: 100%; top: 130px; }
.optional { /* hide optional column */
display: none;
}
#chatbox { width: 100%; top: 40px; }
/* 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',
function ($scope, mainMenu) {
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"
ng-class="{ 'active': !chatboxIsCollapsed }" uib-dropdown-toggle>
<i class="fa fa-comment"></i>
<translate>Chat</translate>
<translate class="hide-sm">Chat</translate>
<span ng-if="unreadMessages > 0 && chatboxIsCollapsed" class="badge">
{{ unreadMessages }}
</span>
@ -72,7 +72,7 @@
<span uib-dropdown>
<a href class="headerlink" uib-dropdown-toggle>
<i class="fa fa-user"></i>
<span>{{ operator.user.get_short_name() }}</span>
<span class="hide-sm">{{ operator.user.get_short_name() }}</span>
</a>
<ul class="uib-dropdown-menu pull-right" role="menu" aria-labelledby="simple-dropdown">
<li>
@ -107,7 +107,7 @@
<span uib-dropdown>
| <a href class="headerlink" uib-dropdown-toggle>
<i class="fa fa-flag"></i>
{{ selectedLanguage[0].name | translate }}
<span class="hide-sm">{{ selectedLanguage[0].name | translate }}</span>
</a>
<ul class="uib-dropdown-menu pull-right" role="menu" aria-labelledby="simple-dropdown">
<li ng-repeat="language in languages">
@ -122,30 +122,34 @@
</div><!--end header-->
<!-- Navbar -->
<div id="nav">
<div class="containerOS">
<div class="navbar">
<div class="button"><a href="#"><i class="fa fa-bars"></i></a></div>
<div id="nav" ng-controller="MainMenuCtrl">
<div class="containerOS" >
<!-- mobile (vertical) main menu -->
<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 -->
<ul ng-controller="MainMenuCtrl">
<li ng-repeat="element in elements" ui-sref-active="active">
<ul>
<li ng-repeat="element in elements" ui-sref-active="active" ng-click="closeMenu()">
<a ui-sref="{{ element.ui_sref }}">
<i class="fa fa-{{ element.img_class }}"></i>
{{ element.title | translate }}
</a>
</ul>
</div>
<div class="searchbar pull-right" ng-controller="SearchBarCtrl">
<form ng-submit="search(query)">
<div class="input-group">
<input ng-model="query" class="form-control" type="text" placeholder="{{ 'Search' | translate}}">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
<!-- Search bar -->
<div class="searchbar pull-right" ng-controller="SearchBarCtrl">
<form ng-submit="search(query); closeMenu()">
<div class="input-group">
<input ng-model="query" class="form-control" type="text" placeholder="{{ 'Search' | translate}}">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
</div>
</div>
</div>