ux: testing fixed sidemenu and breadcrumbs

public/app/core/components/navbar/navbar.html

@@ -1,26 +1,26 @@
-<div class="page-nav container">
+<div class="page-nav">
+  <div class="container">
+    <div class="page-breadcrumb">
+      <div class="page-breadcrumb__item dropdown" ng-repeat="item in ctrl.model.items">
+        <a class="pointer" ng-href="{{::item.url}}" data-toggle="dropdown" ng-if="::item.items">
+          {{::item.title}}
+          <i class="page-breadcrumb__caret fa fa-caret-down"></i>
+        </a>
 
-  <div class="page-breadcrumb">
-    <div class="page-breadcrumb__item dropdown" ng-repeat="item in ctrl.model.items">
-      <a class="pointer" ng-href="{{::item.url}}" data-toggle="dropdown" ng-if="::item.items">
-        {{::item.title}}
-        <i class="page-breadcrumb__caret fa fa-caret-down"></i>
-      </a>
+        <a class="pointer" ng-href="{{::item.url}}" ng-if="::!item.items">
+          {{::item.title}}
+        </a>
 
-      <a class="pointer" ng-href="{{::item.url}}" ng-if="::!item.items">
-        {{::item.title}}
-      </a>
-
-      <ul class="dropdown-menu dropdown-menu--navbar">
-        <li ng-repeat="subItem in ::item.items">
-          <a class="pointer" ng-href="{{::subItem.url}}" ng-click="ctrl.navItemClicked(subItem, $event)">
-            {{::subItem.title}}
-          </a>
-        </li>
-      </ul>
+        <ul class="dropdown-menu dropdown-menu--navbar">
+          <li ng-repeat="subItem in ::item.items">
+            <a class="pointer" ng-href="{{::subItem.url}}" ng-click="ctrl.navItemClicked(subItem, $event)">
+              {{::subItem.title}}
+            </a>
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
 </div>
 
-
 <dashboard-search></dashboard-search>

public/app/features/plugins/partials/ds_edit.html

@@ -1,93 +1,95 @@
 <navbar model="ctrl.navModel"></navbar>
 
-<div class="page-container">
-  <div class="page-header">
-    <h1>
-      <i class="icon-gf icon-gf-datasources"></i>
-      <span ng-show="ctrl.isNew">New data source</span>
-			<span ng-hide="ctrl.isNew">{{ctrl.current.name}}</span>
-    </h1>
+<div class="scroll-canvas">
+	<div class="page-container">
+		<div class="page-header">
+			<h1>
+				<i class="icon-gf icon-gf-datasources"></i>
+				<span ng-show="ctrl.isNew">New data source</span>
+				<span ng-hide="ctrl.isNew">{{ctrl.current.name}}</span>
+			</h1>
 
-    <a class="page-header__cta btn btn-success" href="datasources/new" ng-show="ctrl.isNew">
-      <i class="fa fa-plus"></i>
-      Add data source
-    </a>
+			<a class="page-header__cta btn btn-success" href="datasources/new" ng-show="ctrl.isNew">
+				<i class="fa fa-plus"></i>
+				Add data source
+			</a>
 
-    <div class="page-header-tabs" ng-show="ctrl.hasDashboards">
-      <ul class="gf-tabs">
-        <li class="gf-tabs-item">
-          <a class="gf-tabs-link" ng-click="ctrl.tabIndex = 0" ng-class="{active: ctrl.tabIndex === 0}">
-            Config
-          </a>
-        </li>
-        <li class="gf-tabs-item">
-          <a class="gf-tabs-link" ng-click="ctrl.tabIndex = 1" ng-class="{active: ctrl.tabIndex === 1}">
-            Dashboards
-          </a>
-        </li>
-      </ul>
-    </div>
-  </div>
+			<div class="page-header-tabs" ng-show="ctrl.hasDashboards">
+				<ul class="gf-tabs">
+					<li class="gf-tabs-item">
+						<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 0" ng-class="{active: ctrl.tabIndex === 0}">
+							Config
+						</a>
+					</li>
+					<li class="gf-tabs-item">
+						<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 1" ng-class="{active: ctrl.tabIndex === 1}">
+							Dashboards
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
 
 
-  <div ng-if="ctrl.tabIndex === 0" class="tab-content">
+		<div ng-if="ctrl.tabIndex === 0" class="tab-content">
 
-    <form name="ctrl.editForm" ng-if="ctrl.current">
-      <div class="gf-form-group">
-        <div class="gf-form-inline">
-          <div class="gf-form max-width-30">
-            <span class="gf-form-label width-7">Name</span>
-            <input class="gf-form-input max-width-23" type="text" ng-model="ctrl.current.name" placeholder="name" required>
-            <info-popover offset="0px -135px" mode="right-absolute">
-              The name is used when you select the data source in panels.
-              The <em>Default</em> data source is preselected in new
-              panels.
-            </info-popover>
-          </div>
-          <gf-form-switch class="gf-form" label="Default" checked="ctrl.current.isDefault" switch-class="max-width-6"></gf-form-switch>
-        </div>
+			<form name="ctrl.editForm" ng-if="ctrl.current">
+				<div class="gf-form-group">
+					<div class="gf-form-inline">
+						<div class="gf-form max-width-30">
+							<span class="gf-form-label width-7">Name</span>
+							<input class="gf-form-input max-width-23" type="text" ng-model="ctrl.current.name" placeholder="name" required>
+							<info-popover offset="0px -135px" mode="right-absolute">
+								The name is used when you select the data source in panels.
+								The <em>Default</em> data source is preselected in new
+								panels.
+							</info-popover>
+						</div>
+						<gf-form-switch class="gf-form" label="Default" checked="ctrl.current.isDefault" switch-class="max-width-6"></gf-form-switch>
+					</div>
 
-        <div class="gf-form">
-          <span class="gf-form-label width-7">Type</span>
-          <div class="gf-form-select-wrapper max-width-23">
-            <select class="gf-form-input" ng-model="ctrl.current.type" ng-options="v.id as v.name for v in ctrl.types" ng-change="ctrl.typeChanged()"></select>
-          </div>
-        </div>
-      </div>
+					<div class="gf-form">
+						<span class="gf-form-label width-7">Type</span>
+						<div class="gf-form-select-wrapper max-width-23">
+							<select class="gf-form-input" ng-model="ctrl.current.type" ng-options="v.id as v.name for v in ctrl.types" ng-change="ctrl.typeChanged()"></select>
+						</div>
+					</div>
+				</div>
 
-      <div class="alert alert-info gf-form-group" ng-if="ctrl.datasourceMeta.state === 'alpha'">
-        This plugin is marked as being in alpha state, which means it is in early development phase and
-        updates will include breaking changes.
-      </div>
+				<div class="alert alert-info gf-form-group" ng-if="ctrl.datasourceMeta.state === 'alpha'">
+					This plugin is marked as being in alpha state, which means it is in early development phase and
+					updates will include breaking changes.
+				</div>
 
-      <rebuild-on-change property="ctrl.datasourceMeta.id">
-        <plugin-component type="datasource-config-ctrl">
-        </plugin-component>
-      </rebuild-on-change>
+				<rebuild-on-change property="ctrl.datasourceMeta.id">
+					<plugin-component type="datasource-config-ctrl">
+					</plugin-component>
+				</rebuild-on-change>
 
-      <div ng-if="ctrl.testing" class="gf-form-group">
-        <h5 ng-show="!ctrl.testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
-        <div class="alert-{{ctrl.testing.status}} alert">
-          <div class="alert-title">{{ctrl.testing.title}}</div>
-          <div ng-bind='ctrl.testing.message'></div>
-        </div>
-      </div>
+				<div ng-if="ctrl.testing" class="gf-form-group">
+					<h5 ng-show="!ctrl.testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
+					<div class="alert-{{ctrl.testing.status}} alert">
+						<div class="alert-title">{{ctrl.testing.title}}</div>
+						<div ng-bind='ctrl.testing.message'></div>
+					</div>
+				</div>
 
-      <div class="gf-form-button-row">
-        <button type="submit" class="btn btn-success" ng-show="ctrl.isNew" ng-click="ctrl.saveChanges()">Add</button>
-        <button type="submit" class="btn btn-success" ng-show="!ctrl.isNew" ng-click="ctrl.saveChanges()">Save &amp; Test</button>
-        <button type="submit" class="btn btn-danger" ng-show="!ctrl.isNew" ng-click="ctrl.delete()">
-          Delete
-        </button>
-        <a class="btn btn-link" href="datasources">Cancel</a>
-      </div>
+				<div class="gf-form-button-row">
+					<button type="submit" class="btn btn-success" ng-show="ctrl.isNew" ng-click="ctrl.saveChanges()">Add</button>
+					<button type="submit" class="btn btn-success" ng-show="!ctrl.isNew" ng-click="ctrl.saveChanges()">Save &amp; Test</button>
+					<button type="submit" class="btn btn-danger" ng-show="!ctrl.isNew" ng-click="ctrl.delete()">
+						Delete
+					</button>
+					<a class="btn btn-link" href="datasources">Cancel</a>
+				</div>
 
-    </form>
-  </div>
+			</form>
+		</div>
 
-  <div ng-if="ctrl.tabIndex === 1" class="tab-content">
-    <dashboard-import-list plugin="ctrl.datasourceMeta" datasource="ctrl.current"></dashboard-import-list>
-  </div>
+		<div ng-if="ctrl.tabIndex === 1" class="tab-content">
+			<dashboard-import-list plugin="ctrl.datasourceMeta" datasource="ctrl.current"></dashboard-import-list>
+		</div>
 
+	</div>
 </div>
 

public/app/features/plugins/partials/ds_list.html

@@ -1,51 +1,53 @@
 <navbar model="ctrl.navModel"></navbar>
 
-<div class="page-container">
-  <div class="page-header">
-    <h1>
-      <i class="icon-gf icon-gf-datasources"></i>
-      <span>Data Sources</span>
-    </h1>
+<div class="scroll-canvas">
+	<div class="page-container">
+		<div class="page-header">
+			<h1>
+				<i class="icon-gf icon-gf-datasources"></i>
+				<span>Data Sources</span>
+			</h1>
 
-    <a class="page-header__cta btn btn-success" href="datasources/new">
-      <i class="fa fa-plus"></i>
-      Add data source
-    </a>
-  </div>
+			<a class="page-header__cta btn btn-success" href="datasources/new">
+				<i class="fa fa-plus"></i>
+				Add data source
+			</a>
+		</div>
 
-  <section class="card-section" layout-mode>
-    <layout-selector></layout-selector>
+		<section class="card-section" layout-mode>
+			<layout-selector></layout-selector>
 
-    <ol class="card-list" >
-      <li class="card-item-wrapper" ng-repeat="ds in ctrl.datasources">
-        <a class="card-item" href="datasources/edit/{{ds.id}}/">
-          <div class="card-item-header">
-            <div class="card-item-type">
-              {{ds.type}}
-            </div>
-          </div>
-          <div class="card-item-body">
-            <figure class="card-item-figure">
-              <img ng-src="{{ds.typeLogoUrl}}">
-            </figure>
-            <div class="card-item-details">
-              <div class="card-item-name">
-                {{ds.name}}
-                <span ng-if="ds.isDefault">
-                  <span class="btn btn-secondary btn-mini">default</span>
-                </span>
-              </div>
-              <div class="card-item-sub-name">
-                {{ds.url}}
-              </div>
-            </div>
-          </div>
-        </a>
-      </li>
-    </ol>
-  </section>
+			<ol class="card-list" >
+				<li class="card-item-wrapper" ng-repeat="ds in ctrl.datasources">
+					<a class="card-item" href="datasources/edit/{{ds.id}}/">
+						<div class="card-item-header">
+							<div class="card-item-type">
+								{{ds.type}}
+							</div>
+						</div>
+						<div class="card-item-body">
+							<figure class="card-item-figure">
+								<img ng-src="{{ds.typeLogoUrl}}">
+							</figure>
+							<div class="card-item-details">
+								<div class="card-item-name">
+									{{ds.name}}
+									<span ng-if="ds.isDefault">
+										<span class="btn btn-secondary btn-mini">default</span>
+									</span>
+								</div>
+								<div class="card-item-sub-name">
+									{{ds.url}}
+								</div>
+							</div>
+						</div>
+					</a>
+				</li>
+			</ol>
+		</section>
 
-  <div ng-if="ctrl.datasources.length === 0">
-    <em>No data sources defined</em>
-  </div>
+		<div ng-if="ctrl.datasources.length === 0">
+			<em>No data sources defined</em>
+		</div>
+	</div>
 </div>

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;

public/sass/_variables.scss

@@ -65,7 +65,7 @@ $container-max-widths: (
   sm: 576px,
   md: 720px,
   lg: 940px,
-  xl: 1140px
+  xl: 1080px
 ) !default;
 
 // Grid columns

public/sass/base/_reboot.scss

@@ -79,6 +79,8 @@ body {
   // By default, `<body>` 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.

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;

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;
   }

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;
     }
   }
 

public/views/index.html

@@ -40,41 +40,41 @@
 			<div  class="main-view">
         <div ng-view></div>
 
-        <footer class="footer">
-          <div class="row text-center">
-            <ul>
-              <li>
-                <a href="http://docs.grafana.org" target="_blank">
-                  <i class="fa fa-file-code-o"></i>
-                  Docs
-                </a>
-              </li>
-              <li>
-                <a href="https://grafana.com/services/support" target="_blank">
-                  <i class="fa fa-support"></i>
-                  Support Plans
-                </a>
-              </li>
-              <li>
-                <a href="https://community.grafana.com/" target="_blank">
-                  <i class="fa fa-comments-o"></i>
-                  Community
-                </a>
-              </li>
-              <li>
-                <a href="https://grafana.com" target="_blank">Grafana</a>
-                <span>v[[.BuildVersion]] (commit: [[.BuildCommit]])</span>
-              </li>
-              [[if .NewGrafanaVersionExists]]
-              <li>
-                <a href="https://grafana.com/get" target="_blank" bs-tooltip="'[[.NewGrafanaVersion]]'">
-                  New version available!
-                </a>
-              </li>
-              [[end]]
-            </ul>
-          </div>
-        </footer>
+        <!-- <footer class="footer"> -->
+        <!--   <div class="row text&#45;center"> -->
+        <!--     <ul> -->
+        <!--       <li> -->
+        <!--         <a href="http://docs.grafana.org" target="_blank"> -->
+        <!--           <i class="fa fa&#45;file&#45;code&#45;o"></i> -->
+        <!--           Docs -->
+        <!--         </a> -->
+        <!--       </li> -->
+        <!--       <li> -->
+        <!--         <a href="https://grafana.com/services/support" target="_blank"> -->
+        <!--           <i class="fa fa&#45;support"></i> -->
+        <!--           Support Plans -->
+        <!--         </a> -->
+        <!--       </li> -->
+        <!--       <li> -->
+        <!--         <a href="https://community.grafana.com/" target="_blank"> -->
+        <!--           <i class="fa fa&#45;comments&#45;o"></i> -->
+        <!--           Community -->
+        <!--         </a> -->
+        <!--       </li> -->
+        <!--       <li> -->
+        <!--         <a href="https://grafana.com" target="_blank">Grafana</a> -->
+        <!--         <span>v[[.BuildVersion]] (commit: [[.BuildCommit]])</span> -->
+        <!--       </li> -->
+        <!--       [[if .NewGrafanaVersionExists]] -->
+        <!--       <li> -->
+        <!--         <a href="https://grafana.com/get" target="_blank" bs&#45;tooltip="'[[.NewGrafanaVersion]]'"> -->
+        <!--           New version available! -->
+        <!--         </a> -->
+        <!--       </li> -->
+        <!--       [[end]] -->
+        <!--     </ul> -->
+        <!--   </div> -->
+        <!-- </footer> -->
       </div>
     </grafana-app>