From e81cb9c929c96d7b440f0b2bc21f409a9f4f0776 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 14 Aug 2017 22:44:01 +0200 Subject: [PATCH] ux: testing fixed sidemenu and breadcrumbs --- public/app/core/components/navbar/navbar.html | 38 ++--- .../features/plugins/partials/ds_edit.html | 154 +++++++++--------- .../features/plugins/partials/ds_list.html | 90 +++++----- public/sass/_variables.dark.scss | 2 +- public/sass/_variables.scss | 2 +- public/sass/base/_reboot.scss | 2 + public/sass/components/_gf-form.scss | 1 + public/sass/components/_navbar.scss | 8 +- public/sass/layout/_page.scss | 33 ++-- public/views/index.html | 70 ++++---- 10 files changed, 207 insertions(+), 193 deletions(-) diff --git a/public/app/core/components/navbar/navbar.html b/public/app/core/components/navbar/navbar.html index 0a3b8166125..395b188538e 100644 --- a/public/app/core/components/navbar/navbar.html +++ b/public/app/core/components/navbar/navbar.html @@ -1,26 +1,26 @@ -
+
+
+
+
+ + {{::item.title}} + + -
-
- - {{::item.title}} - - + + {{::item.title}} + - - {{::item.title}} - - - + +
- diff --git a/public/app/features/plugins/partials/ds_edit.html b/public/app/features/plugins/partials/ds_edit.html index 5c992713ae5..1646dc49a78 100644 --- a/public/app/features/plugins/partials/ds_edit.html +++ b/public/app/features/plugins/partials/ds_edit.html @@ -1,93 +1,95 @@ -
-
-

- - New data source - {{ctrl.current.name}} -

+
+
+
+

+ + New data source + {{ctrl.current.name}} +

- - - Add data source - + + + Add data source + -
- -
-
+
+ +
+
-
+
-
-
-
-
- Name - - - The name is used when you select the data source in panels. - The Default data source is preselected in new - panels. - -
- -
+ +
+
+
+ Name + + + The name is used when you select the data source in panels. + The Default data source is preselected in new + panels. + +
+ +
-
- Type -
- -
-
-
+
+ Type +
+ +
+
+
-
- This plugin is marked as being in alpha state, which means it is in early development phase and - updates will include breaking changes. -
+
+ This plugin is marked as being in alpha state, which means it is in early development phase and + updates will include breaking changes. +
- - - - + + + + -
-
Testing....
-
-
{{ctrl.testing.title}}
-
-
-
+
+
Testing....
+
+
{{ctrl.testing.title}}
+
+
+
-
- - - - Cancel -
+
+ + + + Cancel +
-
-
+ +
-
- -
+
+ +
+
diff --git a/public/app/features/plugins/partials/ds_list.html b/public/app/features/plugins/partials/ds_list.html index d1b3949ce5a..781f2403631 100644 --- a/public/app/features/plugins/partials/ds_list.html +++ b/public/app/features/plugins/partials/ds_list.html @@ -1,51 +1,53 @@ -
-
-

- - Data Sources -

+
+
+
+

+ + Data Sources +

- - - Add data source - -
+ + + Add data source + +
-
- +
+ -
    -
  1. - -
    -
    - {{ds.type}} -
    -
    -
    -
    - -
    -
    -
    - {{ds.name}} - - default - -
    -
    - {{ds.url}} -
    -
    -
    -     -
    2. -
-
+
    +
  1. + +
    +
    + {{ds.type}} +
    +
    +
    +
    + +
    +
    +
    + {{ds.name}} + + default + +
    +
    + {{ds.url}} +
    +
    +
    +     +
    2. +
+
-
- No data sources defined -
+
+ No data sources defined +
+
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 5619b4d95a7..8179d105690 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -162,7 +162,7 @@ $btn-drag-image: '../img/grab_dark.svg'; // Forms // ------------------------- -$input-bg: $dark-4; +$input-bg: $black; $input-bg-disabled: $dark-3; $input-color: $gray-4; diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index b4b123d6823..c80bbf9148f 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -65,7 +65,7 @@ $container-max-widths: ( sm: 576px, md: 720px, lg: 940px, - xl: 1140px + xl: 1080px ) !default; // Grid columns diff --git a/public/sass/base/_reboot.scss b/public/sass/base/_reboot.scss index 806ba2aa43d..bc4ff489712 100644 --- a/public/sass/base/_reboot.scss +++ b/public/sass/base/_reboot.scss @@ -79,6 +79,8 @@ body { // By default, `` has no `background-color` so we set one as a best practice. background-color: $body-bg; height: 100%; + width: 100%; + position: absolute; } // Suppress the focus outline on elements that cannot be accessed via keyboard. diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index b04d2e4c88f..c8d5f4d7315 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -53,6 +53,7 @@ $gf-form-margin: 0.25rem; padding: $input-padding-y $input-padding-x; margin-right: $gf-form-margin; flex-shrink: 0; + font-weight: $font-weight-semi-bold; background-color: $input-label-bg; display: block; diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index c11a135aaac..357b2be3ce0 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -57,9 +57,7 @@ .navbar-brand-btn { display: block; - position: relative; - float: left; - margin: 0; + margin-bottom: 3rem; background-color: $side-menu-bg; padding: 0.4rem 1.0rem 0.4rem 1rem; min-height: $navbarHeight; @@ -68,10 +66,6 @@ font-size: 70%; } - .fa-chevron-left{ - display: none; - } - &:hover { background: $navbarButtonBackgroundHighlight; } diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index a383d17a4d6..56f1df5ecf1 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -1,21 +1,29 @@ .grafana-app { - height: 100%; display: flex; align-items: stretch; + position: absolute; width: 100%; + height: 100%; + top: 0; + left: 0; } .main-view { + position: relative; flex-grow: 1; - background: linear-gradient(180deg,#282020 0,#1e0f05); + background: inear-gradient(180deg, #1b1d25 0, #210d0d); } .page-container { @extend .container; + padding: $spacer $spacer $spacer $spacer*3; +} - padding: $spacer; - min-height: calc(100% - 54px); - padding-bottom: $spacer * 5; +.scroll-canvas { + position: absolute; + width: 100%; + height: calc(100% - 54px); + overflow: scroll; } .page-header-inner { @@ -96,15 +104,20 @@ margin-bottom: $spacer*2; } +$breadcrumb-hover-hl: #111; +$page-nav-bg: black; + +// .page-nav { +// background: $page-nav-bg; +// } + .page-breadcrumb { display: flex; - margin-bottom: $spacer; + padding: 0 $spacer; } -$breadcrumb-hover-hl: #111; - .page-breadcrumb__item { - background: black; + background: $page-nav-bg; > a { color: $text-color-weak; @@ -124,7 +137,7 @@ $breadcrumb-hover-hl: #111; border-right-width: 0; border-left-width: 41px; z-index: 2; - border-left-color: black; + border-left-color: $page-nav-bg; } } diff --git a/public/views/index.html b/public/views/index.html index 411481b2149..ad47baa3465 100644 --- a/public/views/index.html +++ b/public/views/index.html @@ -40,41 +40,41 @@
- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +