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="container-fluid">
<div class="top-nav"> <div class="top-nav">
<a class="pointer top-nav-menu-btn" ng-if="!contextSrv.sidemenu" ng-click="contextSrv.toggleSideMenu()"> <div class="top-nav-btn top-nav-menu-btn">
<img class="logo-icon" src="img/fav32.png"></img> <a class="pointer" ng-click="openSearch()">
<i class="fa fa-bars"></i> <span class="top-nav-logo-background">
</a> <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()"> <a class="pointer" ng-click="openSearch()">
<i class="fa fa-th-large"></i> <i class="fa fa-th-large"></i>
<span class="dashboard-title">{{dashboard.title}}</span> <span class="dashboard-title">{{dashboard.title}}</span>

147
public/less/navbar.less
View File

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