From f02be0251b735399339f358ece33d016a0b200f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 14 Aug 2017 12:26:24 +0200
Subject: [PATCH] ux: use flexbox for sidenav, put logo in sidenav

---
 public/app/core/components/navbar/navbar.html |   5 -
 .../core/components/sidemenu/sidemenu.html    | 134 ++++++++--------
 .../features/plugins/partials/ds_list.html    |   3 -
 public/sass/components/_sidemenu.scss         |  37 +----
 public/sass/layout/_page.scss                 |   8 +-
 public/views/index.html                       | 145 +++++++++---------
 6 files changed, 151 insertions(+), 181 deletions(-)

diff --git a/public/app/core/components/navbar/navbar.html b/public/app/core/components/navbar/navbar.html
index 1294fefddca..d2543b91868 100644
--- a/public/app/core/components/navbar/navbar.html
+++ b/public/app/core/components/navbar/navbar.html
@@ -1,9 +1,4 @@
 <div class="navbar-inner">
-	<a class="navbar-brand-btn pointer" ng-click="ctrl.contextSrv.toggleSideMenu()">
-		<span class="navbar-brand-btn-background">
-			<img src="public/img/grafana_icon.svg"></img>
-		</span>
-	</a>
 
 	<div ng-if="::!ctrl.hasMenu">
 		<a href="{{::ctrl.section.url}}" class="navbar-page-btn">
diff --git a/public/app/core/components/sidemenu/sidemenu.html b/public/app/core/components/sidemenu/sidemenu.html
index 18e65c8c567..bc22d6cfb4e 100644
--- a/public/app/core/components/sidemenu/sidemenu.html
+++ b/public/app/core/components/sidemenu/sidemenu.html
@@ -1,71 +1,77 @@
+
+<a class="navbar-brand-btn pointer" ng-click="ctrl.contextSrv.toggleSideMenu()">
+  <span class="navbar-brand-btn-background">
+    <img src="public/img/grafana_icon.svg"></img>
+  </span>
+</a>
+
 <ul class="sidemenu">
+  <li>
+    <a class="sidemenu-item" ng-click="ctrl.search()">
+      <span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-search"></i></span>
+    </a>
+  </li>
 
-	<li>
-		<a class="sidemenu-item" ng-click="ctrl.search()">
-			<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-search"></i></span>
-		</a>
-	</li>
+  <li ng-repeat="item in ::ctrl.mainLinks" class="dropdown">
+    <a href="{{::item.url}}" class="sidemenu-item" target="{{::item.target}}">
+      <span class="icon-circle sidemenu-icon">
+        <i class="{{::item.icon}}" ng-show="::item.icon"></i>
+        <img ng-src="{{::item.img}}" ng-show="::item.img">
+      </span>
+    </a>
+    <ul class="dropdown-menu dropdown-menu--sidemenu" role="menu" ng-if="::item.children">
+      <li class="side-menu-header">
+        <span class="sidemenu-item-text">{{::item.text}}</span>
+      </li>
+      <li ng-repeat="child in ::item.children" ng-class="{divider: child.divider}">
+        <a href="{{::child.url}}">
+          <i class="{{::child.icon}}" ng-show="::child.icon"></i>
+          {{::child.text}}
+        </a>
+      </li>
+    </ul>
+  </li>
 
-	<li ng-repeat="item in ::ctrl.mainLinks" class="dropdown">
-		<a href="{{::item.url}}" class="sidemenu-item" target="{{::item.target}}">
-			<span class="icon-circle sidemenu-icon">
-				<i class="{{::item.icon}}" ng-show="::item.icon"></i>
-				<img ng-src="{{::item.img}}" ng-show="::item.img">
-			</span>
-		</a>
-		<ul class="dropdown-menu dropdown-menu--sidemenu" role="menu" ng-if="::item.children">
-			<li class="side-menu-header">
-				<span class="sidemenu-item-text">{{::item.text}}</span>
-			</li>
-			<li ng-repeat="child in ::item.children" ng-class="{divider: child.divider}">
-				<a href="{{::child.url}}">
-					<i class="{{::child.icon}}" ng-show="::child.icon"></i>
-					{{::child.text}}
-				</a>
-			</li>
-		</ul>
-	</li>
+  <li ng-show="::!ctrl.isSignedIn">
+    <a href="{{ctrl.loginUrl}}" class="sidemenu-item" target="_self">
+      <span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-sign-in"></i></span>
+      <span class="sidemenu-item-text">Sign in</span>
+    </a>
+  </li>
 
-	<li ng-show="::!ctrl.isSignedIn">
-		<a href="{{ctrl.loginUrl}}" class="sidemenu-item" target="_self">
-			<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-sign-in"></i></span>
-			<span class="sidemenu-item-text">Sign in</span>
-		</a>
-	</li>
-
-	<li class="sidemenu-org-section" ng-if="::ctrl.isSignedIn" class="dropdown">
-		<a class="sidemenu-item" href="profile">
-			<span class="icon-circle sidemenu-icon sidemenu-org-avatar">
-				<img ng-src="{{::ctrl.user.gravatarUrl}}">
-				<span class="sidemenu-org-avatar--missing">
-					<i class="fa fa-fw fa-user"></i>
-				</span>
-			</div>
-		</a>
-		<ul class="dropdown-menu dropdown-menu--sidemenu dropup" role="menu">
-			<li class="side-menu-header">
-				<span class="sidemenu-org-user sidemenu-item-text">{{::ctrl.user.name}}</span>
-				<span class="sidemenu-org-name sidemenu-item-text">{{::ctrl.user.orgName}}</span>
-			</li>
-			<li ng-repeat="menuItem in ctrl.orgMenu" ng-class="::menuItem.cssClass">
-				<span ng-show="::menuItem.section">{{::menuItem.section}}</span>
-				<a href="{{::menuItem.url}}" ng-show="::menuItem.url" target="{{::menuItem.target}}">
-					<i class="{{::menuItem.icon}}" ng-show="::menuItem.icon"></i>
-					{{::menuItem.text}}
-				</a>
-			</li>
-			<li ng-show="ctrl.orgs.length > ctrl.maxShownOrgs" style="margin-left: 10px;width: 90%">
-				<span class="sidemenu-item-text">Max shown : {{::ctrl.maxShownOrgs}}</span>
-				<input ng-model="::ctrl.orgFilter" style="padding-left: 5px" type="text" ng-change="::ctrl.loadOrgsItems();" class="gf-input-small width-12" placeholder="Filter">
-			</li>
-			<li ng-repeat="orgItem in ctrl.orgItems" ng-class="::orgItem.cssClass">
-				<a href="{{::orgItem.url}}" ng-show="::orgItem.url" target="{{::orgItem.target}}">
-					<i class="{{::orgItem.icon}}" ng-show="::orgItem.icon"></i>
-					{{::orgItem.text}}
-				</a>
-			</li>
-		</ul>
-	</li>
+  <li class="sidemenu-org-section" ng-if="::ctrl.isSignedIn" class="dropdown">
+    <a class="sidemenu-item" href="profile">
+      <span class="icon-circle sidemenu-icon sidemenu-org-avatar">
+        <img ng-src="{{::ctrl.user.gravatarUrl}}">
+        <span class="sidemenu-org-avatar--missing">
+          <i class="fa fa-fw fa-user"></i>
+        </span>
+        </div>
+    </a>
+    <ul class="dropdown-menu dropdown-menu--sidemenu dropup" role="menu">
+      <li class="side-menu-header">
+        <span class="sidemenu-org-user sidemenu-item-text">{{::ctrl.user.name}}</span>
+        <span class="sidemenu-org-name sidemenu-item-text">{{::ctrl.user.orgName}}</span>
+      </li>
+      <li ng-repeat="menuItem in ctrl.orgMenu" ng-class="::menuItem.cssClass">
+        <span ng-show="::menuItem.section">{{::menuItem.section}}</span>
+        <a href="{{::menuItem.url}}" ng-show="::menuItem.url" target="{{::menuItem.target}}">
+          <i class="{{::menuItem.icon}}" ng-show="::menuItem.icon"></i>
+          {{::menuItem.text}}
+        </a>
+      </li>
+      <li ng-show="ctrl.orgs.length > ctrl.maxShownOrgs" style="margin-left: 10px;width: 90%">
+        <span class="sidemenu-item-text">Max shown : {{::ctrl.maxShownOrgs}}</span>
+        <input ng-model="::ctrl.orgFilter" style="padding-left: 5px" type="text" ng-change="::ctrl.loadOrgsItems();" class="gf-input-small width-12" placeholder="Filter">
+      </li>
+      <li ng-repeat="orgItem in ctrl.orgItems" ng-class="::orgItem.cssClass">
+        <a href="{{::orgItem.url}}" ng-show="::orgItem.url" target="{{::orgItem.target}}">
+          <i class="{{::orgItem.icon}}" ng-show="::orgItem.icon"></i>
+          {{::orgItem.text}}
+        </a>
+      </li>
+    </ul>
+  </li>
 
 </ul>
 
diff --git a/public/app/features/plugins/partials/ds_list.html b/public/app/features/plugins/partials/ds_list.html
index f6748b37d61..2a8f728346e 100644
--- a/public/app/features/plugins/partials/ds_list.html
+++ b/public/app/features/plugins/partials/ds_list.html
@@ -1,5 +1,3 @@
-<navbar model="ctrl.navModel"></navbar>
-
 <div class="page-container">
 	<div class="page-header">
 		<h1>Data Sources</h1>
@@ -44,5 +42,4 @@
 	<div ng-if="ctrl.datasources.length === 0">
 		<em>No data sources defined</em>
 	</div>
-
 </div>
diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss
index f269cae82dd..a1347bc2633 100644
--- a/public/sass/components/_sidemenu.scss
+++ b/public/sass/components/_sidemenu.scss
@@ -1,47 +1,16 @@
-.sidemenu-canvas {
-  position: relative;
-}
 
 .sidemenu-wrapper {
-  position: absolute;
-  top: 52px;
-  left: 0;
-  //border-top: 1px solid $tight-form-border;
+  display: flex;
+  flex-direction: column;
   width: $side-menu-width;
   background-color: $side-menu-bg;
-  z-index: 1000;
-  opacity: 0;
-  visibility: hidden;
+  z-index: 1;
 
   a:focus {
     text-decoration: none;
   }
 }
 
-.sidemenu-open {
-  .sidemenu-wrapper {
-    visibility: visible;
-    //transform: translate3d(0, 0, 0);
-    opacity: 1;
-    transition: opacity 0.3s;
-  }
-}
-
-.sidemenu-pinned {
-  .sidemenu-wrapper {
-    min-height: calc(100% - 54px);
-  }
-  .dashboard-container {
-    padding-left: $side-menu-width + 8px;
-  }
-  .page-container {
-    margin-left: $side-menu-width;
-  }
-  .search-container {
-    left: $side-menu-width;
-  }
-}
-
 .sidemenu {
   list-style: none;
   margin: 0;
diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss
index 5702a1aa260..33a62e8fbc5 100644
--- a/public/sass/layout/_page.scss
+++ b/public/sass/layout/_page.scss
@@ -1,16 +1,18 @@
 .grafana-app {
-  display: block;
   height: 100%;
+  display: flex;
+  align-items: stretch;
+  width: 100%;
 }
 
 .main-view {
-  // height: 100%; REMOVED FOR FOOTER TRW
+  flex-grow: 1;
 }
 
 .page-container {
+  @extend .container;
   background-color: $page-bg;
   padding: ($spacer * 2) ($spacer * 4);
-  max-width: 1060px;
   min-height: calc(100% - 54px);
   padding-bottom: $spacer * 5;
   background-image: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%)
diff --git a/public/views/index.html b/public/views/index.html
index b3c504740da..411481b2149 100644
--- a/public/views/index.html
+++ b/public/views/index.html
@@ -25,9 +25,7 @@
 	<body ng-cloak>
 		<grafana-app class="grafana-app">
 
-			<aside class="sidemenu-wrapper">
-				<sidemenu ng-if="contextSrv.sidemenu"></sidemenu>
-			</aside>
+      <sidemenu class="sidemenu-wrapper"></sidemenu>
 
 			<div class="page-alert-list">
 				<div ng-repeat='alert in dashAlerts.list' class="alert-{{alert.severity}} alert">
@@ -39,77 +37,80 @@
 				</div>
 			</div>
 
-			<div ng-view class="main-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>
-		</grafana-app>
+			<div  class="main-view">
+        <div ng-view></div>
 
-	<script>
-		window.grafanaBootData = {
-			user:[[.User]],
-			settings: [[.Settings]],
-			mainNavLinks: [[.MainNavLinks]]
-		};
-	</script>
+        <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>
+      </div>
+    </grafana-app>
 
-	<!-- build:js [[.AppSubUrl]]/public/app/boot.js -->
-	<script src="[[.AppSubUrl]]/public/vendor/npm/es6-shim/es6-shim.js"></script>
-	<script src="[[.AppSubUrl]]/public/vendor/npm/systemjs/dist/system.src.js"></script>
-	<script src="[[.AppSubUrl]]/public/app/system.conf.js"></script>
-	<script src="[[.AppSubUrl]]/public/app/boot.js"></script>
-	<!-- endbuild -->
+    <script>
+    window.grafanaBootData = {
+      user:[[.User]],
+      settings: [[.Settings]],
+      mainNavLinks: [[.MainNavLinks]]
+    };
+    </script>
 
-	[[if .GoogleTagManagerId]]
-		<script>
-			dataLayer = [{
-				'IsSignedIn': '[[.User.IsSignedIn]]',
-				'Email': '[[.User.Email]]',
-				'Name': '[[.User.Name]]',
-				'UserId': '[[.User.Id]]',
-				'OrgId': '[[.User.OrgId]]',
-				'OrgName': '[[.User.OrgName]]',
-			}];
-		</script>
-		<!-- Google Tag Manager -->
-		<noscript><iframe src="//www.googletagmanager.com/ns.html?id=[[.GoogleTagManagerId]]" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
-		<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-			j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-		})(window,document,'script','dataLayer','[[.GoogleTagManagerId]]');</script>
-		<!-- End Google Tag Manager -->
-	[[end]]
+    <!-- build:js [[.AppSubUrl]]/public/app/boot.js -->
+    <script src="[[.AppSubUrl]]/public/vendor/npm/es6-shim/es6-shim.js"></script>
+    <script src="[[.AppSubUrl]]/public/vendor/npm/systemjs/dist/system.src.js"></script>
+    <script src="[[.AppSubUrl]]/public/app/system.conf.js"></script>
+    <script src="[[.AppSubUrl]]/public/app/boot.js"></script>
+    <!-- endbuild -->
 
-	</body>
+    [[if .GoogleTagManagerId]]
+    <script>
+    dataLayer = [{
+      'IsSignedIn': '[[.User.IsSignedIn]]',
+      'Email': '[[.User.Email]]',
+      'Name': '[[.User.Name]]',
+      'UserId': '[[.User.Id]]',
+      'OrgId': '[[.User.OrgId]]',
+      'OrgName': '[[.User.OrgName]]',
+    }];
+    </script>
+    <!-- Google Tag Manager -->
+    <noscript><iframe src="//www.googletagmanager.com/ns.html?id=[[.GoogleTagManagerId]]" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','[[.GoogleTagManagerId]]');</script>
+    <!-- End Google Tag Manager -->
+    [[end]]
+
+  </body>
 </html>