Skip to content

N
nexpie-grafana-theme
Commit f3d277cb by Torkel Ödegaard
Options

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

parent fa06040e
Showing with 106 additions and 83 deletions
public/app/features/datasources/partials/edit.html
......@@ -5,8 +5,10 @@
</navbar>
<div class="page-container">
<h1 ng-show="isNew">Add data source</h1>
<h1 ng-show="!isNew">Edit data source</h1>
<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,61 +2,67 @@
</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">
<span class="gf-form-label gf-size-s">Name</span>
<input class="gf-form-input gf-size-xxl" type="text" required ng-model="org.name">
</div>
<div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="update()">Update</button>
</div>
</form>
<h3>Address</h3>
<form name="orgForm" class="gf-form-group">
<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="org.name">
</div>
<div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="update()">Update</button>
</div>
</form>
<h3>Address</h3>
<form name="addressForm" class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label gf-size-s">Address1</span>
<input class="gf-form-input gf-size-xl" type="text" ng-model="address.address1">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-s">Address2</span>
<input class="gf-form-input gf-size-xl" type="text" ng-model="address.address2">
</div>
<br>
<div class="gf-form">
<span class="gf-form-label gf-size-s">City</span>
<input class="gf-form-input gf-size-xl" type="text" ng-model="address.city">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-s">Postal code</span>
<input class="gf-form-input gf-size-xl" type="text" ng-model="address.zipCode">
</div>
<br>
<div class="gf-form">
<span class="gf-form-label gf-size-s">State</span>
<input class="gf-form-input gf-size-xl" type="text" ng-model="address.state">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-s">Country</span>
<input class="gf-form-input gf-size-xl" type="text" ng-model="address.country">
</div>
<div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="updateAddress()">Update</button>
</div>
</form>
<form name="addressForm" class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label gf-size-s">Address1</span>
<input class="gf-form-input gf-size-xl" type="text" ng-model="address.address1">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-s">Address2</span>
<input class="gf-form-input gf-size-xl" type="text" ng-model="address.address2">
</div>
<br>
<div class="gf-form">
<span class="gf-form-label gf-size-s">City</span>
<input class="gf-form-input gf-size-xl" type="text" ng-model="address.city">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-s">Postal code</span>
<input class="gf-form-input gf-size-xl" type="text" ng-model="address.zipCode">
</div>
<br>
<div class="gf-form">
<span class="gf-form-label gf-size-s">State</span>
<input class="gf-form-input gf-size-xl" type="text" ng-model="address.state">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-s">Country</span>
<input class="gf-form-input gf-size-xl" type="text" ng-model="address.country">
</div>
<div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="updateAddress()">Update</button>
</div>
</form>
<div class="gf-form-group">
<h3>Users</h3>
<a href="org/users" class="btn btn-inverse">Manage</a>
</div>
<h3>Org. Users</h3>
<a href="org/users" class="btn btn-inverse">Manage</a>
<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">
<h1>Profile</h1>
<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>
<h3>Password</h3>
<a href="profile/password" class="btn btn-inverse">Change Password</a>
<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]]
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment