From 8c08f7b93e6428c82026335de7cb13cfe9868cf9 Mon Sep 17 00:00:00 2001 From: shale Date: Thu, 23 Jul 2015 09:25:10 -0700 Subject: [PATCH] [Search] Less space above tree Removed the awkward spacing between the filetree and the search bar. Now 'My Items' appears just below the search bar. Also added .search-holder to the sass, but haven't done anything with it yet. --- .../general/res/css/theme-espresso.css | 6 +- platform/commonUI/general/res/css/tree.css | 79 ++++++----- .../general/res/sass/search/_layout.scss | 12 +- .../general/res/sass/search/_search.scss | 134 +++++++++--------- .../features/search/res/templates/search.html | 2 +- 5 files changed, 127 insertions(+), 106 deletions(-) diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 08446c1b32..afba02c116 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -700,10 +700,14 @@ mct-container { * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 27, ../sass/search/_layout.scss */ +/* line 29, ../sass/search/_layout.scss */ .split-layout.vertical > .pane:first-child .holder { position: relative; } +/* line 42, ../sass/search/_layout.scss */ +.pane.treeview.left .tree-holder { + top: 0; } + /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 8dca5804c4..d7e21b33b9 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -271,41 +271,44 @@ ul.tree { * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 27, ../sass/search/_search.scss */ -.search .search-input { - margin-top: 10px; - width: 100%; } -/* line 33, ../sass/search/_search.scss */ -.search .results { - margin-top: 10px; } - /* line 37, ../sass/search/_search.scss */ - .search .results .search-result-item { - margin-bottom: 5px; - background: #005177; - border-radius: 2px; - padding-top: 2px; - padding-bottom: 1px; } - /* line 47, ../sass/search/_search.scss */ - .search .results .search-result-item .label { - margin-left: 6px; } - /* line 56, ../sass/search/_search.scss */ - .search .results .search-result-item .label .title-label { - display: inline-block; - position: absolute; - width: auto; - left: 29px; - right: 0; - font-size: .8em; - line-height: 17px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; } -/* line 79, ../sass/search/_search.scss */ -.search .load-more-button { - margin-top: 5px; - position: relative; - left: 25%; - width: 50%; - height: 20px; - line-height: 11px; - font-size: 0.7em; } +/* line 22, ../sass/search/_search.scss */ +.search-holder { + overflow-y: auto; } + /* line 30, ../sass/search/_search.scss */ + .search-holder .search .search-input { + margin-top: 10px; + width: 100%; } + /* line 36, ../sass/search/_search.scss */ + .search-holder .search .results { + margin-top: 10px; } + /* line 40, ../sass/search/_search.scss */ + .search-holder .search .results .search-result-item { + margin-bottom: 5px; + background: #005177; + border-radius: 2px; + padding-top: 2px; + padding-bottom: 1px; } + /* line 50, ../sass/search/_search.scss */ + .search-holder .search .results .search-result-item .label { + margin-left: 6px; } + /* line 59, ../sass/search/_search.scss */ + .search-holder .search .results .search-result-item .label .title-label { + display: inline-block; + position: absolute; + width: auto; + left: 29px; + right: 0; + font-size: .8em; + line-height: 17px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } + /* line 82, ../sass/search/_search.scss */ + .search-holder .search .load-more-button { + margin-top: 5px; + position: relative; + left: 25%; + width: 50%; + height: 20px; + line-height: 11px; + font-size: 0.7em; } diff --git a/platform/commonUI/general/res/sass/search/_layout.scss b/platform/commonUI/general/res/sass/search/_layout.scss index 795c3e6627..90b4c0c28c 100644 --- a/platform/commonUI/general/res/sass/search/_layout.scss +++ b/platform/commonUI/general/res/sass/search/_layout.scss @@ -20,6 +20,8 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ +// Overrides some styling in user-environ/_layout.scss + .split-layout { &.vertical { >.pane { @@ -32,6 +34,14 @@ } } } - } } + +.pane { + &.treeview.left { + .tree-holder { + // Want tree holder to start right below the search bar + top: 0; + } + } +} \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index 9c72ec1d64..fa6dab7e10 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -19,75 +19,79 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ - -.search { - $iconWidth: 20px; - $leftMargin: 6px; +.search-holder { + //position: relative; + overflow-y: auto; // This should make it scroll, but isn't wokring :( - .search-input { - // Align with the top of the divider bar, below create button - margin-top: 10px; - width: 100%; - } - - .results { - // Spacing away from the search input - margin-top: 10px; + .search { + $iconWidth: 20px; + $leftMargin: 6px; - .search-result-item { - // Space the results from each other - margin-bottom: 5px; - - // Make the highlights the right color and shape - background: $colorKeySelectedBg; // Later make this apply to only certain ones - border-radius: 2px; - padding-top: 2px; - padding-bottom: 1px; - - .label { - // Give some padding away from the left side - margin-left: $leftMargin; - - .type-icon { - .icon { - } - } - - .title-label { - display: inline-block; - position: absolute; - + .search-input { + // Align with the top of the divider bar, below create button + margin-top: 10px; + width: 100%; + } + + .results { + // Spacing away from the search input + margin-top: 10px; + + .search-result-item { + // Space the results from each other + margin-bottom: 5px; + + // Make the highlights the right color and shape + background: $colorKeySelectedBg; // Later make this apply to only certain ones + border-radius: 2px; + padding-top: 2px; + padding-bottom: 1px; + + .label { // Give some padding away from the left side - width: auto; - left: $leftMargin + 3px + $iconWidth; - right: 0; - - // Size and position the text - font-size: .8em; - line-height: 17px; - - // Hide overflow text - // Only works when width is defined - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + margin-left: $leftMargin; + + .type-icon { + .icon { + } + } + + .title-label { + display: inline-block; + position: absolute; + + // Give some padding away from the left side + width: auto; + left: $leftMargin + 3px + $iconWidth; + right: 0; + + // Size and position the text + font-size: .8em; + line-height: 17px; + + // Hide overflow text + // Only works when width is defined + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } } } - } - } - - .load-more-button { - // Space away form the results list - margin-top: 5px; - - // Center it - position: relative; - left: 25%; - width: 50%; - - // Make smallish button - height: 20px; - line-height: 11px; - font-size: 0.7em; + } + + .load-more-button { + // Space away form the results list + margin-top: 5px; + + // Center it + position: relative; + left: 25%; + width: 50%; + + // Make smallish button + height: 20px; + line-height: 11px; + font-size: 0.7em; + } } } \ No newline at end of file diff --git a/platform/features/search/res/templates/search.html b/platform/features/search/res/templates/search.html index 1577730044..932330da69 100644 --- a/platform/features/search/res/templates/search.html +++ b/platform/features/search/res/templates/search.html @@ -38,7 +38,7 @@ - +