Skip to content

N
nexpie-grafana-theme
Commit 52241b8e by Torkel Ödegaard
Options

ux(): completed gf-size class rename

parent 701a2fdc
Showing with 89 additions and 105 deletions
public/app/features/dashboard/timepicker/dropdown.html
......@@ -4,7 +4,7 @@
<label class="small">From:</label>
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl">
<div class="gf-form max-width-28">
<input type="text" class="gf-form-input input-large" ng-model="ctrl.timeRaw.from" input-datetime>
</div>
<div class="gf-form">
......@@ -21,7 +21,7 @@
<label class="small">To:</label>
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl">
<div class="gf-form max-width-28">
<input type="text" class="gf-form-input input-large" ng-model="ctrl.timeRaw.to" input-datetime>
</div>
<div class="gf-form">
......@@ -37,7 +37,7 @@
<label class="small">Refreshing every:</label>
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl">
<div class="gf-form max-width-28">
<select ng-model="ctrl.refresh.value" class="gf-form-input input-medium" ng-options="f.value as f.text for f in ctrl.refresh.options"></select>
</div>
<div class="gf-form">
......
public/app/features/datasources/partials/edit.html
......@@ -14,7 +14,7 @@
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label width-7">Name</span>
<input class="gf-form-input gf-size-max-xxl" type="text" ng-model="current.name" placeholder="My data source name" required>
<input class="gf-form-input max-width-21" type="text" ng-model="current.name" placeholder="My data source name" required>
<editor-checkbox text="Default" model="current.isDefault"></editor-checkbox>
</div>
......
public/app/features/datasources/partials/http_settings.html
......@@ -5,7 +5,7 @@
<div class="gf-form">
<span class="gf-form-label width-7">Url</span>
<input class="gf-form-input gf-size-max-xxl" type="text" ng-model='current.url' placeholder="http://my.server.com:8080" ng-pattern="/^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/" required></input>
<input class="gf-form-input max-width-21" type="text" ng-model='current.url' placeholder="http://my.server.com:8080" ng-pattern="/^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/" required></input>
</div>
<div class="gf-form">
......@@ -27,14 +27,14 @@
<span class="gf-form-label width-7">
User
</span>
<input class="gf-form-input gf-size-max-xxl" type="text" ng-model='current.basicAuthUser' placeholder="user" required></input>
<input class="gf-form-input max-width-21" type="text" ng-model='current.basicAuthUser' placeholder="user" required></input>
</div>
<div class="gf-form" ng-if="current.basicAuth">
<span class="gf-form-label width-7">
Passord
</span>
<input class="gf-form-input gf-size-max-xxl" type="password" ng-model='current.basicAuthPassword' placeholder="password" required></input>
<input class="gf-form-input max-width-21" type="password" ng-model='current.basicAuthPassword' placeholder="password" required></input>
</div>
</div>
public/app/features/org/partials/invite.html
......@@ -19,15 +19,15 @@
<form name="inviteForm">
<div class="gf-form-inline" ng-repeat="invite in invites">
<div class="gf-form gf-size-max-xxl">
<div class="gf-form max-width-21">
<span class="gf-form-label">Email or Username</span>
<input type="text" ng-model="invite.loginOrEmail" required class="gf-form-input" placeholder="email@test.com">
</div>
<div class="gf-form gf-size-max-xl">
<div class="gf-form max-width-14">
<span class="gf-form-label">Name</span>
<input type="text" ng-model="invite.name" class="gf-form-input" placeholder="name (optional)">
</div>
<div class="gf-form gf-size-max-lg">
<div class="gf-form max-width-10">
<span class="gf-form-label">Role</span>
<select ng-model="invite.role" class="gf-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']">
</select>
......
public/app/features/org/partials/orgApiKeys.html
<navbar icon="icon-gf icon-gf-users" title="Organization">
<navbar icon="icon-gf icon-gf-users" title="Organization" title-url="org">
</navbar>
<div class="page-container">
......@@ -9,7 +9,7 @@
<h3 class="page-heading">Add new</h3>
<form name="addTokenForm" class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxl">
<div class="gf-form max-width-21">
<span class="gf-form-label">Add a key</span>
<input type="text" class="gf-form-input" ng-model='token.name' placeholder="Name"></input>
</div>
......
public/app/features/org/partials/orgDetails.html
......@@ -9,8 +9,8 @@
<h3 class="page-heading">General</h3>
<form name="orgForm" class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-xs">Name</span>
<div class="gf-form max-width-28">
<span class="gf-form-label width-6">Name</span>
<input class="gf-form-input" type="text" required ng-model="org.name">
</div>
<div class="gf-form">
......@@ -24,33 +24,33 @@
<form name="addressForm" class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl">
<div class="gf-form max-width-28">
<span class="gf-form-label width-7">Address1</span>
<input class="gf-form-input" type="text" ng-model="address.address1">
</div>
<div class="gf-form gf-size-max-xxxl">
<div class="gf-form max-width-28">
<span class="gf-form-label width-7">Address2</span>
<input class="gf-form-input" type="text" ng-model="address.address2">
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl">
<div class="gf-form max-width-28">
<span class="gf-form-label width-7">City</span>
<input class="gf-form-input" type="text" ng-model="address.city">
</div>
<div class="gf-form gf-size-max-xxxl">
<div class="gf-form max-width-28">
<span class="gf-form-label width-7">Postal code</span>
<input class="gf-form-input" type="text" ng-model="address.zipCode">
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl">
<div class="gf-form max-width-28">
<span class="gf-form-label width-7">State</span>
<input class="gf-form-input" type="text" ng-model="address.state">
</div>
<div class="gf-form gf-size-max-xxxl">
<div class="gf-form max-width-28">
<span class="gf-form-label width-7">Country</span>
<input class="gf-form-input" type="text" ng-model="address.country">
</div>
......
public/app/features/org/partials/orgUsers.html
<navbar icon="icon-gf icon-gf-users" title="Organization Users">
<navbar icon="icon-gf icon-gf-users" title="Organization Users" title-url="org">
</navbar>
<div class="page-container">
......
public/app/features/playlist/partials/playlist.html
......@@ -10,16 +10,16 @@
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label width-7">Name</span>
<input type="text" required ng-model="ctrl.playlist.name" class="gf-form-input gf-size-max-xxl">
<input type="text" required ng-model="ctrl.playlist.name" class="gf-form-input max-width-21">
</div>
<div class="gf-form">
<span class="gf-form-label width-7">Interval</span>
<input type="text" required ng-model="ctrl.playlist.interval" placeholder="5m" class="gf-form-input gf-size-max-xxl">
<input type="text" required ng-model="ctrl.playlist.interval" placeholder="5m" class="gf-form-input max-width-21">
</div>
</div>
<div class="gf-form-group">
<div class="gf-size-max-xxxl">
<div class="max-width-28">
<h5 class="page-headering">Add dashboards</h5>
<div style="">
<playlist-search class="playlist-search-container" search-started="ctrl.searchStarted(promise)"></playlist-search>
......
public/app/features/profile/partials/password.html
......@@ -8,18 +8,18 @@
<form name="userForm" class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label gf-size-lg">Old Password</span>
<input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="command.oldPassword">
<span class="gf-form-label width-10">Old Password</span>
<input class="gf-form-input max-width-21" type="text" required ng-model="command.oldPassword">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-lg">New Password</span>
<input class="gf-form-input gf-size-max-xxl" type="text" required ng-minlength="4" ng-model="command.newPassword">
<span class="gf-form-label width-10">New Password</span>
<input class="gf-form-input max-width-21" type="text" required ng-minlength="4" ng-model="command.newPassword">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-lg">Confirm Password</span>
<input class="gf-form-input gf-size-max-xxl" type="text" required ng-minlength="4" ng-model="command.confirmNew">
<span class="gf-form-label width-10">Confirm Password</span>
<input class="gf-form-input max-width-21" type="text" required ng-minlength="4" ng-model="command.confirmNew">
</div>
<div class="gf-form-button-row">
......
public/app/features/profile/partials/profile.html
......@@ -11,15 +11,15 @@
<div class="gf-form">
<span class="gf-form-label width-7">Name</span>
<input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="user.name" >
<input class="gf-form-input max-width-21" type="text" required ng-model="user.name" >
</div>
<div class="gf-form">
<span class="gf-form-label width-7">Email</span>
<input class="gf-form-input gf-size-max-xxl" type="email" required ng-model="user.email">
<input class="gf-form-input max-width-21" type="email" required ng-model="user.email">
</div>
<div class="gf-form">
<span class="gf-form-label width-7">Username</span>
<input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="user.login">
<input class="gf-form-input max-width-21" type="text" required ng-model="user.login">
</div>
<div class="gf-form">
<span class="gf-form-label width-7">UI Theme</span>
......
public/app/partials/login.html
......@@ -20,16 +20,16 @@
<form name="loginForm" class="login-form gf-form-group">
<div class="gf-form" ng-if="loginMode">
<span class="gf-form-label width-7">User</span>
<input type="text" name="username" class="gf-form-input gf-size-max-xl" required ng-model='formModel.user' placeholder={{loginHint}}>
<input type="text" name="username" class="gf-form-input max-width-14" required ng-model='formModel.user' placeholder={{loginHint}}>
</div>
<div class="gf-form" ng-if="loginMode">
<span class="gf-form-label width-7">Password</span>
<input type="password" name="password" class="gf-form-input gf-size-max-xl" required ng-model="formModel.password" id="inputPassword" placeholder="password">
<input type="password" name="password" class="gf-form-input max-width-14" required ng-model="formModel.password" id="inputPassword" placeholder="password">
</div>
<div class="gf-form" ng-if="!loginMode">
<span class="gf-form-label width-7">Email</span>
<input type="email" class="gf-form-input gf-size-max-xl" required ng-model='formModel.email' placeholder="email">
<input type="email" class="gf-form-input max-width-14" required ng-model='formModel.email' placeholder="email">
</div>
<div class="gf-form-button-row">
......
public/app/partials/panelgeneral.html
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxl">
<span class="gf-form-label width-7">Title</span>
<div class="gf-form max-width-21">
<span class="gf-form-label width-8">Title</span>
<input type="text" class="gf-form-input" ng-model='ctrl.panel.title'></input>
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-xs">Span</span>
<span class="gf-form-label width-6">Span</span>
<select class="gf-form-input gf-size-auto" ng-model="ctrl.panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
</div>
<div class="gf-form gf-size-max-xxl">
<span class="gf-form-label width-7">Height</span>
<input type="text" class="gf-form-input gf-size-max-xs" ng-model='ctrl.panel.height' placeholder="100px"></input>
<div class="gf-form max-width-21">
<span class="gf-form-label width-8">Height</span>
<input type="text" class="gf-form-input max-width-6" ng-model='ctrl.panel.height' placeholder="100px"></input>
<editor-checkbox text="Transparent" model="ctrl.panel.transparent"></editor-checkbox>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxl">
<span class="gf-form-label width-7">Repeat Panel</span>
<div class="gf-form max-width-21">
<span class="gf-form-label width-8">Repeat Panel</span>
<select class="gf-form-input" ng-model="ctrl.panel.repeat" ng-options="f.name as f.name for f in ctrl.dashboard.templating.list">
<option value=""></option>
</select>
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-xs">Min span</span>
<span class="gf-form-label width-6">Min span</span>
<select class="gf-form-input" ng-model="ctrl.panel.minSpan" ng-options="f for f in [1,2,3,4,5,6,7,8,9,10,11,12]">
<option value=""></option>
</select>
......
public/app/partials/signup_invited.html
......@@ -22,19 +22,19 @@
<form name="inviteForm" class="login-form gf-form-group">
<div class="gf-form">
<span class="gf-form-label width-7">Email</span>
<input type="email" name="email" class="gf-form-input gf-size-max-xxl" required ng-model='formModel.email' placeholder="Email">
<input type="email" name="email" class="gf-form-input max-width-21" required ng-model='formModel.email' placeholder="Email">
</div>
<div class="gf-form">
<span class="gf-form-label width-7">Name</span>
<input type="text" name="name" class="gf-form-input gf-size-max-xxl" ng-model='formModel.name' placeholder="Name (optional)">
<input type="text" name="name" class="gf-form-input max-width-21" ng-model='formModel.name' placeholder="Name (optional)">
</div>
<div class="gf-form">
<span class="gf-form-label width-7">Username</span>
<input type="text" name="username" class="gf-form-input gf-size-max-xxl" required ng-model='formModel.username' placeholder="Username">
<input type="text" name="username" class="gf-form-input max-width-21" required ng-model='formModel.username' placeholder="Username">
</div>
<div class="gf-form">
<span class="gf-form-label width-7">Password</span>
<input type="password" name="password" class="gf-form-input gf-size-max-xxl" required ng-model="formModel.password" id="inputPassword" placeholder="password">
<input type="password" name="password" class="gf-form-input max-width-21" required ng-model="formModel.password" id="inputPassword" placeholder="password">
</div>
<div style="margin-left: 7.5rem; width: 254px;">
......
public/app/partials/signup_step2.html
......@@ -31,28 +31,28 @@
<form name="signUpForm" class="login-form gf-form-group">
<div class="gf-form" ng-if="verifyEmailEnabled">
<span class="gf-form-label gf-size-md">
<span class="gf-form-label width-9">
Email code<tip>Email verification code (sent to your email)</tip>
</span>
<input type="text" class="gf-form-input gf-size-max-xl" ng-model="formModel.code" required></input>
<input type="text" class="gf-form-input max-width-14" ng-model="formModel.code" required></input>
</div>
<div class="gf-form" ng-if="!autoAssignOrg">
<span class="gf-form-label gf-size-md">Org. name</span>
<input type="text" name="orgName" class="gf-form-input gf-size-max-xl" ng-model='formModel.orgName' placeholder="Name your organization">
<span class="gf-form-label width-9">Org. name</span>
<input type="text" name="orgName" class="gf-form-input max-width-14" ng-model='formModel.orgName' placeholder="Name your organization">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-md">Your name</span>
<input type="text" name="name" class="gf-form-input gf-size-max-xl" ng-model='formModel.name' placeholder="(optional)">
<span class="gf-form-label width-9">Your name</span>
<input type="text" name="name" class="gf-form-input max-width-14" ng-model='formModel.name' placeholder="(optional)">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-md">Username</span>
<input type="text" class="gf-form-input gf-size-max-xl" required ng-model='formModel.username' placeholder="Username" autocomplete="off">
<span class="gf-form-label width-9">Username</span>
<input type="text" class="gf-form-input max-width-14" required ng-model='formModel.username' placeholder="Username" autocomplete="off">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-md">Password</span>
<input type="password" class="gf-form-input gf-size-max-xl" required ng-model="formModel.password" id="inputPassword" placeholder="password" autocomplete="off">
<span class="gf-form-label width-9">Password</span>
<input type="password" class="gf-form-input max-width-14" required ng-model="formModel.password" id="inputPassword" placeholder="password" autocomplete="off">
</div>
<div style="margin-left: 7.5rem; width: 254px;">
......
public/app/plugins/datasource/elasticsearch/partials/config.html
......@@ -5,24 +5,24 @@
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-md">Index name</span>
<div class="gf-form max-width-28">
<span class="gf-form-label width-9">Index name</span>
<input class="gf-form-input" type="text" ng-model='ctrl.current.database' placeholder="" required></input>
</div>
<div class="gf-form gf-size-xl">
<span class="gf-form-label gf-size-md">Pattern</span>
<div class="gf-form width-14">
<span class="gf-form-label width-9">Pattern</span>
<select class="gf-form-input gf-size-auto" ng-model="ctrl.current.jsonData.interval" ng-options="f.value as f.name for f in ctrl.indexPatternTypes" ng-change="ctrl.indexPatternTypeChanged()" ></select>
</div>
</div>
<div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-md">Time field name</span>
<div class="gf-form max-width-28">
<span class="gf-form-label width-9">Time field name</span>
<input class="gf-form-input" type="text" ng-model='ctrl.current.jsonData.timeField' placeholder="" required ng-init=""></input>
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-md">Version</span>
<span class="gf-form-label width-9">Version</span>
<select class="gf-form-input gf-size-auto" ng-model="ctrl.current.jsonData.esVersion" ng-options="f.value as f.name for f in ctrl.esVersions"></select>
</div>
......@@ -32,6 +32,6 @@
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label">Group by time interval</span>
<input class="gf-form-input gf-size-max-md" type="text" ng-model="ctrl.current.jsonData.timeInterval" spellcheck='false' placeholder="example: >10s">
<input class="gf-form-input max-width-9" type="text" ng-model="ctrl.current.jsonData.timeInterval" spellcheck='false' placeholder="example: >10s">
</div>
</div>
public/app/plugins/datasource/influxdb/partials/config.html
......@@ -24,9 +24,9 @@
</div>
<div class="gf-form-group">
<div class="gf-form gf-size-max-xxl">
<div class="gf-form max-width-21">
<span class="gf-form-label">Default group by time</span>
<input type="text" class="gf-form-input gf-size-xs" ng-model="ctrl.current.jsonData.timeInterval"
<input type="text" class="gf-form-input width-6" ng-model="ctrl.current.jsonData.timeInterval"
spellcheck='false' placeholder="example: >10s"></input>
<i class="fa fa-question-circle" bs-tooltip="'Set a low limit by having a greater sign: example: >10s'" data-placement="right"></i>
</div>
......
public/sass/_grafana.scss
......@@ -22,6 +22,7 @@
@import "utils/validation";
@import "utils/angular";
@import "utils/spacings";
@import "utils/widths";
// LAYOUTS
@import "layout/page";
......
public/sass/_variables.scss
......@@ -77,17 +77,6 @@ $grid-gutter-width: 30px !default;
$enable-flex: false;
$form-sizes: (
xs: 5.7rem,
sm: 7rem,
md: 8.5rem,
lg: 10rem,
xl: 14rem,
xxl: 21rem,
xxxl: 28rem
) !default;
// Typography
// -------------------------
......
public/sass/components/_gf-form.scss
......@@ -57,18 +57,6 @@ $gf-form-margin: 0.2rem;
flex-shrink: 0;
}
@each $size, $value in $form-sizes {
.gf-size-#{$size} { width: $value; }
.gf-size-max-#{$size} {
flex-grow: 1;
max-width: $value;
}
}
.gf-size-max { width: 100%; }
.gf-size-auto { width: auto; }
.gf-form-input {
display: block;
width: 100%;
......
public/sass/utils/_spacings.scss
......@@ -28,19 +28,6 @@
}
}
// widths
@for $i from 1 through 30 {
.width-#{$i} {
width: ($spacer * $i) - $gf-form-margin;
}
}
@for $i from 1 through 30 {
.max-width-#{$i} {
max-width: ($spacer * $i) - $gf-form-margin;
flex-grow: 1;
}
}
// Positioning
......
public/sass/utils/_widths.scss 0 → 100644
.max-width { width: 100%; }
.width-auto { width: auto; }
// widths
@for $i from 1 through 30 {
.width-#{$i} {
width: ($spacer * $i) - $gf-form-margin;
}
}
@for $i from 1 through 30 {
.max-width-#{$i} {
max-width: ($spacer * $i) - $gf-form-margin;
flex-grow: 1;
}
}
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