ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-23 09:25:29 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Search] Dynamic positioning and height

Browse Source 
The scroll bar for the search results changes
height according to how many filter options
are displayed above it, without dissapearing
below the bottom of the page.
This commit is contained in:
slhale
2015-08-14 10:19:13 -07:00
parent f38b89a582
commit 26ab9af911
2 changed files with 240 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
platform/commonUI/general/res/css/tree.css
View File

@ -276,13 +276,19 @@ ul.tree {
padding-right: 5px;
top: 23px;
margin-top: 10px; }
/* line 37, ../sass/search/_search.scss */
/* line 34, ../sass/search/_search.scss */
.search-holder .search {
display: flex;
flex-direction: column;
height: 100%; }
/* line 39, ../sass/search/_search.scss */
.search-holder .search .search-bar {
width: 100%;
height: 19px;
margin-top: 4px;
position: relative; }
/* line 47, ../sass/search/_search.scss */
position: relative;
order: 1; }
/* line 50, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-input {
position: relative;
top: -4px;
@ -290,7 +296,7 @@ ul.tree {
height: 19px;
padding-right: 16px;
padding-right: 28px; }
/* line 60, ../sass/search/_search.scss */
/* line 63, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-icon {
color: #737373;
font-size: 12px;
@ -299,18 +305,18 @@ ul.tree {
height: 0;
margin-top: -19px;
transition: visibility .15s, opacity .15s, color .2s; }
/* line 74, ../sass/search/_search.scss */
/* line 77, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-icon.content {
visibility: hidden;
opacity: 0; }
/* line 82, ../sass/search/_search.scss */
/* line 85, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-input:focus + div.search-icon {
visibility: hidden;
opacity: 0; }
/* line 88, ../sass/search/_search.scss */
/* line 91, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-input:hover + div.search-icon {
color: #a6a6a6; }
/* line 92, ../sass/search/_search.scss */
/* line 95, ../sass/search/_search.scss */
.search-holder .search .search-bar .clear-icon {
position: absolute;
display: block;
@ -326,11 +332,11 @@ ul.tree {
transition: visibility .15s, opacity .15s;
right: 16px;
padding-right: 2px; }
/* line 112, ../sass/search/_search.scss */
/* line 115, ../sass/search/_search.scss */
.search-holder .search .search-bar .clear-icon.content {
visibility: visible;
opacity: 1; }
/* line 122, ../sass/search/_search.scss */
/* line 125, ../sass/search/_search.scss */
.search-holder .search .search-bar .menu-icon {
position: absolute;
display: block;
@ -342,18 +348,18 @@ ul.tree {
right: 0px;
top: -3px;
transition: color .2s; }
/* line 138, ../sass/search/_search.scss */
/* line 141, ../sass/search/_search.scss */
.search-holder .search .search-bar .menu-icon:hover {
color: #a6a6a6; }
/* line 143, ../sass/search/_search.scss */
/* line 146, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-menu-holder {
float: right;
margin-top: 17px;
left: -25px; }
/* line 148, ../sass/search/_search.scss */
/* line 151, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-menu-holder .search-menu {
border-top: 0; }
/* line 151, ../sass/search/_search.scss */
/* line 154, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item {
padding-top: 0;
padding-bottom: 0;
@ -361,27 +367,27 @@ ul.tree {
padding-right: 6px;
font-size: 0.8em;
color: #e6e6e6; }
/* line 161, ../sass/search/_search.scss */
/* line 164, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-checkbox {
margin-top: 0.3em;
padding-left: 0;
margin-right: 0;
padding-right: 3px; }
/* line 174, ../sass/search/_search.scss */
/* line 177, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-checkbox em:before {
color: white;
background-color: grey; }
/* line 182, ../sass/search/_search.scss */
/* line 185, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-glyph {
color: #3dcfff; }
/* line 186, ../sass/search/_search.scss */
/* line 189, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item.special {
font-weight: bold;
background-color: #666666; }
/* line 190, ../sass/search/_search.scss */
/* line 193, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item.special .search-menu-label {
font-size: 1.1em; }
/* line 199, ../sass/search/_search.scss */
/* line 202, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-menu-holder:after {
position: absolute;
top: -6px;
@ -391,37 +397,41 @@ ul.tree {
border-bottom: 6px solid #5e5e5e;
border-left: 6px solid transparent;
content: ''; }
/* line 212, ../sass/search/_search.scss */
/* line 215, ../sass/search/_search.scss */
.search-holder .search .search-bar .menu-icon:hover + div.search-menu-holder {
visibility: visible; }
/* line 215, ../sass/search/_search.scss */
/* line 218, ../sass/search/_search.scss */
.search-holder .search .search-bar div.search-menu-holder:hover {
visibility: visible; }
/* line 220, ../sass/search/_search.scss */
/* line 223, ../sass/search/_search.scss */
.search-holder .search .active-filter-display {
font-size: .6em;
height: auto; }
/* line 224, ../sass/search/_search.scss */
margin-bottom: -3px;
order: 2; }
/* line 231, ../sass/search/_search.scss */
.search-holder .search .active-filter-display .clear-filters-icon {
padding: 4px;
position: relative;
margin-left: -4px;
top: 0.2em;
cursor: pointer;
color: #737373;
font-size: 6px; }
/* line 234, ../sass/search/_search.scss */
/* line 244, ../sass/search/_search.scss */
.search-holder .search .active-filter-display .filter-options {
position: relative;
margin-left: 10px;
top: -8px; }
/* line 241, ../sass/search/_search.scss */
/* line 251, ../sass/search/_search.scss */
.search-holder .search .search-scroll {
top: 25px;
overflow-y: auto;
padding-right: 5px;
top: auto;
bottom: auto;
height: 90%; }
/* line 255, ../sass/search/_search.scss */
height: auto;
max-height: 100%;
order: 3;
position: relative; }
/* line 265, ../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;
@ -431,10 +441,10 @@ ul.tree {
border-radius: 2px;
padding-top: 4px;
padding-bottom: 2px; }
/* line 269, ../sass/search/_search.scss */
/* line 279, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item .label {
margin-left: 6px; }
/* line 273, ../sass/search/_search.scss */
/* line 283, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item .label .title-label {
display: inline-block;
position: absolute;
@ -446,47 +456,47 @@ ul.tree {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
/* line 295, ../sass/search/_search.scss */
/* line 305, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item.selected {
background: #005177;
color: #fff; }
/* line 299, ../sass/search/_search.scss */
/* line 309, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item.selected .view-control {
color: #0099cc; }
/* line 302, ../sass/search/_search.scss */
/* line 312, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon {
color: #fff; }
/* line 309, ../sass/search/_search.scss */
/* line 319, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover {
background: #404040;
color: #cccccc; }
/* line 312, ../sass/search/_search.scss */
/* line 322, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger {
display: block; }
/* line 315, ../sass/search/_search.scss */
/* line 325, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon {
color: #33ccff; }
/* line 323, ../sass/search/_search.scss */
/* line 333, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon {
position: relative; }
/* line 325, ../sass/search/_search.scss */
/* line 335, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon.loading {
pointer-events: none;
margin-left: 6px; }
/* line 329, ../sass/search/_search.scss */
/* line 339, ../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 339, ../sass/search/_search.scss */
/* line 349, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon.loading .wait-spinner {
margin-left: 6px; }
/* line 344, ../sass/search/_search.scss */
/* line 354, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon:not(.loading) {
cursor: pointer; }
/* line 349, ../sass/search/_search.scss */
/* line 359, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-more-button {
margin-top: 5px;
margin-bottom: 5px;

24
platform/commonUI/general/res/sass/search/_search.scss
View File

@ -32,7 +32,9 @@
margin-top: 10px;
.search {
//display: block;
display: flex;//block;
flex-direction: column;
height: 100%;
.search-bar {
$heightAdjust: 4px;
@ -43,6 +45,7 @@
margin-top: $heightAdjust;
position: relative;
order: 1;
.search-input {
position: relative;
@ -219,11 +222,18 @@
.active-filter-display {
font-size: .6em;
height: auto;
// Align bottom correctly
margin-bottom: -3px;
order: 2;
.clear-filters-icon {
padding: 4px;
position: relative;
margin-left: -4px;
top: 0.2em;
cursor: pointer;
@ -240,15 +250,15 @@
.search-scroll {
// Spacing away from the search input
top: 25px;
//top: 25px;
overflow-y: auto;
padding-right: $rightPadding;
top: auto;
bottom: auto;
height: 90%;
// It overflows the bottom when active-display-filter
// if height is set to 100%
height: auto;
max-height: 100%;
order: 3;
position: relative;
.results {