From 422decde3b05d2ea471fabd8524776fa40ef6542 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 15 Feb 2016 22:24:28 +0100 Subject: [PATCH] ux(): trying out flexbox for new form styles --- public/app/core/directives/misc.js | 3 +- .../features/datasources/partials/edit.html | 9 +-- .../datasources/partials/http_settings.html | 25 +++------ .../app/features/org/partials/orgDetails.html | 54 +++++++++--------- public/sass/_grid-variables.scss | 10 ++++ public/sass/_old_responsive.scss | 6 -- public/sass/base/_forms.scss | 1 - public/sass/components/_gf-form.scss | 55 ++++++++++++++----- 8 files changed, 93 insertions(+), 70 deletions(-) diff --git a/public/app/core/directives/misc.js b/public/app/core/directives/misc.js index 1f96422d49e..d9bd7a38f0c 100644 --- a/public/app/core/directives/misc.js +++ b/public/app/core/directives/misc.js @@ -69,7 +69,8 @@ function (angular, coreModule, kbn) { ' '; template = template + label; - elem.replaceWith($compile(angular.element(template))(scope)); + elem.addClass('gf-form-checkbox'); + elem.html($compile(angular.element(template))(scope)); } }; }); diff --git a/public/app/features/datasources/partials/edit.html b/public/app/features/datasources/partials/edit.html index 8a0dc0f4e0a..b5bb0337546 100644 --- a/public/app/features/datasources/partials/edit.html +++ b/public/app/features/datasources/partials/edit.html @@ -13,16 +13,13 @@
- Name - -
-
+ Name +
-
- Type + Type
diff --git a/public/app/features/datasources/partials/http_settings.html b/public/app/features/datasources/partials/http_settings.html index 91d4b46a363..8035fa45527 100644 --- a/public/app/features/datasources/partials/http_settings.html +++ b/public/app/features/datasources/partials/http_settings.html @@ -3,13 +3,12 @@
- Url - + Url +
-
- + Access Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request @@ -17,31 +16,25 @@
- + Http Auth -
- - - Tip for with credentials - -
+
- + User - +
-
- + Passord - +
diff --git a/public/app/features/org/partials/orgDetails.html b/public/app/features/org/partials/orgDetails.html index 1aa6046a28c..a5f6c9305e7 100644 --- a/public/app/features/org/partials/orgDetails.html +++ b/public/app/features/org/partials/orgDetails.html @@ -8,8 +8,8 @@
- Name - + Name +
@@ -20,33 +20,37 @@

Address

-
- Address1 - +
+
+ Address1 + +
+
+ Address2 + +
-
- Address2 - -
-
-
- City - +
+
+ City + +
+
+ Postal code + +
-
- Postal code - -
-
-
- State - -
-
- Country - +
+
+ State + +
+
+ Country + +
diff --git a/public/sass/_grid-variables.scss b/public/sass/_grid-variables.scss index a362b11b49a..7e80b5fda21 100644 --- a/public/sass/_grid-variables.scss +++ b/public/sass/_grid-variables.scss @@ -34,3 +34,13 @@ $grid-gutter-width: 30px !default; $enable-flex: false; +$form-sizes: ( + xs: 60px, + sm: 80px, + md: 120px, + lg: 150px, + xl: 200px, + xxl: 300px, + xxxl: 400px +) !default; + diff --git a/public/sass/_old_responsive.scss b/public/sass/_old_responsive.scss index 724f9179208..7da5f5c20be 100644 --- a/public/sass/_old_responsive.scss +++ b/public/sass/_old_responsive.scss @@ -34,12 +34,6 @@ // form styles @include media-breakpoint-up(md) { - .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; } - .dashnav-dashboards-btn a { max-width: 180px; } diff --git a/public/sass/base/_forms.scss b/public/sass/base/_forms.scss index 5d106278b4d..efeeaa538b1 100644 --- a/public/sass/base/_forms.scss +++ b/public/sass/base/_forms.scss @@ -54,7 +54,6 @@ textarea { // Identify controls by their labels label { display: block; - margin-bottom: 5px; } // Form controls diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 9cf4c1a2def..e5c9680124f 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -1,12 +1,18 @@ +$gf-form-margin: 4px; + .gf-form { - margin-top: 3px; - margin-right: 3px; - display: inline-block; + margin-top: $gf-form-margin; + margin-right: $gf-form-margin; + display: flex; + flex-direction: row; + align-items: center; .checkbox-label { display: inline; + cursor: pointer; padding: 8px 7px 8px 4px; } + .cr1 { margin-left: 8px; } @@ -16,9 +22,15 @@ margin-bottom: 20px; } -.gf-form-flow { - float: left; - margin-right: 20px; +.gf-form-inline { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-content: flex-start; + + .gf-form { + flex-grow: 1; + } } .gf-form-button-row { @@ -27,10 +39,16 @@ } .gf-form-label { + flex-shrink: 0; background-color: $labelBackground; - display: inline-block; + display: block; padding: 8px 7px; font-size: $fontSizeSmall; + margin-right: $gf-form-margin; +} + +.gf-form-checkbox { + flex-shrink: 0; } [type=text], @@ -45,6 +63,9 @@ height: 100%; box-sizing: border-box; font-size: 15px; + display: block; + width: 100%; + margin-right: $gf-form-margin; } } @@ -56,16 +77,20 @@ select.gf-form-input { padding: 2px 3px; font-size: 15px; box-sizing: content-box; + display: block; + width: 100%; + margin-right: $gf-form-margin; +} + +@each $size, $value in $form-sizes { + .gf-size-#{$size} { width: $value; } + + .gf-size-max-#{$size} { + max-width: $value; + } } -.gf-size-xs { width: 60px; } -.gf-size-s { width: 80px; } -.gf-size-ms { width: 100px;} -.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; } +.gf-size-max { width: 100%; }