Skip to content

N
nexpie-grafana-theme
Commit 48c936e9 by Torkel Ödegaard
Options

Merge branch 'style-changes-bulletfactory' of github.com:grafana/grafana into… 

Merge branch 'style-changes-bulletfactory' of github.com:grafana/grafana into style-changes-bulletfactory
parents b77bce19 f3d277cb
Showing with 106 additions and 83 deletions
public/app/features/datasources/partials/edit.html
...@@ -5,8 +5,10 @@ ...@@ -5,8 +5,10 @@
</navbar> </navbar>
<div class="page-container"> <div class="page-container">
<h1 ng-show="isNew">Add data source</h1> <div class="page-header">
<h1 ng-show="!isNew">Edit data source</h1> <h1 ng-show="isNew">Add data source</h1>
<h1 ng-show="!isNew">Edit data source</h1>
</div>
<form name="editForm"> <form name="editForm">
<div class="gf-form-group"> <div class="gf-form-group">
......
public/app/features/org/partials/orgDetails.html
...@@ -2,61 +2,67 @@ ...@@ -2,61 +2,67 @@
</navbar> </navbar>
<div class="page-container"> <div class="page-container">
<div class="page"> <div class="page-header">
<h1>Preferences</h1> <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"> <form name="addressForm" class="gf-form-group">
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label gf-size-s">Name</span> <span class="gf-form-label gf-size-s">Address1</span>
<input class="gf-form-input gf-size-xxl" type="text" required ng-model="org.name"> <input class="gf-form-input gf-size-xl" type="text" ng-model="address.address1">
</div> </div>
<div class="gf-form">
<div class="gf-form-button-row"> <span class="gf-form-label gf-size-s">Address2</span>
<button type="submit" class="btn btn-success" ng-click="update()">Update</button> <input class="gf-form-input gf-size-xl" type="text" ng-model="address.address2">
</div> </div>
</form> <br>
<h3>Address</h3> <div class="gf-form">
<span class="gf-form-label gf-size-s">City</span>
<form name="addressForm" class="gf-form-group"> <input class="gf-form-input gf-size-xl" type="text" ng-model="address.city">
<div class="gf-form"> </div>
<span class="gf-form-label gf-size-s">Address1</span> <div class="gf-form">
<input class="gf-form-input gf-size-xl" type="text" ng-model="address.address1"> <span class="gf-form-label gf-size-s">Postal code</span>
</div> <input class="gf-form-input gf-size-xl" type="text" ng-model="address.zipCode">
<div class="gf-form"> </div>
<span class="gf-form-label gf-size-s">Address2</span> <br>
<input class="gf-form-input gf-size-xl" type="text" ng-model="address.address2">
</div> <div class="gf-form">
<br> <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 class="gf-form"> </div>
<span class="gf-form-label gf-size-s">City</span> <div class="gf-form">
<input class="gf-form-input gf-size-xl" type="text" ng-model="address.city"> <span class="gf-form-label gf-size-s">Country</span>
</div> <input class="gf-form-input gf-size-xl" type="text" ng-model="address.country">
<div class="gf-form"> </div>
<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 class="gf-form-button-row">
</div> <button type="submit" class="btn btn-success" ng-click="updateAddress()">Update</button>
<br> </div>
</form>
<div class="gf-form">
<span class="gf-form-label gf-size-s">State</span> <div class="gf-form-group">
<input class="gf-form-input gf-size-xl" type="text" ng-model="address.state"> <h3>Users</h3>
</div> <a href="org/users" class="btn btn-inverse">Manage</a>
<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> </div>
<h3>Org. Users</h3> <div class="gf-form-group">
<a href="org/users" class="btn btn-inverse">Manage</a> <h3>API Keys</h3>
<a href="org/apikeys" class="btn btn-inverse">Manage</a>
</div>
</div> </div>
......
public/app/features/profile/partials/profile.html
...@@ -2,10 +2,13 @@ ...@@ -2,10 +2,13 @@
</navbar> </navbar>
<div class="page-container"> <div class="page-container">
<div class="page-header">
<h1>Profile</h1> <h1>Profile</h1>
</div>
<form name="userForm" class="gf-form-group"> <form name="userForm" class="gf-form-group">
<h3>Preferences</h3>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label gf-size-s">Name</span> <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" > <input class="gf-form-input gf-size-xxl" type="text" required ng-model="user.name" >
...@@ -34,8 +37,10 @@ ...@@ -34,8 +37,10 @@
</div> </div>
</form> </form>
<h3>Password</h3> <div class="gf-form-group">
<a href="profile/password" class="btn btn-inverse">Change Password</a> <h3>Password</h3>
<a href="profile/password" class="btn btn-inverse">Change Password</a>
</div>
<h3>Organizations</h3> <h3>Organizations</h3>
<table class="filter-table form-inline"> <table class="filter-table form-inline">
......
public/less/bootswatch.dark.less
...@@ -34,10 +34,6 @@ body { ...@@ -34,10 +34,6 @@ body {
background: @bodyBackground; background: @bodyBackground;
} }
.page-header {
border-bottom: 1px solid @grayDark
}
hr { hr {
border-bottom: none; border-bottom: none;
} }
......
public/less/grafana-responsive.less
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768); @fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768); @fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);
@screen-xs: 480px; @screen-xs: 320px;
@screen-sm: 768px; @screen-sm: 768px;
@screen-md: 992px; @screen-md: 992px;
@screen-lg: 1200px; @screen-lg: 1200px;
...@@ -67,6 +67,18 @@ ...@@ -67,6 +67,18 @@
.dashnav-action-icons { .dashnav-action-icons {
display: none; 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 { @media @breakpoint-sm-up {
......
public/less/grafana.less
...@@ -30,7 +30,6 @@ ...@@ -30,7 +30,6 @@
@import "simple-box.less"; @import "simple-box.less";
@import "dropdown.less"; @import "dropdown.less";
@import "page.less"; @import "page.less";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,700);
.row-control-inner { .row-control-inner {
padding:0px; padding:0px;
......
public/less/normform.less
...@@ -16,6 +16,11 @@ ...@@ -16,6 +16,11 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
.gf-form-flow {
float: left;
margin-right: 20px;
}
.gf-form-button-row { .gf-form-button-row {
margin-top: 20px; margin-top: 20px;
margin-bottom: 10px; margin-bottom: 10px;
...@@ -56,13 +61,14 @@ select.gf-form-input { ...@@ -56,13 +61,14 @@ select.gf-form-input {
font-size: 15px; font-size: 15px;
} }
.gf-size-xs { width: 60px;} .gf-size-xs { width: 60px; }
.gf-size-s { width: 80px;} .gf-size-s { width: 80px; }
.gf-size-ms { width: 100px;} .gf-size-ms { width: 100px;}
.gf-size-m { width: 120px; } .gf-size-m { width: 110px; }
.gf-size-l { width: 150px; } .gf-size-l { width: 120px; }
.gf-size-xl { width: 200px; } .gf-size-xl { width: 150px; }
.gf-size-xxl { width: 300px; } .gf-size-xxl { width: 200px; }
.gf-size-xxxl { width: 400px; } .gf-size-xxxl { width: 300px; }
.gf-size-auto { width: auto; } .gf-size-auto { width: auto; }
public/less/page.less
...@@ -33,6 +33,8 @@ ...@@ -33,6 +33,8 @@
.page-header { .page-header {
padding: 10px 0 39px 0px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
...@@ -41,6 +43,10 @@ ...@@ -41,6 +43,10 @@
display: -ms-flexbox; /* TWEENER - IE 10 */ display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */ display: -webkit-flex; /* NEW - Chrome */
flex-wrap: wrap-reverse; flex-wrap: wrap-reverse;
background: transparent url(../img/page_header_line.png) no-repeat left 60px;
h1 {
font-style: italic;
}
} }
.admin-page { .admin-page {
......
public/less/type.less
...@@ -88,17 +88,6 @@ h3 small { font-size: @baseFontSize; } ...@@ -88,17 +88,6 @@ h3 small { font-size: @baseFontSize; }
h4 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 // Lists
// -------------------------------------------------- // --------------------------------------------------
......
public/less/variables.dark.less
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
@altFontFamily: @serifFontFamily; @altFontFamily: @serifFontFamily;
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily @headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
@headingsFontWeight: 200; // instead of browser default, bold @headingsFontWeight: 400; // instead of browser default, bold
@headingsFontStyle: normal; @headingsFontStyle: normal;
@headingsColor: darken(@white,11%); // empty to use BS default, @textColor @headingsColor: darken(@white,11%); // empty to use BS default, @textColor
@inputText: @black; @inputText: @black;
......
public/views/index.html
...@@ -8,6 +8,8 @@ ...@@ -8,6 +8,8 @@
<title>Grafana</title> <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]] [[if .User.LightTheme]]
<link rel="stylesheet" href="[[.AppSubUrl]]/public/css/grafana.light.min.css"> <link rel="stylesheet" href="[[.AppSubUrl]]/public/css/grafana.light.min.css">
[[else]] [[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