IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

poc(new nav): beginings....

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-01-14 21:20:56 +01:00
parent 2ccc19185c
commit cd0256d40d
2 changed files with 96 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
public/app/features/dashboard/partials/dashboardTopNav.html
View File

@ -3,12 +3,16 @@
<div class="container-fluid">
<div class="top-nav">
<a class="pointer top-nav-menu-btn" ng-if="!contextSrv.sidemenu" ng-click="contextSrv.toggleSideMenu()">
<img class="logo-icon" src="img/fav32.png"></img>
<i class="fa fa-bars"></i>
</a>
<div class="top-nav-btn top-nav-menu-btn">
<a class="pointer" ng-click="openSearch()">
<span class="top-nav-logo-background">
<img class="logo-icon" src="img/fav32.png"></img>
</span>
<i class="fa fa-caret-down"></i>
</a>
</div>
<div class="top-nav-dashboards-btn">
<div class="top-nav-btn top-nav-dashboards-btn">
<a class="pointer" ng-click="openSearch()">
<i class="fa fa-th-large"></i>
<span class="dashboard-title">{{dashboard.title}}</span>

147
public/less/navbar.less
View File

@ -20,77 +20,104 @@
color: @textColor;
}
.top-nav-menu-btn {
border: 1px solid @bodyBackground;
border-radius: 50%;
background: @iconContainerBackground;
display: block;
position: relative;
float: left;
width: 30px;
height: 30px;
padding: 4px;
margin: 6px 6px 3px 9px;
.fa {
color: @textColor;
width: 30px;
height: 30px;
left: 9px;
top: 7px;
font-size: 150%;
opacity: 0;
position: absolute;
transition: opacity .20s ease-in-out;
}
img {
width: 30px;
position: absolute;
opacity: 1;
transition: opacity .20s ease-in-out;
}
&:hover {
.fa {
opacity: .7;
}
img {
opacity: 0;
}
}
}
// .top-nav-menu-btn {
// float: left;
// .top-nav-menu-circle {
// border: 1px solid @bodyBackground;
// margin: 6px 6px 3px 9px;
// display: inline-block;
// padding: 4px;
// border-radius: 50%;
// background: @iconContainerBackground;
// width: 30px;
// height: 30px;
// float: left;
// }
// .fa-bars {
// color: @textColor;
// width: 30px;
// height: 30px;
// left: 9px;
// top: 7px;
// font-size: 150%;
// opacity: 0;
// position: absolute;
// transition: opacity .20s ease-in-out;
// }
// .fa-caret-down {
// position: relative;
// font-size: 80%;
// }
// img {
// width: 30px;
// position: absolute;
// opacity: 1;
// transition: opacity .20s ease-in-out;
// }
// &:hover {
// .fa {
// opacity: .7;
// }
// img {
// opacity: 0;
// }
// }
// }
.top-nav-dashboards-btn {
.top-nav-btn {
display: block;
float: left;
margin: 9px 18px 5px 14px;
border-radius: 3px;
margin: 0;
font-size: 1.4em;
color: #a2a2a2;
border: @grafanaTriggerBorder;
a {
background-color: @grafanaTargetFuncBackground;
display: inline-block;
padding: 5px 15px 5px 10px;
border-radius: 3px;
color: #a2a2a2;
&:hover {
background: @grafanaTargetFuncBackground;
.fa {
color: @linkColor;
}
}
}
.fa-th-large {
position: relative;
top: 2px;
}
border-right: 1px solid black;
.fa-caret-down {
font-size: 60%;
position: relative;
top: 4px;
}
a {
background-color: darken(@grafanaTargetFuncBackground, 2%);
display: inline-block;
color: #a2a2a2;
&:hover {
background: @grafanaTargetFuncBackground;
color: @linkColor;
border-bottom: 1px solid @blue;
}
}
}
.top-nav-menu-btn {
a {
padding: 6px 15px 6px 10px;
}
img {
width: 30px;
position: relative;
}
.top-nav-logo-background {
display: inline-block;
border: 1px solid @bodyBackground;
padding: 4px;
border-radius: 50%;
background: @iconContainerBackground;
width: 30px;
height: 30px;
}
}
.top-nav-dashboards-btn {
a {
padding: 14px 15px 14px 10px;
}
.fa-th-large {
position: relative;
top: 2px;
}
}
.dashboard-title {