From 24fff39c52ae29db1c94c65d3f698b3e4fa0bc5e Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 14 Nov 2016 15:35:22 -0800 Subject: [PATCH 1/7] Removing spaces in Template reference --- ui/src/kapacitor/components/RuleMessage.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/ui/src/kapacitor/components/RuleMessage.js b/ui/src/kapacitor/components/RuleMessage.js index f5d4fcc984..86e87489ad 100644 --- a/ui/src/kapacitor/components/RuleMessage.js +++ b/ui/src/kapacitor/components/RuleMessage.js @@ -40,14 +40,14 @@ export const RuleMessage = React.createClass({ />

Templates:

- {{ .ID }} - {{ .Name }} - {{ .TaskName }} - {{ .Group }} - {{ .Tags }} - {{ .Level }} - {{ .Fields }} - {{ .Time }} + {{.ID}} + {{.Name}} + {{.TaskName}} + {{.Group}} + {{.Tags}} + {{.Level}} + {{.Fields}} + {{.Time}}
From d7028c395ec7ccc2b701ad2a3088104b3c582b7f Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 14 Nov 2016 15:35:37 -0800 Subject: [PATCH 2/7] Class was missing a - --- ui/src/kapacitor/components/RuleMessage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/kapacitor/components/RuleMessage.js b/ui/src/kapacitor/components/RuleMessage.js index 86e87489ad..db4caafea8 100644 --- a/ui/src/kapacitor/components/RuleMessage.js +++ b/ui/src/kapacitor/components/RuleMessage.js @@ -50,7 +50,7 @@ export const RuleMessage = React.createClass({ {{.Time}}
-
+

Send this Alert to:

From 8b2acfa97e0080d264fa8568955cc68afe595139 Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 14 Nov 2016 15:35:51 -0800 Subject: [PATCH 3/7] Template reference items wrap nicely --- ui/src/style/enterprise_style/kapacitor.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/ui/src/style/enterprise_style/kapacitor.scss b/ui/src/style/enterprise_style/kapacitor.scss index 5d386a738e..8d1abc437f 100644 --- a/ui/src/style/enterprise_style/kapacitor.scss +++ b/ui/src/style/enterprise_style/kapacitor.scss @@ -422,10 +422,11 @@ div.query-editor.kapacitor-metric-selector { } } .alert-message--formatting { - padding: $kap-padding-sm $kap-padding-lg; + padding: ($kap-padding-sm - 2px) $kap-padding-lg; background-color: $kapacitor-graphic-color; display: flex; align-items: center; + flex-wrap: wrap; border-top: 2px solid $kapacitor-divider-color; > p { @@ -442,7 +443,7 @@ div.query-editor.kapacitor-metric-selector { border: 0; border-radius: 3px; display: inline-block; - margin-left: 2px; + margin: 2px; color: $c-pool; font-size: ($kapacitor-font-sm - 2px); font-weight: 600; From 22c1ea44a2331225bf911254205d0163bc78027f Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 14 Nov 2016 15:40:16 -0800 Subject: [PATCH 4/7] Value selector items wrap nicely --- ui/src/style/enterprise_style/kapacitor.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/ui/src/style/enterprise_style/kapacitor.scss b/ui/src/style/enterprise_style/kapacitor.scss index 8d1abc437f..fabf3f2beb 100644 --- a/ui/src/style/enterprise_style/kapacitor.scss +++ b/ui/src/style/enterprise_style/kapacitor.scss @@ -481,14 +481,15 @@ div.query-editor.kapacitor-metric-selector { .kapacitor-values-tabs, .value-selector { background-color: $kapacitor-graphic-color; - padding: ($kap-padding-sm / 2) $kap-padding-lg; + padding: ($kap-padding-sm - 2px) $kap-padding-lg; display: flex; justify-content: flex-start; align-items: center; + flex-wrap: wrap; > * { display: inline-block; - margin: ($kap-padding-sm / 2); + margin: 2px; &:first-child { margin-left: 0; @@ -499,6 +500,8 @@ div.query-editor.kapacitor-metric-selector { white-space: nowrap; font-weight: 600; color: $g15-platinum; + margin-left: ($kap-padding-sm / 2); + margin-right: ($kap-padding-sm / 2); } > span { color: $kapacitor-accent; @@ -508,7 +511,7 @@ div.query-editor.kapacitor-metric-selector { vertical-align: middle; border-radius: 4px; background-color: $g5-pepper; - margin: ($kap-padding-sm / 2); + margin: 2px; padding: 0 $kap-padding-sm; font-weight: 700; font-size: $kapacitor-font-sm; From e6e7d37eb18a5fe1862f0483b0e8c5335ce4a49b Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 14 Nov 2016 15:46:11 -0800 Subject: [PATCH 5/7] Variable for scrollbar width Going to use elsewhere --- ui/src/style/modules/_sizes.scss | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/ui/src/style/modules/_sizes.scss b/ui/src/style/modules/_sizes.scss index 7bad09d6ed..3ffdf3f832 100644 --- a/ui/src/style/modules/_sizes.scss +++ b/ui/src/style/modules/_sizes.scss @@ -28,9 +28,10 @@ $explorer-page-padding: 18px; background: linear-gradient(to right, $startColor 0%,$endColor 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$startColor', endColorstr='$endColor',GradientType=1 ); } +$scrollbar-width: 16px; @mixin custom-scrollbar($trackColor, $handleColor) { &::-webkit-scrollbar { - width: 14px; + width: $scrollbar-width; border-bottom-right-radius: $radius; &-button { @@ -42,13 +43,13 @@ $explorer-page-padding: 18px; } &-track-piece { background-color: $trackColor; - border: 4px solid $trackColor; - border-radius: 8px; + border: ($scrollbar-width / 4) solid $trackColor; + border-radius: ($scrollbar-width / 2); } &-thumb { background-color: $handleColor; - border: 4px solid $trackColor; - border-radius: 8px; + border: ($scrollbar-width / 4) solid $trackColor; + border-radius: ($scrollbar-width / 2); } &-corner { background-color: $trackColor; From ec32512ed8f636a6e33fece3923abaebd1045e76 Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 14 Nov 2016 15:46:30 -0800 Subject: [PATCH 6/7] Using gradient mixin instead --- ui/src/style/enterprise_style/_enterprise-custom.scss | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/ui/src/style/enterprise_style/_enterprise-custom.scss b/ui/src/style/enterprise_style/_enterprise-custom.scss index e7f60f64b7..f749240200 100644 --- a/ui/src/style/enterprise_style/_enterprise-custom.scss +++ b/ui/src/style/enterprise_style/_enterprise-custom.scss @@ -66,11 +66,7 @@ body > #react-root { position: relative; flex-grow: 1; overflow: hidden; - background: $g18-cloud; - background: -moz-linear-gradient(top, $g18-cloud 0%, $g19-ghost 100%); - background: -webkit-linear-gradient(top, $g18-cloud 0%,$g19-ghost 100%); - background: linear-gradient(to bottom, $g18-cloud 0%,$g19-ghost 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$g18-cloud', endColorstr='$g19-ghost',GradientType=0 ); + @include gradient-v($g18-cloud, $g19-ghost); } .signup-flow-bg { background-image: url(/assets/images/signup-bg.png); From f328f2f7fa9741bfa7a574eaa5dd7f27737e3431 Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 14 Nov 2016 15:46:47 -0800 Subject: [PATCH 7/7] Polishing scroll a bit --- ui/src/style/enterprise_style/_enterprise-custom.scss | 6 ++++-- ui/src/style/enterprise_style/hosts.scss | 2 ++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/ui/src/style/enterprise_style/_enterprise-custom.scss b/ui/src/style/enterprise_style/_enterprise-custom.scss index f749240200..ceee29eab1 100644 --- a/ui/src/style/enterprise_style/_enterprise-custom.scss +++ b/ui/src/style/enterprise_style/_enterprise-custom.scss @@ -81,7 +81,9 @@ body > #react-root { left: 0; width: 100%; height: 100%; - overflow: scroll; + overflow: auto; + overflow-x: hidden; + overflow-y: scroll; } /* @@ -92,7 +94,7 @@ body > #react-root { background-color: $g20-white; height: $enterprise-page-header-height; margin-bottom: 15px; - padding: 0 $page-wrapper-padding; + padding: 0 ($page-wrapper-padding + $scrollbar-width) 0 $page-wrapper-padding; display: flex; justify-content: center; align-items: center; diff --git a/ui/src/style/enterprise_style/hosts.scss b/ui/src/style/enterprise_style/hosts.scss index e35679dc4f..dd865f2242 100644 --- a/ui/src/style/enterprise_style/hosts.scss +++ b/ui/src/style/enterprise_style/hosts.scss @@ -27,6 +27,8 @@ width: 100%; height: calc(100% - #{$enterprise-page-header-height}); overflow: auto; + overflow-x: hidden; + overflow-y: scroll; @include custom-scrollbar($g2-kevlar,$c-pool); .container-fluid {