diff --git a/public/app/core/components/navbar/navbar.html b/public/app/core/components/navbar/navbar.html
index 41757d54cc1..37a4f2a448e 100644
--- a/public/app/core/components/navbar/navbar.html
+++ b/public/app/core/components/navbar/navbar.html
@@ -1,19 +1,16 @@
diff --git a/public/app/core/components/navbar/navbar.ts b/public/app/core/components/navbar/navbar.ts
index 9332f43542c..3bccddb652b 100644
--- a/public/app/core/components/navbar/navbar.ts
+++ b/public/app/core/components/navbar/navbar.ts
@@ -30,28 +30,5 @@ export function navbarDirective() {
};
}
-var navButtonTemplate = `
-
-`;
-
-function navButton() {
- return {
- restrict: 'E',
- template: navButtonTemplate,
- scope: {
- title: "@",
- titleUrl: "@",
- },
- link: function(scope, elem, attrs, ctrl) {
- scope.icon = attrs.icon;
- }
- };
-}
-
coreModule.directive('navbar', navbarDirective);
coreModule.directive('navButton', navButton);
diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html
index 971bb39a09c..9f8fcb99333 100644
--- a/public/app/features/dashboard/dashnav/dashnav.html
+++ b/public/app/features/dashboard/dashnav/dashnav.html
@@ -1,12 +1,10 @@
-
+
+
+ {{dashboard.title}}
+
+
diff --git a/public/sass/_old_responsive.scss b/public/sass/_old_responsive.scss
index 71bc420c4f5..899a785c19b 100644
--- a/public/sass/_old_responsive.scss
+++ b/public/sass/_old_responsive.scss
@@ -17,7 +17,7 @@
body {
padding: 0;
}
- .dashnav-dashboards-btn a {
+ .page-dashboard .navbar-page-btn {
max-width: 200px;
}
.gf-timepicker-nav-btn {
@@ -34,7 +34,7 @@
// form styles
@include media-breakpoint-up(md) {
- .dashnav-dashboards-btn a {
+ .page-dashboard .navbar-page-btn {
max-width: 180px;
}
.gf-timepicker-nav-btn {
@@ -51,7 +51,7 @@
}
@include media-breakpoint-up(lg) {
- .dashnav-dashboards-btn a {
+ .page-dashboard .navbar-page-btn {
max-width: 290px;
}
.gf-timepicker-nav-btn {
diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss
index d493dfdb5ee..b4ed999beb9 100644
--- a/public/sass/_variables.scss
+++ b/public/sass/_variables.scss
@@ -211,4 +211,4 @@ $btn-padding-y-lg: .75rem !default;
$btn-border-radius: 3px;
// sidemenu
-$side-menu-width: 15rem;
+$side-menu-width: 14rem;
diff --git a/public/sass/components/_dashboard.scss b/public/sass/components/_dashboard.scss
index 9b23484bdb4..d550cd38b1e 100644
--- a/public/sass/components/_dashboard.scss
+++ b/public/sass/components/_dashboard.scss
@@ -58,7 +58,7 @@
.row-open {
margin-top: 5px;
- left: -28px;
+ left: -30px;
position: absolute;
z-index: 100;
transition: .10s left;
diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss
index 44faa9d9112..2e0388eae07 100644
--- a/public/sass/components/_navbar.scss
+++ b/public/sass/components/_navbar.scss
@@ -56,52 +56,30 @@
background-color: $navbarLinkBackgroundActive;
}
-
-.fa.top-nav-breadcrumb-icon {
- margin: 18px 0 6px 5px;
- float: left;
- font-size: 120%;
- color: $text-color;
-}
-
-.top-nav-btn {
+.navbar-brand-btn {
display: block;
position: relative;
float: left;
margin: 0;
- font-size: 1.4em;
border-right: 1px solid $tight-form-border;
+ background-color: $navbarButtonBackground;
+ padding: 0.6rem 1.0rem 0.5rem 1rem;
.fa-caret-down {
- font-size: 55%;
- position: absolute;
- right: 8px;
- top: 23px;
- margin-right: 2px;
+ font-size: 70%;
}
- a {
- color: darken($link-color, 5%);
- background-color: $navbarButtonBackground;
- display: inline-block;
- &:hover {
- background: $navbarButtonBackgroundHighlight;
- color: $link-color;
- // border-bottom: 1px solid $blue;
- }
+ &:hover {
+ background: $navbarButtonBackgroundHighlight;
}
-}
-.top-nav-menu-btn {
- a {
- padding: 7px 20px 6px 13px;
- }
img {
width: 30px;
position: relative;
top: -2px;
}
- .top-nav-logo-background {
+
+ .navbar-brand-btn-background {
display: inline-block;
border: 1px solid $body-bg;
padding: 4px;
@@ -110,6 +88,7 @@
width: 40px;
height: 40px;
}
+
.icon-gf-grafana_wordmark {
font-size: 21px;
position: relative;
@@ -119,13 +98,28 @@
}
}
-.dashnav-dashboards-btn {
- a {
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- display: block;
- padding: 11px 17px 12px 13px;
+.navbar-page-btn {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ float: left;
+ display: block;
+ margin: 0;
+ font-size: 1.4em;
+ border-right: 1px solid $tight-form-border;
+ color: darken($link-color, 5%);
+ background-color: $navbarButtonBackground;
+ font-size: $font-size-lg;
+ padding: 1rem 0.8rem;
+
+ &:hover {
+ background: $navbarButtonBackgroundHighlight;
+ color: $link-color;
+ }
+
+ .fa-caret-down {
+ font-size: 60%;
+ padding-left: 0.2rem;
}
.fa-th-large {
@@ -141,32 +135,3 @@
}
}
-.dashboard-title {
- padding: 0 0.4rem 0 0.5rem;
- font-size: $font-size-lg;
-}
-
-.top-nav-icon {
- margin: 5px 0px 0 11px;
- line-height: 41px;
- float: left;
-}
-
-.top-nav-section {
- display: block;
- float: left;
- padding: 19px 9px 8px 0;
- font-weight: bold;
- i {
- padding-left: 8px;
- }
-}
-
-.top-nav-title {
- display: block;
- float: left;
- font-size: 17px;
- padding: 18px 10px 10px 13px;
- color: $link-color;
-}
-
diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss
index 8063bbaa2c9..5a4138a1c9f 100644
--- a/public/sass/components/_sidemenu.scss
+++ b/public/sass/components/_sidemenu.scss
@@ -30,16 +30,15 @@
min-height: calc(100% - 54px);
}
.dashboard-container {
- padding-left: $side-menu-width;
+ padding-left: $side-menu-width + 0.2rem;
}
.page-container {
margin-left: $side-menu-width;
}
- .top-nav-menu-btn {
- a {
- background-color: $page-bg;
- width: $side-menu-width;
- }
+ .navbar-brand-btn {
+ background-color: $page-bg;
+ width: $side-menu-width;
+
.icon-gf-grafana_wordmark {
display: inline-block;
}
@@ -47,9 +46,6 @@
display: none;
}
}
- .sidemenu-org {
- box-shadow: none;
- }
.search-container {
left: auto;
}
@@ -176,7 +172,7 @@
.sidemenu .fa-caret-right {
position: absolute;
top: 38%;
- right: 25px;
+ right: 6px;
font-size: 14px;
color: $link-color;
}
-
-
-
-
-