[#64040] Modifications sur navbar.
This commit is contained in:
Hugo Soucy
parent
5538b3325a
commit
e8054f5c91
@ -1,63 +1,180 @@
|
|||||||
nav#navbar {
|
.navbar-wrapper {
|
||||||
top: 0%;
|
border-bottom:1px solid;
|
||||||
margin-left: 300px;
|
@extend %colorBorderThin;
|
||||||
background-color: #353d48;
|
}
|
||||||
border-radius: 0px;
|
|
||||||
border: none;
|
.navbar {
|
||||||
height: 82px;
|
a {@extend %colorLink;}
|
||||||
min-height: 82px;
|
|
||||||
margin-bottom: 0px;
|
&.layout__flexrow {
|
||||||
|
.flexbox & {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__list {
|
||||||
|
display:block;
|
||||||
|
|
||||||
|
.flexbox .layout__flexrow & {
|
||||||
|
flex:1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.navbar__list--left {text-align:left;}
|
||||||
|
&.navbar__list--right {text-align:right;}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__item {
|
||||||
|
@extend %colorBorderThin;
|
||||||
|
border-right:1px solid;
|
||||||
|
display:inline-block;
|
||||||
|
float:left;
|
||||||
|
position:relative;
|
||||||
|
|
||||||
|
.navbar__list--right &.navbar__search {
|
||||||
|
border-left:1px solid;
|
||||||
|
@extend %colorBorderThin;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__button {
|
||||||
|
@extend %button-reset;
|
||||||
|
@extend %colorLink;
|
||||||
|
padding:32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
%navbar__panel {
|
||||||
|
@extend %colorBkgTopbarPanel;
|
||||||
|
max-width:485px;
|
||||||
|
min-width:320px;
|
||||||
|
position:absolute;
|
||||||
|
top:100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__panel--fromleft {
|
||||||
|
@extend %navbar__panel;
|
||||||
|
left:-1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__panel--fromright {
|
||||||
|
@extend %navbar__panel;
|
||||||
|
right:-1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__toggle-sidebar {
|
||||||
|
|
||||||
|
.navbar__button {
|
||||||
|
position:relative;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
//bottom:0;
|
||||||
|
display:inline-block;
|
||||||
|
font:normal 10px FontAwesome;
|
||||||
|
margin:auto 0;
|
||||||
|
position:absolute;
|
||||||
|
//top:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[aria-expanded="false"]:after {
|
||||||
|
content:'\f0da';
|
||||||
|
left:auto;
|
||||||
|
right:8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[aria-expanded="true"]:after {
|
||||||
|
content:'\f0d9';
|
||||||
|
left:8px;
|
||||||
|
right:auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__notifications {
|
||||||
|
.navbar__button {
|
||||||
|
position:relative;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
background:red;
|
||||||
|
border-radius:100%;
|
||||||
|
color:white;
|
||||||
|
content:attr(data-notifications);
|
||||||
|
font-size:10px;
|
||||||
|
height:18px;
|
||||||
|
line-height:18px;
|
||||||
|
position:absolute;
|
||||||
|
right:5px;
|
||||||
|
text-align:center;
|
||||||
|
top:5px;
|
||||||
|
width:18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
nav#navbar div.container-fluid{
|
|
||||||
padding-left: 0px;
|
.navbar__search #searchfield {
|
||||||
|
display:none;
|
||||||
|
|
||||||
|
@include medium-and-up-screen {
|
||||||
|
display:inline-block;
|
||||||
|
margin-right:15px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
nav#navbar .navbar-brand{ padding: 0px 30px;font-size: 1.5em;line-height: 80px; }
|
/* #navbar { */
|
||||||
nav#navbar .navbar-nav > li > a { padding: 0px 30px; line-height: 80px; font-size: 1.5em; }
|
/* border-radius: 0px; */
|
||||||
nav#navbar .navbar-nav > li > form div {
|
/* border: none; */
|
||||||
line-height: 55px;
|
/* height: 82px; */
|
||||||
font-size: 1.5em;
|
/* min-height: 82px; */
|
||||||
}
|
/* margin-bottom: 0px; */
|
||||||
nav#navbar .navbar-nav > li > form input {
|
/* } */
|
||||||
height: 60px;
|
|
||||||
}
|
/* #navbar .container-fluid{ */
|
||||||
|
/* padding-left: 0px; */
|
||||||
|
/* } */
|
||||||
|
|
||||||
|
/* #navbar .navbar-brand{ padding: 0px 30px;font-size: 1.5em;line-height: 80px; } */
|
||||||
|
/* #navbar .navbar-nav > li > a { padding: 0px 30px; line-height: 80px; font-size: 1.5em; } */
|
||||||
|
/* #navbar .navbar-nav > li > form div { */
|
||||||
|
/* line-height: 55px; */
|
||||||
|
/* font-size: 1.5em; */
|
||||||
|
/* } */
|
||||||
|
/* #navbar .navbar-nav > li > form input { */
|
||||||
|
/* height: 60px; */
|
||||||
|
/* } */
|
||||||
|
|
||||||
|
|
||||||
nav#navbar div.navbar-collapse {
|
/* #navbar div.navbar-collapse { */
|
||||||
padding-left: 0px;
|
/* padding-left: 0px; */
|
||||||
}
|
/* } */
|
||||||
|
|
||||||
form#search input {
|
/* #search input { */
|
||||||
border: none;
|
/* border: none; */
|
||||||
background-color: #353d48;
|
/* background-color: #353d48; */
|
||||||
font-size: 1.5em;
|
/* font-size: 1.5em; */
|
||||||
color: #aeb5bf;
|
/* color: #aeb5bf; */
|
||||||
width: 400px;
|
/* width: 400px; */
|
||||||
}
|
/* } */
|
||||||
|
|
||||||
|
|
||||||
a#toggle-sidebar .fa-chevron-left {
|
/* a#toggle-sidebar .fa-chevron-left { */
|
||||||
font-size: 0.5em;
|
/* font-size: 0.5em; */
|
||||||
vertical-align: super;
|
/* vertical-align: super; */
|
||||||
}
|
/* } */
|
||||||
|
|
||||||
|
|
||||||
a#search i,
|
/* #search i, */
|
||||||
a#settings i,
|
/* #settings i, */
|
||||||
a#notifications i,
|
/* #notifications i, */
|
||||||
a#toggle-sidebar i {
|
/* #toggle-sidebar i { */
|
||||||
font-size: 1.5em;
|
/* font-size: 1.5em; */
|
||||||
}
|
/* } */
|
||||||
|
|
||||||
|
|
||||||
nav#navbar li {
|
/* #navbar li { */
|
||||||
border-color: #252b37;
|
/* border-color: #252b37; */
|
||||||
border-style: solid;
|
/* border-style: solid; */
|
||||||
border-width: 1px;
|
/* border-width: 1px; */
|
||||||
}
|
/* } */
|
||||||
|
|
||||||
nav#navbar li a#search {
|
/* #navbar li #search { */
|
||||||
float: left;
|
/* float: left; */
|
||||||
}
|
/* } */
|
||||||
|
|||||||
@ -1,39 +1,84 @@
|
|||||||
<nav ng-app="adagios.navbar" id="navbar" class="navbar navbar-default navbar-inverse" role="navigation" ng-controller="NavBarCtrl">
|
<nav ng-app="adagios.navbar" id="navbar" class="navbar layout__flexrow" role="navigation" ng-controller="NavBarCtrl">
|
||||||
<div class="container-fluid">
|
<ul class="navbar__list navbar__list--left">
|
||||||
<!-- Brand and toggle get grouped for better mobile display -->
|
<li class="navbar__item navbar__toggle-sidebar">
|
||||||
<div class="navbar-header">
|
<button class="navbar__button"
|
||||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
|
type="button"
|
||||||
<span class="sr-only">Toggle navigation</span>
|
data-toggle="collapse"
|
||||||
<span class="icon-bar"></span>
|
data-target="#sidebarWrapper"
|
||||||
<span class="icon-bar"></span>
|
aria-expanded="false"
|
||||||
<span class="icon-bar"></span>
|
aria-controls="sidebarWrapper">
|
||||||
|
<span class="visuallyhidden">Ouvrir la barre de navigation latérale</span>
|
||||||
|
<i class="fa fa-bars"></i>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li class="navbar__item navbar__notifications">
|
||||||
|
<button class="navbar__button"
|
||||||
|
id="notifications"
|
||||||
|
type="button"
|
||||||
|
data-notifications="{{ notifications }}"
|
||||||
|
data-toggle="collapse"
|
||||||
|
data-target="#notificationsPanel"
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-controls="notificationsPanel">
|
||||||
|
<span class="visuallyhidden">Voir les notifications</span>
|
||||||
|
<i class="fa fa-bell"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
<div class="navbar__panel--fromleft collapse" id="notificationsPanel">
|
||||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
<div class="tabpanel">
|
||||||
<ul class="nav navbar-nav">
|
<ul role="tablist">
|
||||||
<li>
|
<li role="presentation" class="tablist__item active">
|
||||||
<a href="#" id="toggle-sidebar">
|
<a href="#openProblems"
|
||||||
<i class="fa fa-chevron-left"></i>
|
class="tabpanel__tab"
|
||||||
<i class="fa fa-align-justify"></i>
|
aria-controls="openProblems"
|
||||||
</a>
|
role="tab"
|
||||||
</li>
|
data-toggle="tab"
|
||||||
<li><a href="#" id="notifications"><i class="fa fa-bell"></i>{{ notifications }}</a></li>
|
data-openproblems="27">Open problems
|
||||||
</ul>
|
</a>
|
||||||
|
</li>
|
||||||
|
<li role="presentation" class="tablist__item">
|
||||||
|
<a href="#allProblems"
|
||||||
|
class="tabpanel__tab"
|
||||||
|
aria-controls="allProblems"
|
||||||
|
role="tab"
|
||||||
|
data-toggle="tab"
|
||||||
|
data-allproblems="38">All problems
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
<ul class="nav navbar-nav navbar-right">
|
<div class="tab-content">
|
||||||
<li>
|
<div role="tabpanel" class="tab-pane active" id="openProblems">Open problems</div>
|
||||||
<a href="#" id="search"><i class="fa fa-search"></i></a>
|
<div role="tabpanel" class="tab-pane" id="allProblems">All problems</div>
|
||||||
<form class="navbar-form navbar-left" role="search" id="search">
|
|
||||||
<div class="form-group">
|
|
||||||
<input type="text" class="form-control" placeholder="Search hosts, services, ...">
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li><a href="#" id="settings"><i class="fa fa-sliders fa-rotate-90"></i></a></li>
|
</ul>
|
||||||
</ul>
|
|
||||||
</div><!-- /.navbar-collapse -->
|
|
||||||
</div><!-- /.container-fluid -->
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
|
<ul class="navbar__list navbar__list--right">
|
||||||
|
<li class="navbar__item navbar__search">
|
||||||
|
<form class="navbar-form navbar-left" role="search" id="search">
|
||||||
|
<button class="navbar__button" id="search" type="submit">
|
||||||
|
<span class="visuallyhidden">Lancer une recherche</span>
|
||||||
|
<i class="fa fa-search"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<label class="visuallyhidden" for="searchfield">Recherche</label>
|
||||||
|
<input id="searchfield" type="search" class="form-control" placeholder="Search hosts, services, ...">
|
||||||
|
</form>
|
||||||
|
</li>
|
||||||
|
<li class="navbar__item navbar__settings">
|
||||||
|
<button class="navbar__button"
|
||||||
|
id="settings"
|
||||||
|
data-toggle="collapse"
|
||||||
|
data-target="#settingsPanel"
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-controls="settingsPanel">
|
||||||
|
<span class="visuallyhidden">Afficher la liste des paramètres</span>
|
||||||
|
<i class="fa fa-sliders fa-rotate-90"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="navbar__panel--fromright collapse" id="settingsPanel">...</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|||||||
@ -5,6 +5,7 @@ angular.module('adagios.navbar', ['adagios.live'])
|
|||||||
.controller('NavBarCtrl', ['$scope', '$http', 'GetProblems',
|
.controller('NavBarCtrl', ['$scope', '$http', 'GetProblems',
|
||||||
function($scope, $http, GetProblems) {
|
function($scope, $http, GetProblems) {
|
||||||
$scope.notifications = GetProblems;
|
$scope.notifications = GetProblems;
|
||||||
|
|
||||||
}])
|
}])
|
||||||
|
|
||||||
.directive('navbar', function() {
|
.directive('navbar', function() {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user