ux(): general ux polish and experimental work on page header

public/app/features/datasources/partials/edit.html

@@ -5,8 +5,10 @@
 </navbar>
 
 <div class="page-container">
+	<div class="page-header">
 		<h1 ng-show="isNew">Add data source</h1>
 		<h1 ng-show="!isNew">Edit data source</h1>
+	</div>
 
 	<form name="editForm">
 		<div class="gf-form-group">

public/app/features/org/partials/orgDetails.html

@@ -2,9 +2,9 @@
 </navbar>
 
 <div class="page-container">
-	<div class="page">
-
+	<div class="page-header">
 		<h1>Preferences</h1>
+	</div>
 
 	<form name="orgForm" class="gf-form-group">
 		<div class="gf-form">
@@ -53,10 +53,16 @@
 			<button type="submit" class="btn btn-success" ng-click="updateAddress()">Update</button>
 		</div>
 	</form>
-	</div>
 
-	<h3>Org. Users</h3>
+	<div class="gf-form-group">
+		<h3>Users</h3>
 		<a href="org/users" class="btn btn-inverse">Manage</a>
+	</div>
+
+	<div class="gf-form-group">
+		<h3>API Keys</h3>
+		<a href="org/apikeys" class="btn btn-inverse">Manage</a>
+	</div>
 
 </div>
 

public/app/features/profile/partials/profile.html

@@ -2,10 +2,13 @@
 </navbar>
 
 <div class="page-container">
-
+	<div class="page-header">
 		<h1>Profile</h1>
+	</div>
 
 	<form name="userForm" class="gf-form-group">
+		<h3>Preferences</h3>
+
 		<div class="gf-form">
 			<span class="gf-form-label gf-size-s">Name</span>
 			<input class="gf-form-input gf-size-xxl" type="text" required ng-model="user.name" >
@@ -34,8 +37,10 @@
 		</div>
 	</form>
 
+	<div class="gf-form-group">
 		<h3>Password</h3>
 		<a href="profile/password" class="btn btn-inverse">Change Password</a>
+	</div>
 
 	<h3>Organizations</h3>
 	<table class="filter-table form-inline">

public/less/bootswatch.dark.less

@@ -34,10 +34,6 @@ body {
 	background: @bodyBackground;
 }
 
-.page-header {
-	border-bottom: 1px solid @grayDark
-}
-
 hr {
 	border-bottom: none;
 }

public/less/grafana-responsive.less

@@ -22,7 +22,7 @@
 @fluidGridColumnWidth768:      percentage(@gridColumnWidth768/@gridRowWidth768);
 @fluidGridGutterWidth768:      percentage(@gridGutterWidth768/@gridRowWidth768);
 
-@screen-xs: 480px;
+@screen-xs: 320px;
 @screen-sm: 768px;
 @screen-md: 992px;
 @screen-lg: 1200px;
@@ -67,6 +67,18 @@
   .dashnav-action-icons {
     display: none;
   }
+  .page-container {
+    padding: 0 20px;
+  }
+}
+
+// form styles
+@media @breakpoint-sm-up {
+  .gf-size-m { width: 120px; }
+  .gf-size-l { width: 150px; }
+  .gf-size-xl { width: 200px; }
+  .gf-size-xxl { width: 300px; }
+  .gf-size-xxxl { width: 400px; }
 }
 
 @media @breakpoint-sm-up {

public/less/grafana.less

@@ -30,7 +30,6 @@
 @import "simple-box.less";
 @import "dropdown.less";
 @import "page.less";
-@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,700);
 
 .row-control-inner {
   padding:0px;

public/less/normform.less

@@ -16,6 +16,11 @@
   margin-bottom: 20px;
 }
 
+.gf-form-flow {
+  float: left;
+  margin-right: 20px;
+}
+
 .gf-form-button-row {
   margin-top: 20px;
   margin-bottom: 10px;
@@ -56,13 +61,14 @@ select.gf-form-input {
   font-size: 15px;
 }
 
-.gf-size-xs { width: 60px;}
-.gf-size-s { width: 80px;}
+.gf-size-xs { width: 60px; }
+.gf-size-s { width: 80px; }
 .gf-size-ms { width: 100px;}
-.gf-size-m { width: 120px; }
-.gf-size-l { width: 150px; }
-.gf-size-xl { width: 200px; }
-.gf-size-xxl { width: 300px; }
-.gf-size-xxxl { width: 400px; }
-
+.gf-size-m { width: 110px; }
+.gf-size-l { width: 120px; }
+.gf-size-xl { width: 150px; }
+.gf-size-xxl { width: 200px; }
+.gf-size-xxxl { width: 300px; }
 .gf-size-auto { width: auto; }
+
+

public/less/page.less

@@ -33,6 +33,8 @@
 
 
 .page-header {
+  padding: 10px 0 39px 0px;
+
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -41,6 +43,10 @@
   display: -ms-flexbox;      /* TWEENER - IE 10 */
   display: -webkit-flex;     /* NEW - Chrome */
   flex-wrap: wrap-reverse;
+  background: transparent url(../img/page_header_line.png) no-repeat left 60px;
+  h1 {
+    font-style: italic;
+  }
 }
 
 .admin-page {

public/less/type.less

@@ -88,17 +88,6 @@ h3 small { font-size: @baseFontSize; }
 h4 small { font-size: @baseFontSize; }
 
 
-// Page header
-// -------------------------
-
-.page-header {
-  padding-bottom: (@baseLineHeight / 2) - 1;
-  margin: @baseLineHeight 0 (@baseLineHeight * 1.5);
-  border-bottom: 1px solid @grayLighter;
-}
-
-
-
 // Lists
 // --------------------------------------------------
 

public/less/variables.dark.less

@@ -78,7 +78,7 @@
 @altFontFamily:         @serifFontFamily;
 
 @headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
-@headingsFontWeight:    200;    // instead of browser default, bold
+@headingsFontWeight:    400;    // instead of browser default, bold
 @headingsFontStyle:    	normal;
 @headingsColor:         darken(@white,11%); // empty to use BS default, @textColor
 @inputText:             @black;

public/views/index.html

@@ -8,6 +8,8 @@
 
     <title>Grafana</title>
 
+		<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,300,700' rel='stylesheet' type='text/css'>
+
 		[[if .User.LightTheme]]
 		  <link rel="stylesheet" href="[[.AppSubUrl]]/public/css/grafana.light.min.css">
 		[[else]]