IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-02-14 13:41:42 +01:00
parent fa06040ed2
commit f3d277cbab
12 changed files with 107 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/app/features/datasources/partials/edit.html
View File

@ -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">

110
public/app/features/org/partials/orgDetails.html
View File

@ -2,61 +2,67 @@
</navbar>
<div class="page-container">
<div class="page">
<div class="page-header">
<h1>Preferences</h1>
<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>
</div>
<h3>Org. Users</h3>
<a href="org/users" class="btn btn-inverse">Manage</a>
<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>
<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>

13
public/app/features/profile/partials/profile.html
View File

@ -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">

BIN
public/img/page_header_line.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

4
public/less/bootswatch.dark.less
View File

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

14
public/less/grafana-responsive.less
View File

@ -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 {

1
public/less/grafana.less
View File

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

22
public/less/normform.less
View File

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

6
public/less/page.less
View File

@ -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 {

11
public/less/type.less
View File

@ -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
// --------------------------------------------------

2
public/less/variables.dark.less
View File

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

2
public/views/index.html
View File

@ -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]]