From 0b6172efc5fbd8c21b0e464e787d14df9aceb348 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc=20Sch=C3=A4ffner-Gurney?= Date: Mon, 29 Jun 2015 15:06:13 -0400 Subject: [PATCH 1/5] styled header, updated some colors post mdb demo --- scout-style/10strap.less | 2 +- scout-style/index.less | 53 ++++++++++++++++++++---- scout-style/sidebar.less | 6 ++- scout-style/variables.less | 6 +-- scout-ui/src/collection-stats/index.jade | 38 +++++++++-------- scout-ui/src/field-list/index.less | 2 +- scout-ui/src/home/collection.jade | 18 ++++---- scout-ui/src/home/index.less | 34 +++++++++++---- scout-ui/src/minicharts/index.less | 8 ++-- scout-ui/src/refine-view/index.jade | 9 ++-- 10 files changed, 119 insertions(+), 57 deletions(-) diff --git a/scout-style/10strap.less b/scout-style/10strap.less index 3d5013beca9..0016061290f 100644 --- a/scout-style/10strap.less +++ b/scout-style/10strap.less @@ -56,7 +56,7 @@ hr.inverse { code { font-family: Menlo, monospace; color: @gray1; - background-color: @gray6; // @worldhack: was @gray8 + background-color: @gray7; } input, diff --git a/scout-style/index.less b/scout-style/index.less index 2fa33c9f908..ee00db8b2da 100644 --- a/scout-style/index.less +++ b/scout-style/index.less @@ -4,7 +4,7 @@ @import "bootstrap"; // Configuration -@import "./variables.less"; +// @import "./variables.less"; // Tweaks to bootstrap @import "./10strap.less"; @@ -50,8 +50,6 @@ html, body{ } } - - #statusbar { background: 0 0; position: fixed; @@ -60,7 +58,6 @@ html, body{ right: 0; z-index: 1020; - .progress { position: fixed; top: 0; @@ -71,6 +68,7 @@ html, body{ z-index: 2000; border-radius: 0; transition: height 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045); + .progress-bar { background-color: @component-active-bg; } @@ -80,7 +78,6 @@ html, body{ .spinner-circles { width: 40px; height: 40px; - position: relative; margin: 40px auto; @@ -88,7 +85,7 @@ html, body{ width: 100%; height: 100%; border-radius: 50%; - background-color: @brand-primary; + background-color: @green2; opacity: 0.6; position: absolute; top: 0; @@ -120,6 +117,48 @@ html, body{ } -// styles for demo +// component styles +.collection-stats-holder { + position: absolute; + right: 20px; +} +.collection-stats { + float: left; + font-weight: 200; + list-style: none; + padding: 0 30px 0 0; + margin: 11px 30px 0 0; + border-right: 1px solid @gray7; + + &:last-child { + border-right: none; + padding: 0; + margin: 11px 0 0 0; + } +} +.collection-stats-item { + display: inline-block; + margin-right: 10px; + &:last-child { + margin-right: 0; + } +} +.collection-stats-primary-label { + text-transform: uppercase; + letter-spacing: 1px; + font-size: 12px; + color: @gray3; +} +.collection-stats-primary-value { + font-size: 36px; + line-height: 36px; +} +.collection-stats-label { + font-size: 11px; + color: @gray3; +} +.collection-stats-value { + font-size: 14px; +} \ No newline at end of file diff --git a/scout-style/sidebar.less b/scout-style/sidebar.less index d4591c77c3b..ea30cb19e4c 100644 --- a/scout-style/sidebar.less +++ b/scout-style/sidebar.less @@ -1,3 +1,7 @@ +@sidebar-bg: @pw; +@sidebar-border: @gray7; +@sidebar-width: 220px; + .sidebar { border-radius: 0; position: fixed; @@ -20,7 +24,7 @@ padding: 5px 5px 5px 30px; height: auto; background: @pw; - border-color: @gray6; + // border-color: @gray6; } input[type=search] { border-radius: 18px; diff --git a/scout-style/variables.less b/scout-style/variables.less index ea4ddf381ba..4f0539f6108 100644 --- a/scout-style/variables.less +++ b/scout-style/variables.less @@ -1,9 +1,9 @@ // // Variables // -------------------------------------------------- -@sidebar-bg: @pw; -@sidebar-border: @gray6; // @worldhack: was @gray7 -@sidebar-width: 220px; +// @sidebar-bg: @pw; +// @sidebar-border: @gray6; // @worldhack: was @gray7 +// @sidebar-width: 220px; @octicons-font-path: "fonts"; //== Colors diff --git a/scout-ui/src/collection-stats/index.jade b/scout-ui/src/collection-stats/index.jade index 256e450c7ce..3ac2753c89b 100644 --- a/scout-ui/src/collection-stats/index.jade +++ b/scout-ui/src/collection-stats/index.jade @@ -1,17 +1,21 @@ -div.row.hidden - .col-md-6 - dl.dl-horizontal - dt # documents - dd(data-hook='document_count') - dt total document size - dd(data-hook='document_size') - dt average document size - dd(data-hook='document_size_average') - .col-md-6 - dl.dl-horizontal - dt # indexes - dd(data-hook='index_count') - dt total index size - dd(data-hook='index_size') - dt average index size - dd(data-hook='index_size_average') +div.collection-stats-holder + ul.collection-stats + li.collection-stats-item + .collection-stats-primary-label Documents + .collection-stats-primary-value(data-hook='document_count') + li.collection-stats-item + .collection-stats-label total size + .collection-stats-value(data-hook='document_size') + li.collection-stats-item + .collection-stats-label avg. size + .collection-stats-value(data-hook='document_size_average') + ul.collection-stats + li.collection-stats-item + .collection-stats-primary-label Indexes + .collection-stats-primary-value(data-hook='index_count') + li.collection-stats-item + .collection-stats-label total size + .collection-stats-value(data-hook='index_size') + li.collection-stats-item + .collection-stats-label avg. size + .collection-stats-value(data-hook='index_size_average') diff --git a/scout-ui/src/field-list/index.less b/scout-ui/src/field-list/index.less index e95ca75a20c..ae027e1d0d4 100644 --- a/scout-ui/src/field-list/index.less +++ b/scout-ui/src/field-list/index.less @@ -9,7 +9,7 @@ hr.field-divider { margin-bottom: 12px; - border-top: 1px solid @gray6; // @worldhack: was @gray7 + border-top: 1px solid @gray7; } .schema-field-list { diff --git a/scout-ui/src/home/collection.jade b/scout-ui/src/home/collection.jade index adbead08b20..50efd2bcfa2 100644 --- a/scout-ui/src/home/collection.jade +++ b/scout-ui/src/home/collection.jade @@ -1,13 +1,13 @@ .collection-view - .header - .container-fluid - h3(data-hook='name') - .row - .col-md-12 - div(data-hook='stats-subview') - .row - .col-md-12 - div(data-hook='refine-bar') + .sampling-status + span This report is based on a sample of 1000 documents. #[a(href='#') Learn More] + header + .row + .col-md-6 + h1(data-hook='name') + .col-md-6 + div(data-hook='stats-subview') + div(data-hook='refine-bar') .column-container .column.main div(data-hook='fields-subview') diff --git a/scout-ui/src/home/index.less b/scout-ui/src/home/index.less index 287c4d4db95..e859a0d996f 100644 --- a/scout-ui/src/home/index.less +++ b/scout-ui/src/home/index.less @@ -53,24 +53,39 @@ } .collection-view { + .sampling-status { + position: absolute; + margin: 3px 0 0 6px; + z-index: 2; - @header-height: 120px; + span { + font-size: 13px; + font-weight: 200; - .header { - padding-left: 20px; - display: flex; - position: relative; - z-index: 10; - height: @header-height; + a { + font-weight: normal; + } + } } + header { + padding: 12px 20px; + } + .refine-view-container { + background: @gray8; + padding: 15px 20px; + input.form-control.input-sm { + width: 90%; + background: @pw; + height: 28px; + margin-right: 10px; + } + } .column-container { padding-right: 20px; display: flex; overflow: hidden; height: 100vh; - margin-top: -@header-height; - padding-top: @header-height; position: relative; width: 100%; } @@ -85,6 +100,7 @@ } .main { + padding: 0 0 0 20px; flex: 1; } diff --git a/scout-ui/src/minicharts/index.less b/scout-ui/src/minicharts/index.less index 158696e877e..c7d4d3f756f 100644 --- a/scout-ui/src/minicharts/index.less +++ b/scout-ui/src/minicharts/index.less @@ -6,7 +6,7 @@ @mc-blue4: lighten(@mc-blue0, 30%); @mc-blue5: lighten(@mc-blue0, 37.5%); -@mc-bg: @gray6; // @worldhack: was #F2F4F5 +@mc-bg: @gray8; @mc-fg: @mc-blue0; div.minichart.unique { @@ -66,7 +66,7 @@ svg.minichart { font-size: 10px; text { - fill: @gray2; // @worldhack: was @gray4 + fill: @gray4; font-weight: bold; } @@ -129,11 +129,11 @@ svg.minichart { .legend { text { - fill: @gray4; // @worldhack: was @gray5 + fill: @gray5; } line { - stroke: @gray6; // @worldhack: was @gray7 + stroke: @gray7; } shape-rendering: crispEdges; } diff --git a/scout-ui/src/refine-view/index.jade b/scout-ui/src/refine-view/index.jade index 37e0ae66403..04af70eb0dc 100644 --- a/scout-ui/src/refine-view/index.jade +++ b/scout-ui/src/refine-view/index.jade @@ -1,6 +1,5 @@ .refine-view-container - form - .input-group(data-hook='refine-input-group') - input#refineInput.form-control(type='text', data-hook='refine-input') - span.input-group-btn - button.btn.btn-default(type='button', data-hook='refine-button') Refine + form.form-inline + div(data-hook='refine-input-group') + input#refineInput.form-control.input-sm(type='text', data-hook='refine-input') + button.btn.btn-default.btn-sm(type='button', data-hook='refine-button') Refine From 5cc5a59998971288fbfa2221ed100907a8bed72c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc=20Sch=C3=A4ffner-Gurney?= Date: Mon, 29 Jun 2015 15:16:41 -0400 Subject: [PATCH 2/5] added octicons-font-path variable to scout-style/index.less --- scout-style/index.less | 1 + 1 file changed, 1 insertion(+) diff --git a/scout-style/index.less b/scout-style/index.less index ee00db8b2da..c343a65a0ea 100644 --- a/scout-style/index.less +++ b/scout-style/index.less @@ -5,6 +5,7 @@ // Configuration // @import "./variables.less"; +@octicons-font-path: "fonts"; // Tweaks to bootstrap @import "./10strap.less"; From 6d1ca29d3a67deb97c470fa9aab6404ebdf06dc0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc=20Sch=C3=A4ffner-Gurney?= Date: Mon, 29 Jun 2015 15:32:02 -0400 Subject: [PATCH 3/5] added scroll hack back in --- scout-ui/src/home/index.less | 2 ++ 1 file changed, 2 insertions(+) diff --git a/scout-ui/src/home/index.less b/scout-ui/src/home/index.less index e859a0d996f..5d4c7027bf5 100644 --- a/scout-ui/src/home/index.less +++ b/scout-ui/src/home/index.less @@ -86,6 +86,8 @@ display: flex; overflow: hidden; height: 100vh; + margin-top: -168px; // total computed header + .refine-view-container height + padding-top: 168px; // total computed header + .refine-view-container height position: relative; width: 100%; } From 4e314f830ccf3e1fc5a6c6ef54d8fb886593552f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc=20Sch=C3=A4ffner-Gurney?= Date: Mon, 29 Jun 2015 15:44:51 -0400 Subject: [PATCH 4/5] z-index fix for header --- scout-ui/src/home/index.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/scout-ui/src/home/index.less b/scout-ui/src/home/index.less index 5d4c7027bf5..a4630c1d07e 100644 --- a/scout-ui/src/home/index.less +++ b/scout-ui/src/home/index.less @@ -69,10 +69,14 @@ } header { padding: 12px 20px; + position: relative; + z-index: 1; } .refine-view-container { background: @gray8; padding: 15px 20px; + position: relative; + z-index: 1; input.form-control.input-sm { width: 90%; From b0b93f7e285e05673fc0bd406fd6624d04be4f19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc=20Sch=C3=A4ffner-Gurney?= Date: Mon, 29 Jun 2015 17:00:36 -0400 Subject: [PATCH 5/5] small tweak for a few more px of space --- scout-ui/src/home/index.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scout-ui/src/home/index.less b/scout-ui/src/home/index.less index a4630c1d07e..13e52bbe756 100644 --- a/scout-ui/src/home/index.less +++ b/scout-ui/src/home/index.less @@ -74,7 +74,7 @@ } .refine-view-container { background: @gray8; - padding: 15px 20px; + padding: 12px 20px; position: relative; z-index: 1;