From fcba5a6eeb58411a5a11f36db73448ec665b824d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 30 Jan 2015 10:25:10 +0100 Subject: [PATCH] More progress on new design --- src/app/directives/all.js | 1 - src/app/partials/dashboard_topnav.html | 2 +- src/app/partials/sidemenu.html | 27 +++--- src/css/less/grafana.less | 3 +- src/css/less/p_pro.less | 95 --------------------- src/css/less/sidemenu.less | 114 +++++++++++++++++++++++++ src/views/index.html | 4 +- 7 files changed, 133 insertions(+), 113 deletions(-) create mode 100644 src/css/less/sidemenu.less diff --git a/src/app/directives/all.js b/src/app/directives/all.js index b07e3812db5..879b61e2512 100644 --- a/src/app/directives/all.js +++ b/src/app/directives/all.js @@ -16,5 +16,4 @@ define([ './graphiteSegment', './grafanaVersionCheck', './dropdown.typeahead', - './navHeader', ], function () {}); diff --git a/src/app/partials/dashboard_topnav.html b/src/app/partials/dashboard_topnav.html index e695f306089..e8edf4eea4f 100644 --- a/src/app/partials/dashboard_topnav.html +++ b/src/app/partials/dashboard_topnav.html @@ -5,7 +5,7 @@
- + menu diff --git a/src/app/partials/sidemenu.html b/src/app/partials/sidemenu.html index bb0a93092a6..aa97fd89c5a 100644 --- a/src/app/partials/sidemenu.html +++ b/src/app/partials/sidemenu.html @@ -1,21 +1,11 @@
+ +
  • + + f + + {{grafana.user.login}} + + +
    • diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index 6eaf0ad9a67..dff99edc2d3 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -9,6 +9,7 @@ @import "forms.less"; @import "singlestat.less"; @import "tightform.less"; +@import "sidemenu.less"; .row-control-inner { padding:0px; @@ -62,7 +63,7 @@ float: left; padding: 15px 13px 13px 14px;; position: relative; - background: @black; + border-right: 2px solid black; font-weight: bold; font-size: 90%; span { diff --git a/src/css/less/p_pro.less b/src/css/less/p_pro.less index 678c2fba064..1611f294e4f 100644 --- a/src/css/less/p_pro.less +++ b/src/css/less/p_pro.less @@ -1,98 +1,3 @@ -.pro-sidemenu { - display: none; - a:focus { - text-decoration: none; - } -} - -.pro-sidemenu-open { - .pro-sidemenu { - display: block; - position: absolute; - top: 0; - left: 0; - width: 200px; - background: @bodyBackground; - border-right: 2px solid black; - min-height: 100%; - z-index: 101; - } - - .dashboard-notice { - margin-left: 200px; - width: auto; - } - - .pro-main-view { - padding-left: 200px; - } - - .panel-fullscreen { - left: 200px; - } -} - -.sidemenu { - list-style: none; - background: @grafanaPanelBackground; - margin: 0; - padding: 0; -} - -.sidemenu-links { - margin: 0; - padding: 5px 0; - list-style: none; - background: @grafanaTargetFuncBackground; - li { - display: block; - } -} - -.sidemenu-link { - display: block; - padding: 6px 0 6px 30px; - font-size: 15px; - color: @gray; - i { - padding-right: 15px; - } - &.active { - color: white; - font-weight: bold; - } -} - -.sidemenu-user { - padding: 8px 10px 7px 15px; - display: block; - width: 170px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - .gravatar-missing { - display: none; - } - .gravatar-email { - padding-left: 4px; - } - img { - width: 35px; - padding-right: 10px; - } - border-bottom: 1px solid black; -} - -.sidemenu-item { - font-size: 17px; - padding: 14px 10px 14px 20px; - display: block; - i { - padding-right: 15px; - } - border-bottom: 1px solid black; -} - .login-form { width: 50%; diff --git a/src/css/less/sidemenu.less b/src/css/less/sidemenu.less new file mode 100644 index 00000000000..2634c431398 --- /dev/null +++ b/src/css/less/sidemenu.less @@ -0,0 +1,114 @@ +.sidemenu-container { + display: none; + a:focus { + text-decoration: none; + } +} + +.sidemenu-open { + .sidemenu-container { + display: block; + position: absolute; + top: 0; + left: 0; + width: 200px; + background: @bodyBackground; + border-right: 2px solid black; + min-height: 100%; + z-index: 101; + } + + .dashboard-notice { + margin-left: 200px; + width: auto; + } + + .pro-main-view { + padding-left: 200px; + } + + .panel-fullscreen { + left: 200px; + } +} + +.sidemenu { + list-style: none; + background: @grafanaPanelBackground; + margin: 0; + padding: 0; +} + +.sidemenu-links { + margin: 0; + padding: 5px 0; + list-style: none; + background: @grafanaTargetFuncBackground; + li { + display: block; + } +} + +.sidemenu-link { + display: block; + padding: 6px 0 6px 30px; + font-size: 15px; + color: @gray; + i { + padding-right: 15px; + } + &.active { + color: white; + font-weight: bold; + } +} + +.sidemenu-user { + padding: 8px 10px 7px 15px; + display: block; + width: 170px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + .gravatar-missing { + display: none; + } + .gravatar-email { + padding-left: 4px; + } + img { + width: 35px; + padding-right: 10px; + } + border-bottom: 1px solid black; +} + +.sidemenu-item { + font-size: 17px; + padding: 14px 10px 14px 20px; + display: block; + i { + padding-right: 15px; + } + border-bottom: 1px solid black; +} + +.sidemenu-logo-container { + background: @grafanaPanelBackground; + text-align: center; + border-bottom: 2px solid black; + img { + display: inline-block; + width: 102px; + padding: 6px 0px 7px 11px; + } +} + +.sidemenu-toggle { + float: right; + display: block; + font-size: 200%; + padding: 11px 8px 11px 8px; + background: @grafanaTargetFuncBackground; +} + diff --git a/src/views/index.html b/src/views/index.html index 34cfe0c7bbb..52458331966 100644 --- a/src/views/index.html +++ b/src/views/index.html @@ -27,9 +27,9 @@ -
    +
    -