Fix main menu on small devices (Fixes #2005)
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
parent
7029852043
commit
876d9408fe
@ -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; }
|
||||
}
|
||||
|
||||
@ -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;
|
||||
};
|
||||
}
|
||||
])
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user