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(): updated some forms with the new flexbox based classes

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-02-15 22:37:48 +01:00
parent 422decde3b
commit 262a03667e
3 changed files with 11 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/features/datasources/partials/http_settings.html
View File

@ -8,7 +8,7 @@
</div> </div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label gf-size-sx"> <span class="gf-form-label gf-size-xs">
Access <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</tip> Access <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</tip>
</span> </span>
<select class="gf-form-input gf-size-auto" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select> <select class="gf-form-input gf-size-auto" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select>

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

@ -10,25 +10,19 @@
<h3>Preferences</h3> <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-xs">Name</span>
<input class="gf-form-input gf-size-xxl" type="text" required ng-model="user.name" > <input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="user.name" >
</div> </div>
<br>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label gf-size-s">Email</span> <span class="gf-form-label gf-size-xs">Email</span>
<input class="gf-form-input gf-size-xxl" type="email" required ng-model="user.email"> <input class="gf-form-input gf-size-max-xxl" type="email" required ng-model="user.email">
</div> </div>
<br>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label gf-size-s">Username</span> <span class="gf-form-label gf-size-xs">Username</span>
<input class="gf-form-input gf-size-xxl" type="text" required ng-model="user.login"> <input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="user.login">
</div> </div>
<br>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label gf-size-s">UI Theme</span> <span class="gf-form-label gf-size-xs">UI Theme</span>
<select class="gf-form-input gf-size-auto" ng-model="user.theme" ng-options="f for f in ['dark', 'light']"></select> <select class="gf-form-input gf-size-auto" ng-model="user.theme" ng-options="f for f in ['dark', 'light']"></select>
</div> </div>

5
public/sass/components/_gf-form.scss
View File

@ -67,6 +67,7 @@ $gf-form-margin: 4px;
width: 100%; width: 100%;
margin-right: $gf-form-margin; margin-right: $gf-form-margin;
} }
&.gf-size-auto { width: auto; }
} }
input[type=checkbox].gf-form-checkbox { input[type=checkbox].gf-form-checkbox {
@ -80,6 +81,7 @@ select.gf-form-input {
display: block; display: block;
width: 100%; width: 100%;
margin-right: $gf-form-margin; margin-right: $gf-form-margin;
&.gf-size-auto { width: auto; }
} }
@each $size, $value in $form-sizes { @each $size, $value in $form-sizes {
@ -90,7 +92,6 @@ select.gf-form-input {
} }
} }
.gf-size-auto { width: auto; }
.gf-size-max { width: 100%; } .gf-size-max { width: 100%; }
.gf-size-auto { width: auto; }