From e05f16d780816cf635c3b16c09500b9836ed0a91 Mon Sep 17 00:00:00 2001 From: slhale Date: Mon, 3 Aug 2015 13:26:29 -0700 Subject: [PATCH] [Search] Update CSS Slight tweak to the padding of the search view, which affects where the top of the scroll bar appears. Also removed the search scroll div because it was unused. --- platform/commonUI/general/res/css/tree.css | 165 +++++++------- .../general/res/sass/search/_search.scss | 210 +++++++++--------- platform/search/res/templates/search.html | 47 ++-- 3 files changed, 203 insertions(+), 219 deletions(-) diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index cf0d9d3983..0ac7459589 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -275,90 +275,87 @@ ul.tree { .search-holder { overflow-y: auto; padding-right: 5px; - top: 23px; } - /* line 37, ../sass/search/_search.scss */ + top: 23px; + margin-top: 10px; } + /* line 38, ../sass/search/_search.scss */ .search-holder .search .search-input { - margin-top: 10px; width: 100%; } - /* line 43, ../sass/search/_search.scss */ - .search-holder .search .search-scroll { - height: 100%; - overflow: auto; } - /* line 47, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results { - margin-top: 10px; } - /* line 51, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item { - -moz-transition: background-color 0.25s; - -o-transition: background-color 0.25s; - -webkit-transition: background-color 0.25s; - transition: background-color 0.25s; - margin-bottom: 2px; - border-radius: 2px; - padding-top: 4px; - padding-bottom: 2px; } - /* line 65, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item .label { - margin-left: 6px; } - /* line 69, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item .label .title-label { - display: inline-block; - position: absolute; - left: 29px; - right: 5px; - font-size: .8em; - line-height: 17px; - width: auto; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; } - /* line 91, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item.selected { - background: #005177; - color: #fff; } - /* line 95, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item.selected .view-control { - color: #0099cc; } - /* line 98, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon { - color: #fff; } - /* line 105, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover { - background: #404040; - color: #cccccc; } - /* line 108, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { - display: block; } - /* line 111, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon { - color: #33ccff; } - /* line 119, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .load-icon { - position: relative; } - /* line 121, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .load-icon.loading { - pointer-events: none; + /* line 42, ../sass/search/_search.scss */ + .search-holder .search .results { + margin-top: 10px; } + /* line 46, ../sass/search/_search.scss */ + .search-holder .search .results .search-result-item { + -moz-transition: background-color 0.25s; + -o-transition: background-color 0.25s; + -webkit-transition: background-color 0.25s; + transition: background-color 0.25s; + margin-bottom: 2px; + border-radius: 2px; + padding-top: 4px; + padding-bottom: 2px; } + /* line 60, ../sass/search/_search.scss */ + .search-holder .search .results .search-result-item .label { margin-left: 6px; } - /* line 125, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .load-icon.loading .title-label { - font-style: italic; - font-size: .9em; - opacity: 0.5; - margin-left: 26px; - line-height: 24px; } - /* line 135, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .load-icon.loading .wait-spinner { - margin-left: 6px; } - /* line 140, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .load-icon:not(.loading) { - cursor: pointer; } - /* line 145, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .load-more-button { - margin-top: 5px; - margin-bottom: 5px; - position: relative; - left: 25%; - width: 50%; - height: 20px; - line-height: 11px; - font-size: 0.7em; } + /* line 64, ../sass/search/_search.scss */ + .search-holder .search .results .search-result-item .label .title-label { + display: inline-block; + position: absolute; + left: 29px; + right: 5px; + font-size: .8em; + line-height: 17px; + width: auto; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } + /* line 86, ../sass/search/_search.scss */ + .search-holder .search .results .search-result-item.selected { + background: #005177; + color: #fff; } + /* line 90, ../sass/search/_search.scss */ + .search-holder .search .results .search-result-item.selected .view-control { + color: #0099cc; } + /* line 93, ../sass/search/_search.scss */ + .search-holder .search .results .search-result-item.selected .label .type-icon { + color: #fff; } + /* line 100, ../sass/search/_search.scss */ + .search-holder .search .results .search-result-item:not(.selected):hover { + background: #404040; + color: #cccccc; } + /* line 103, ../sass/search/_search.scss */ + .search-holder .search .results .search-result-item:not(.selected):hover .context-trigger { + display: block; } + /* line 106, ../sass/search/_search.scss */ + .search-holder .search .results .search-result-item:not(.selected):hover .icon { + color: #33ccff; } + /* line 114, ../sass/search/_search.scss */ + .search-holder .search .load-icon { + position: relative; } + /* line 116, ../sass/search/_search.scss */ + .search-holder .search .load-icon.loading { + pointer-events: none; + margin-left: 6px; } + /* line 120, ../sass/search/_search.scss */ + .search-holder .search .load-icon.loading .title-label { + font-style: italic; + font-size: .9em; + opacity: 0.5; + margin-left: 26px; + line-height: 24px; } + /* line 130, ../sass/search/_search.scss */ + .search-holder .search .load-icon.loading .wait-spinner { + margin-left: 6px; } + /* line 135, ../sass/search/_search.scss */ + .search-holder .search .load-icon:not(.loading) { + cursor: pointer; } + /* line 140, ../sass/search/_search.scss */ + .search-holder .search .load-more-button { + margin-top: 5px; + margin-bottom: 5px; + position: relative; + left: 25%; + width: 50%; + white-space: nowrap; + height: 20px; + line-height: 11px; + font-size: 0.7em; } diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index c808f12a4f..3f7434a58f 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -30,136 +30,128 @@ padding-right: $rightPadding; top: 23px; + // Align with the top of the divider bar, below create button + margin-top: 10px; + .search { - //height: auto; - //overflow: auto; .search-input { - // Align with the top of the divider bar, below create button - margin-top: 10px; width: 100%; } - .search-scroll { - height: 100%; - overflow: auto; - - .results { - // Spacing away from the search input - margin-top: 10px; + .results { + // Spacing away from the search input + margin-top: 10px; - .search-result-item { - // Include transitions (for the highlights) - @include single-transition(background-color, 0.25s); + .search-result-item { + // Include transitions (for the highlights) + @include single-transition(background-color, 0.25s); - // Space the results from each other - margin-bottom: 2px; + // Space the results from each other + margin-bottom: 2px; - // Make the highlights the right color and shape. - // Attempting to match the style in the tree, but - // while having these be compact. - border-radius: 2px; - padding-top: 4px; - padding-bottom: 2px; + // Make the highlights the right color and shape. + // Attempting to match the style in the tree, but + // while having these be compact. + border-radius: 2px; + padding-top: 4px; + padding-bottom: 2px; - .label { - // Give some padding away from the left side - margin-left: $leftMargin; - - .title-label { - display: inline-block; - position: absolute; - - // Give some padding away from the left side - left: $leftMargin + 3px + $iconWidth; - // and the right side - right: $rightPadding; - - // Size and position the text - font-size: .8em; - line-height: 17px; - - // Hide overflow text - width: auto; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - - // Change styling when it's selected - &.selected { - $c: #fff; - background: $colorKeySelectedBg; - color: $c; - .view-control { - color: $colorItemTreeIcon; - } - .label .type-icon { - color: #fff; - } - } - - // Change styling when it's being hovered over - &:not(.selected) { - &:hover { - background: lighten($colorBodyBg, 5%); - color: lighten($colorBodyFg, 20%); - .context-trigger { - display: block; - } - .icon { - color: $colorItemTreeIconHover; - } - } - } - } - } - - .load-icon { - position: relative; - &.loading { - pointer-events: none; + .label { + // Give some padding away from the left side margin-left: $leftMargin; .title-label { - // Text styling - font-style: italic; - font-size: .9em; - opacity: 0.5; + display: inline-block; + position: absolute; - // Text positioning - margin-left: $iconWidth + $leftMargin; - line-height: 24px; - } - .wait-spinner { - margin-left: $leftMargin; + // Give some padding away from the left side + left: $leftMargin + 3px + $iconWidth; + // and the right side + right: $rightPadding; + + // Size and position the text + font-size: .8em; + line-height: 17px; + + // Hide overflow text + width: auto; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } } - &:not(.loading) { - cursor: pointer; + // Change styling when it's selected + &.selected { + $c: #fff; + background: $colorKeySelectedBg; + color: $c; + .view-control { + color: $colorItemTreeIcon; + } + .label .type-icon { + color: #fff; + } + } + + // Change styling when it's being hovered over + &:not(.selected) { + &:hover { + background: lighten($colorBodyBg, 5%); + color: lighten($colorBodyFg, 20%); + .context-trigger { + display: block; + } + .icon { + color: $colorItemTreeIconHover; + } + } + } + } + } + + .load-icon { + position: relative; + &.loading { + pointer-events: none; + margin-left: $leftMargin; + + .title-label { + // Text styling + font-style: italic; + font-size: .9em; + opacity: 0.5; + + // Text positioning + margin-left: $iconWidth + $leftMargin; + line-height: 24px; + } + .wait-spinner { + margin-left: $leftMargin; } } - .load-more-button { - // Space away form the results list - margin-top: 5px; - margin-bottom: 5px; - - // Center it - position: relative; - left: 25%; - width: 50%; - - // Make smallish button - height: 20px; - line-height: 11px; - font-size: 0.7em; + &:not(.loading) { + cursor: pointer; } - - // temp - //margin-bottom: 30px; + } + + .load-more-button { + // Space away form the results list + margin-top: 5px; + margin-bottom: 5px; + + // Center it + position: relative; + left: 25%; + width: 50%; + white-space: nowrap; + + // Make smallish button + height: 20px; + line-height: 11px; + font-size: 0.7em; } } } \ No newline at end of file diff --git a/platform/search/res/templates/search.html b/platform/search/res/templates/search.html index 9dba6ae5f2..c58ba56737 100644 --- a/platform/search/res/templates/search.html +++ b/platform/search/res/templates/search.html @@ -35,33 +35,28 @@ - -
- - -
- - -
+ +
+ + +
- -
- - Loading... -
+ +
+ + Loading... +
- -
- -
- + +
+
\ No newline at end of file