[#64040] Modifications sur navbar.
This commit is contained in:
Hugo Soucy
parent
5538b3325a
commit
e8054f5c91
@ -1,63 +1,180 @@
|
||||
nav#navbar {
|
||||
top: 0%;
|
||||
margin-left: 300px;
|
||||
background-color: #353d48;
|
||||
border-radius: 0px;
|
||||
border: none;
|
||||
height: 82px;
|
||||
min-height: 82px;
|
||||
margin-bottom: 0px;
|
||||
.navbar-wrapper {
|
||||
border-bottom:1px solid;
|
||||
@extend %colorBorderThin;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
a {@extend %colorLink;}
|
||||
|
||||
&.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; }
|
||||
nav#navbar .navbar-nav > li > a { padding: 0px 30px; line-height: 80px; font-size: 1.5em; }
|
||||
nav#navbar .navbar-nav > li > form div {
|
||||
line-height: 55px;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
nav#navbar .navbar-nav > li > form input {
|
||||
height: 60px;
|
||||
}
|
||||
/* #navbar { */
|
||||
/* border-radius: 0px; */
|
||||
/* border: none; */
|
||||
/* height: 82px; */
|
||||
/* min-height: 82px; */
|
||||
/* margin-bottom: 0px; */
|
||||
/* } */
|
||||
|
||||
/* #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 {
|
||||
padding-left: 0px;
|
||||
}
|
||||
/* #navbar div.navbar-collapse { */
|
||||
/* padding-left: 0px; */
|
||||
/* } */
|
||||
|
||||
form#search input {
|
||||
border: none;
|
||||
background-color: #353d48;
|
||||
font-size: 1.5em;
|
||||
color: #aeb5bf;
|
||||
width: 400px;
|
||||
}
|
||||
/* #search input { */
|
||||
/* border: none; */
|
||||
/* background-color: #353d48; */
|
||||
/* font-size: 1.5em; */
|
||||
/* color: #aeb5bf; */
|
||||
/* width: 400px; */
|
||||
/* } */
|
||||
|
||||
|
||||
a#toggle-sidebar .fa-chevron-left {
|
||||
font-size: 0.5em;
|
||||
vertical-align: super;
|
||||
}
|
||||
/* a#toggle-sidebar .fa-chevron-left { */
|
||||
/* font-size: 0.5em; */
|
||||
/* vertical-align: super; */
|
||||
/* } */
|
||||
|
||||
|
||||
a#search i,
|
||||
a#settings i,
|
||||
a#notifications i,
|
||||
a#toggle-sidebar i {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
/* #search i, */
|
||||
/* #settings i, */
|
||||
/* #notifications i, */
|
||||
/* #toggle-sidebar i { */
|
||||
/* font-size: 1.5em; */
|
||||
/* } */
|
||||
|
||||
|
||||
nav#navbar li {
|
||||
border-color: #252b37;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
}
|
||||
/* #navbar li { */
|
||||
/* border-color: #252b37; */
|
||||
/* border-style: solid; */
|
||||
/* border-width: 1px; */
|
||||
/* } */
|
||||
|
||||
nav#navbar li a#search {
|
||||
float: left;
|
||||
}
|
||||
/* #navbar li #search { */
|
||||
/* float: left; */
|
||||
/* } */
|
||||
|
||||
@ -1,39 +1,84 @@
|
||||
<nav ng-app="adagios.navbar" id="navbar" class="navbar navbar-default navbar-inverse" role="navigation" ng-controller="NavBarCtrl">
|
||||
<div class="container-fluid">
|
||||
<!-- Brand and toggle get grouped for better mobile display -->
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<nav ng-app="adagios.navbar" id="navbar" class="navbar layout__flexrow" role="navigation" ng-controller="NavBarCtrl">
|
||||
<ul class="navbar__list navbar__list--left">
|
||||
<li class="navbar__item navbar__toggle-sidebar">
|
||||
<button class="navbar__button"
|
||||
type="button"
|
||||
data-toggle="collapse"
|
||||
data-target="#sidebarWrapper"
|
||||
aria-expanded="false"
|
||||
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>
|
||||
</div>
|
||||
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
||||
<ul class="nav navbar-nav">
|
||||
<li>
|
||||
<a href="#" id="toggle-sidebar">
|
||||
<i class="fa fa-chevron-left"></i>
|
||||
<i class="fa fa-align-justify"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="#" id="notifications"><i class="fa fa-bell"></i>{{ notifications }}</a></li>
|
||||
</ul>
|
||||
<div class="navbar__panel--fromleft collapse" id="notificationsPanel">
|
||||
<div class="tabpanel">
|
||||
<ul role="tablist">
|
||||
<li role="presentation" class="tablist__item active">
|
||||
<a href="#openProblems"
|
||||
class="tabpanel__tab"
|
||||
aria-controls="openProblems"
|
||||
role="tab"
|
||||
data-toggle="tab"
|
||||
data-openproblems="27">Open problems
|
||||
</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">
|
||||
<li>
|
||||
<a href="#" id="search"><i class="fa fa-search"></i></a>
|
||||
<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 class="tab-content">
|
||||
<div role="tabpanel" class="tab-pane active" id="openProblems">Open problems</div>
|
||||
<div role="tabpanel" class="tab-pane" id="allProblems">All problems</div>
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<li><a href="#" id="settings"><i class="fa fa-sliders fa-rotate-90"></i></a></li>
|
||||
</ul>
|
||||
</div><!-- /.navbar-collapse -->
|
||||
</div><!-- /.container-fluid -->
|
||||
</nav>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<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',
|
||||
function($scope, $http, GetProblems) {
|
||||
$scope.notifications = GetProblems;
|
||||
|
||||
}])
|
||||
|
||||
.directive('navbar', function() {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user