ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-05-29 05:34:18 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

[Frontend] Cleanups and enhancements to search

Browse Source 
open #250
Fixed margin/spacing problems with results element;
Added transition to results display;
Begin adding # results found / no results messaging;
Moved class .off to _globals.scss;
This commit is contained in:
Charles Hacskaylo 2015-11-05 17:04:19 -08:00
parent c0ac3a0f96
commit 063e97fcb5
6 changed files with 415 additions and 353 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
platform/commonUI/general/res/sass/_archetypes.scss
View File

@ -101,6 +101,7 @@
.flex-elem { .flex-elem {
//@include test(green, 0.1); //@include test(green, 0.1);
min-height: 0; // Needed to allow element to shrink within parent min-height: 0; // Needed to allow element to shrink within parent
position: relative;
&:not(.grows) { &:not(.grows) {
@include flex(0 0 auto); @include flex(0 0 auto);
} }

10
platform/commonUI/general/res/sass/_global.scss
View File

@ -142,6 +142,16 @@ mct-container {
display: none !important; display: none !important;
} }
.off {
visibility: hidden;
opacity: 0;
height: 0;
margin: 0;
padding: 0;
border: 0;
margin: 0 !important;
}
.sep { .sep {
color: rgba(#fff, 0.2); color: rgba(#fff, 0.2);
} }

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

@ -23,7 +23,7 @@
/*.abs.search-holder { /*.abs.search-holder {
//@include test(#990000); //@include test(#990000);
height: $treeSearchInputBarH; height: $treeSearchInputBarH;
bottom: 0; bottom: 0;s
&.active { &.active {
height: auto; height: auto;
bottom: 0; bottom: 0;
@ -35,9 +35,22 @@
z-index:5; z-index:5;
}*/ }*/
.clear-icon,
.menu-icon {
cursor: pointer;
font-family: symbolsfont;
@include trans-prop-nice((opacity, color), 150ms);
}
.clear-icon {
// 'x' in circle icon
&:before {
content: '\e607';
}
}
.holder-search { .holder-search {
$iconWidth: 20px; $iconWidth: 20px;
height: $ueTopBarH;
.search-bar { .search-bar {
$textInputHeight: 19px; // This is equal to the default value, 19px $textInputHeight: 19px; // This is equal to the default value, 19px
@ -58,7 +71,6 @@
.menu-icon { .menu-icon {
@include box-sizing(border-box); @include box-sizing(border-box);
color: $colorInputIcon; color: $colorInputIcon;
font-family: symbolsfont;
height: $iconD; height: $iconD;
width: $iconD; width: $iconD;
line-height: $iconD; line-height: $iconD;
@ -67,13 +79,6 @@
top: $iconEdgeM; top: $iconEdgeM;
} }
.clear-icon,
.menu-icon {
cursor: pointer;
@include trans-prop-nice((opacity, color), 150ms);
}
.search-input { .search-input {
position: relative; position: relative;
width: 100%; width: 100%;
@ -89,6 +94,7 @@
&:before { &:before {
// Magnify glass icon // Magnify glass icon
content:'\4d'; content:'\4d';
font-family: symbolsfont;
left: $interiorMarginSm; left: $interiorMarginSm;
@include trans-prop-nice(color, 250ms); @include trans-prop-nice(color, 250ms);
pointer-events: none; pointer-events: none;
@ -100,8 +106,6 @@
} }
.clear-icon { .clear-icon {
// 'x' in circle icon
&:before { content: '\e607'; }
right: $iconD + $interiorMargin; right: $iconD + $interiorMargin;
// Icon is visible only when there is text input // Icon is visible only when there is text input
@ -133,13 +137,8 @@
.search-menu-holder { .search-menu-holder {
float: right; float: right;
left: -20px; left: -20px;
z-index: 1; z-index: 3;
transition: visibility .05s, opacity .05s; transition: visibility .05s, opacity .05s;
&.off {
visibility: hidden;
opacity: 0;
}
} }
//// Hovering reveals menu //// Hovering reveals menu
@ -155,13 +154,13 @@
//order: 2; //order: 2;
$s: 0.65em; $s: 0.65em;
$p: $interiorMargin; $p: $interiorMargin;
@include border-radius($basicCr); //@include border-radius($basicCr);
@include box-sizing(border-box); @include box-sizing(border-box);
line-height: 130%; line-height: 130%;
padding: $p 0; //padding: $p 0;
padding-left: $s * 2.25; padding-left: $s * 2.25;
font-size: $s; font-size: $s;
margin-top: $interiorMarginSm; //margin-top: $interiorMarginSm;
.clear-filters-icon { .clear-filters-icon {
@ -175,17 +174,22 @@
// Transition looks weird when the results list has none // Transition looks weird when the results list has none
//transition: visibility .2s, opacity .2s; //transition: visibility .2s, opacity .2s;
&.off {
visibility: hidden;
opacity: 0;
height: 0;
margin: 0;
padding: 0;
border: 0;
}
} }
.search-scroll { .search-results {
@include trans-prop-nice((opacity, visibility), 250ms);
//visibility: hidden;
//opacity: 0;
.hint {
margin-bottom: $interiorMarginLg;
font-size: 0.65em;
opacity: 0.6;
//padding: 0 $interiorMargin;
}
&.active {
visibility: visible;
opacity: 1;
}
.load-more-button { .load-more-button {
@include transform(translateX(-50%)); @include transform(translateX(-50%));
display: inline-block; display: inline-block;

333
platform/commonUI/themes/espresso/res/css/theme-espresso.css
View File

@ -517,18 +517,19 @@ mct-container {
/* line 101, ../../../../general/res/sass/_archetypes.scss */ /* line 101, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-elem, .l-flex .flex-elem, .l-flex-row .flex-elem, .l-flex .flex-elem,
.l-flex-col .flex-elem { .l-flex-col .flex-elem {
min-height: 0; } min-height: 0;
/* line 104, ../../../../general/res/sass/_archetypes.scss */ position: relative; }
/* line 105, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-elem:not(.grows), .l-flex .flex-elem:not(.grows), .l-flex-row .flex-elem:not(.grows), .l-flex .flex-elem:not(.grows),
.l-flex-col .flex-elem:not(.grows) { .l-flex-col .flex-elem:not(.grows) {
-webkit-flex: 0 0 auto; -webkit-flex: 0 0 auto;
flex: 0 0 auto; } flex: 0 0 auto; }
/* line 107, ../../../../general/res/sass/_archetypes.scss */ /* line 108, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-elem.grows, .l-flex .flex-elem.grows, .l-flex-row .flex-elem.grows, .l-flex .flex-elem.grows,
.l-flex-col .flex-elem.grows { .l-flex-col .flex-elem.grows {
-webkit-flex: 1 1 auto; -webkit-flex: 1 1 auto;
flex: 1 1 auto; } flex: 1 1 auto; }
/* line 111, ../../../../general/res/sass/_archetypes.scss */ /* line 112, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-container, .l-flex .flex-container, .l-flex-row .flex-container, .l-flex .flex-container,
.l-flex-col .flex-container { .l-flex-col .flex-container {
display: -webkit-flex; display: -webkit-flex;
@ -539,28 +540,28 @@ mct-container {
flex: 1 1 auto; flex: 1 1 auto;
min-height: 0; } min-height: 0; }
/* line 120, ../../../../general/res/sass/_archetypes.scss */ /* line 121, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row, .l-flex { .l-flex-row, .l-flex {
-webkit-flex-direction: row; -webkit-flex-direction: row;
flex-direction: row; } flex-direction: row; }
/* line 122, ../../../../general/res/sass/_archetypes.scss */ /* line 123, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-container, .l-flex .flex-container { .l-flex-row .flex-container, .l-flex .flex-container {
-webkit-flex-direction: row; -webkit-flex-direction: row;
flex-direction: row; } flex-direction: row; }
/* line 125, ../../../../general/res/sass/_archetypes.scss */ /* line 126, ../../../../general/res/sass/_archetypes.scss */
.l-flex-col { .l-flex-col {
-webkit-flex-direction: column; -webkit-flex-direction: column;
flex-direction: column; } flex-direction: column; }
/* line 128, ../../../../general/res/sass/_archetypes.scss */ /* line 129, ../../../../general/res/sass/_archetypes.scss */
.l-flex-col .flex-elem:not(:first-child) { .l-flex-col .flex-elem:not(:first-child) {
margin-top: 10px; } margin-top: 10px; }
/* line 130, ../../../../general/res/sass/_archetypes.scss */ /* line 131, ../../../../general/res/sass/_archetypes.scss */
.l-flex-col .flex-container { .l-flex-col .flex-container {
-webkit-flex-direction: column; -webkit-flex-direction: column;
flex-direction: column; } flex-direction: column; }
/* line 135, ../../../../general/res/sass/_archetypes.scss */ /* line 136, ../../../../general/res/sass/_archetypes.scss */
.l-flex .left { .l-flex .left {
-webkit-flex: 1 1 0; -webkit-flex: 1 1 0;
flex: 1 1 0; flex: 1 1 0;
@ -5154,7 +5155,7 @@ span.req {
/*.abs.search-holder { /*.abs.search-holder {
//@include test(#990000); //@include test(#990000);
height: $treeSearchInputBarH; height: $treeSearchInputBarH;
bottom: 0; bottom: 0;s
&.active { &.active {
height: auto; height: auto;
bottom: 0; bottom: 0;
@ -5166,153 +5167,177 @@ span.req {
z-index:5; z-index:5;
}*/ }*/
/* line 38, ../../../../general/res/sass/search/_search.scss */ /* line 38, ../../../../general/res/sass/search/_search.scss */
.holder-search { .clear-icon,
height: 24px; } .menu-icon {
/* line 42, ../../../../general/res/sass/search/_search.scss */ cursor: pointer;
.holder-search .search-bar { font-family: symbolsfont;
font-size: 0.8em; -moz-transition-property: opacity, color;
max-width: 250px; -o-transition-property: opacity, color;
position: relative; } -webkit-transition-property: opacity, color;
/* line 51, ../../../../general/res/sass/search/_search.scss */ transition-property: opacity, color;
.holder-search .search-bar .search-input { -moz-transition-duration: 150ms;
height: 25px; -o-transition-duration: 150ms;
line-height: 25px; } -webkit-transition-duration: 150ms;
/* line 56, ../../../../general/res/sass/search/_search.scss */ transition-duration: 150ms;
.holder-search .search-bar:before, -moz-transition-timing-function: ease-in-out;
.holder-search .search-bar .clear-icon, -o-transition-timing-function: ease-in-out;
.holder-search .search-bar .menu-icon { -webkit-transition-timing-function: ease-in-out;
-moz-box-sizing: border-box; transition-timing-function: ease-in-out;
-webkit-box-sizing: border-box; -moz-transition-delay: 0;
box-sizing: border-box; -o-transition-delay: 0;
color: #737373; -webkit-transition-delay: 0;
font-family: symbolsfont; transition-delay: 0; }
height: 17px;
width: 17px; /* line 47, ../../../../general/res/sass/search/_search.scss */
line-height: 17px; .clear-icon:before {
position: absolute; content: '\e607'; }
text-align: center;
top: 4px; } /* line 52, ../../../../general/res/sass/search/_search.scss */
/* line 70, ../../../../general/res/sass/search/_search.scss */ .off {
.holder-search .search-bar .clear-icon, visibility: hidden;
.holder-search .search-bar .menu-icon { opacity: 0;
cursor: pointer; height: 0;
-moz-transition-property: opacity, color; margin: 0;
-o-transition-property: opacity, color; padding: 0;
-webkit-transition-property: opacity, color; border: 0;
transition-property: opacity, color; margin: 0 !important; }
-moz-transition-duration: 150ms;
-o-transition-duration: 150ms; /* line 65, ../../../../general/res/sass/search/_search.scss */
-webkit-transition-duration: 150ms; .holder-search .search-bar {
transition-duration: 150ms; font-size: 0.8em;
-moz-transition-timing-function: ease-in-out; max-width: 250px;
-o-transition-timing-function: ease-in-out; position: relative; }
-webkit-transition-timing-function: ease-in-out; /* line 74, ../../../../general/res/sass/search/_search.scss */
transition-timing-function: ease-in-out; .holder-search .search-bar .search-input {
-moz-transition-delay: 0; height: 25px;
-o-transition-delay: 0; line-height: 25px; }
-webkit-transition-delay: 0; /* line 79, ../../../../general/res/sass/search/_search.scss */
transition-delay: 0; } .holder-search .search-bar:before,
/* line 77, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-bar .clear-icon,
.holder-search .search-bar .search-input { .holder-search .search-bar .menu-icon {
position: relative;
width: 100%;
padding-left: 22px !important;
padding-right: 44px !important; }
/* line 84, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-input input {
width: inherit; }
/* line 89, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar:before {
content: '\4d';
left: 3px;
-moz-transition-property: color;
-o-transition-property: color;
-webkit-transition-property: color;
transition-property: color;
-moz-transition-duration: 250ms;
-o-transition-duration: 250ms;
-webkit-transition-duration: 250ms;
transition-duration: 250ms;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-moz-transition-delay: 0;
-o-transition-delay: 0;
-webkit-transition-delay: 0;
transition-delay: 0;
pointer-events: none; }
/* line 98, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar:hover:before {
color: #8c8c8c; }
/* line 102, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon {
right: 22px;
visibility: hidden;
opacity: 0; }
/* line 104, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon:before {
content: '\e607'; }
/* line 110, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon.show {
visibility: visible;
opacity: 1; }
/* line 115, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon:hover {
color: #8c8c8c; }
/* line 120, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon {
font-size: 0.8em;
padding-right: 4px;
right: 4px;
text-align: right; }
/* line 122, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon:before {
content: '\76'; }
/* line 128, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon:hover {
color: #8c8c8c; }
/* line 133, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-menu-holder {
float: right;
left: -20px;
z-index: 1;
transition: visibility .05s, opacity .05s; }
/* line 139, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-menu-holder.off {
visibility: hidden;
opacity: 0; }
/* line 154, ../../../../general/res/sass/search/_search.scss */
.holder-search .active-filter-display {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
line-height: 130%; color: #737373;
padding: 5px 0; height: 17px;
padding-left: 1.4625em; width: 17px;
font-size: 0.65em; line-height: 17px;
margin-top: 3px; } position: absolute;
/* line 167, ../../../../general/res/sass/search/_search.scss */ text-align: center;
.holder-search .active-filter-display .clear-filters-icon { top: 4px; }
color: #737373; /* line 92, ../../../../general/res/sass/search/_search.scss */
opacity: 1; .holder-search .search-bar .search-input {
font-size: 0.8em; position: relative;
position: absolute; width: 100%;
left: 1px; padding-left: 22px !important;
cursor: pointer; } padding-right: 44px !important; }
/* line 178, ../../../../general/res/sass/search/_search.scss */ /* line 99, ../../../../general/res/sass/search/_search.scss */
.holder-search .active-filter-display.off { .holder-search .search-bar .search-input input {
width: inherit; }
/* line 104, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar:before {
content: '\4d';
font-family: symbolsfont;
left: 3px;
-moz-transition-property: color;
-o-transition-property: color;
-webkit-transition-property: color;
transition-property: color;
-moz-transition-duration: 250ms;
-o-transition-duration: 250ms;
-webkit-transition-duration: 250ms;
transition-duration: 250ms;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-moz-transition-delay: 0;
-o-transition-delay: 0;
-webkit-transition-delay: 0;
transition-delay: 0;
pointer-events: none; }
/* line 114, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar:hover:before {
color: #8c8c8c; }
/* line 118, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon {
right: 22px;
visibility: hidden;
opacity: 0; }
/* line 124, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon.show {
visibility: visible;
opacity: 1; }
/* line 129, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon:hover {
color: #8c8c8c; }
/* line 134, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon {
font-size: 0.8em;
padding-right: 4px;
right: 4px;
text-align: right; }
/* line 136, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon:before {
content: '\76'; }
/* line 142, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon:hover {
color: #8c8c8c; }
/* line 147, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-menu-holder {
float: right;
left: -20px;
z-index: 3;
transition: visibility .05s, opacity .05s; }
/* line 153, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-menu-holder.off {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0; }
height: 0; /* line 168, ../../../../general/res/sass/search/_search.scss */
margin: 0; .holder-search .active-filter-display {
padding: 0; -moz-box-sizing: border-box;
border: 0; } -webkit-box-sizing: border-box;
/* line 189, ../../../../general/res/sass/search/_search.scss */ box-sizing: border-box;
.holder-search .search-scroll .load-more-button { line-height: 130%;
padding-left: 1.4625em;
font-size: 0.65em; }
/* line 181, ../../../../general/res/sass/search/_search.scss */
.holder-search .active-filter-display .clear-filters-icon {
color: #737373;
opacity: 1;
font-size: 0.8em;
position: absolute;
left: 1px;
cursor: pointer; }
/* line 194, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results {
-moz-transition-property: opacity, visibility;
-o-transition-property: opacity, visibility;
-webkit-transition-property: opacity, visibility;
transition-property: opacity, visibility;
-moz-transition-duration: 250ms;
-o-transition-duration: 250ms;
-webkit-transition-duration: 250ms;
transition-duration: 250ms;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-moz-transition-delay: 0;
-o-transition-delay: 0;
-webkit-transition-delay: 0;
transition-delay: 0; }
/* line 198, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results .hint {
margin-bottom: 10px;
font-size: 0.65em;
opacity: 0.6; }
/* line 204, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results.active {
visibility: visible;
opacity: 1; }
/* line 208, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results .load-more-button {
-moz-transform: translateX(-50%); -moz-transform: translateX(-50%);
-ms-transform: translateX(-50%); -ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%); -webkit-transform: translateX(-50%);

333
platform/commonUI/themes/snow/res/css/theme-snow.css
View File

@ -517,18 +517,19 @@ mct-container {
/* line 101, ../../../../general/res/sass/_archetypes.scss */ /* line 101, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-elem, .l-flex .flex-elem, .l-flex-row .flex-elem, .l-flex .flex-elem,
.l-flex-col .flex-elem { .l-flex-col .flex-elem {
min-height: 0; } min-height: 0;
/* line 104, ../../../../general/res/sass/_archetypes.scss */ position: relative; }
/* line 105, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-elem:not(.grows), .l-flex .flex-elem:not(.grows), .l-flex-row .flex-elem:not(.grows), .l-flex .flex-elem:not(.grows),
.l-flex-col .flex-elem:not(.grows) { .l-flex-col .flex-elem:not(.grows) {
-webkit-flex: 0 0 auto; -webkit-flex: 0 0 auto;
flex: 0 0 auto; } flex: 0 0 auto; }
/* line 107, ../../../../general/res/sass/_archetypes.scss */ /* line 108, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-elem.grows, .l-flex .flex-elem.grows, .l-flex-row .flex-elem.grows, .l-flex .flex-elem.grows,
.l-flex-col .flex-elem.grows { .l-flex-col .flex-elem.grows {
-webkit-flex: 1 1 auto; -webkit-flex: 1 1 auto;
flex: 1 1 auto; } flex: 1 1 auto; }
/* line 111, ../../../../general/res/sass/_archetypes.scss */ /* line 112, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-container, .l-flex .flex-container, .l-flex-row .flex-container, .l-flex .flex-container,
.l-flex-col .flex-container { .l-flex-col .flex-container {
display: -webkit-flex; display: -webkit-flex;
@ -539,28 +540,28 @@ mct-container {
flex: 1 1 auto; flex: 1 1 auto;
min-height: 0; } min-height: 0; }
/* line 120, ../../../../general/res/sass/_archetypes.scss */ /* line 121, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row, .l-flex { .l-flex-row, .l-flex {
-webkit-flex-direction: row; -webkit-flex-direction: row;
flex-direction: row; } flex-direction: row; }
/* line 122, ../../../../general/res/sass/_archetypes.scss */ /* line 123, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-container, .l-flex .flex-container { .l-flex-row .flex-container, .l-flex .flex-container {
-webkit-flex-direction: row; -webkit-flex-direction: row;
flex-direction: row; } flex-direction: row; }
/* line 125, ../../../../general/res/sass/_archetypes.scss */ /* line 126, ../../../../general/res/sass/_archetypes.scss */
.l-flex-col { .l-flex-col {
-webkit-flex-direction: column; -webkit-flex-direction: column;
flex-direction: column; } flex-direction: column; }
/* line 128, ../../../../general/res/sass/_archetypes.scss */ /* line 129, ../../../../general/res/sass/_archetypes.scss */
.l-flex-col .flex-elem:not(:first-child) { .l-flex-col .flex-elem:not(:first-child) {
margin-top: 10px; } margin-top: 10px; }
/* line 130, ../../../../general/res/sass/_archetypes.scss */ /* line 131, ../../../../general/res/sass/_archetypes.scss */
.l-flex-col .flex-container { .l-flex-col .flex-container {
-webkit-flex-direction: column; -webkit-flex-direction: column;
flex-direction: column; } flex-direction: column; }
/* line 135, ../../../../general/res/sass/_archetypes.scss */ /* line 136, ../../../../general/res/sass/_archetypes.scss */
.l-flex .left { .l-flex .left {
-webkit-flex: 1 1 0; -webkit-flex: 1 1 0;
flex: 1 1 0; flex: 1 1 0;
@ -5076,7 +5077,7 @@ span.req {
/*.abs.search-holder { /*.abs.search-holder {
//@include test(#990000); //@include test(#990000);
height: $treeSearchInputBarH; height: $treeSearchInputBarH;
bottom: 0; bottom: 0;s
&.active { &.active {
height: auto; height: auto;
bottom: 0; bottom: 0;
@ -5088,153 +5089,177 @@ span.req {
z-index:5; z-index:5;
}*/ }*/
/* line 38, ../../../../general/res/sass/search/_search.scss */ /* line 38, ../../../../general/res/sass/search/_search.scss */
.holder-search { .clear-icon,
height: 24px; } .menu-icon {
/* line 42, ../../../../general/res/sass/search/_search.scss */ cursor: pointer;
.holder-search .search-bar { font-family: symbolsfont;
font-size: 0.8em; -moz-transition-property: opacity, color;
max-width: 250px; -o-transition-property: opacity, color;
position: relative; } -webkit-transition-property: opacity, color;
/* line 51, ../../../../general/res/sass/search/_search.scss */ transition-property: opacity, color;
.holder-search .search-bar .search-input { -moz-transition-duration: 150ms;
height: 25px; -o-transition-duration: 150ms;
line-height: 25px; } -webkit-transition-duration: 150ms;
/* line 56, ../../../../general/res/sass/search/_search.scss */ transition-duration: 150ms;
.holder-search .search-bar:before, -moz-transition-timing-function: ease-in-out;
.holder-search .search-bar .clear-icon, -o-transition-timing-function: ease-in-out;
.holder-search .search-bar .menu-icon { -webkit-transition-timing-function: ease-in-out;
-moz-box-sizing: border-box; transition-timing-function: ease-in-out;
-webkit-box-sizing: border-box; -moz-transition-delay: 0;
box-sizing: border-box; -o-transition-delay: 0;
color: #a6a6a6; -webkit-transition-delay: 0;
font-family: symbolsfont; transition-delay: 0; }
height: 17px;
width: 17px; /* line 47, ../../../../general/res/sass/search/_search.scss */
line-height: 17px; .clear-icon:before {
position: absolute; content: '\e607'; }
text-align: center;
top: 4px; } /* line 52, ../../../../general/res/sass/search/_search.scss */
/* line 70, ../../../../general/res/sass/search/_search.scss */ .off {
.holder-search .search-bar .clear-icon, visibility: hidden;
.holder-search .search-bar .menu-icon { opacity: 0;
cursor: pointer; height: 0;
-moz-transition-property: opacity, color; margin: 0;
-o-transition-property: opacity, color; padding: 0;
-webkit-transition-property: opacity, color; border: 0;
transition-property: opacity, color; margin: 0 !important; }
-moz-transition-duration: 150ms;
-o-transition-duration: 150ms; /* line 65, ../../../../general/res/sass/search/_search.scss */
-webkit-transition-duration: 150ms; .holder-search .search-bar {
transition-duration: 150ms; font-size: 0.8em;
-moz-transition-timing-function: ease-in-out; max-width: 250px;
-o-transition-timing-function: ease-in-out; position: relative; }
-webkit-transition-timing-function: ease-in-out; /* line 74, ../../../../general/res/sass/search/_search.scss */
transition-timing-function: ease-in-out; .holder-search .search-bar .search-input {
-moz-transition-delay: 0; height: 25px;
-o-transition-delay: 0; line-height: 25px; }
-webkit-transition-delay: 0; /* line 79, ../../../../general/res/sass/search/_search.scss */
transition-delay: 0; } .holder-search .search-bar:before,
/* line 77, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-bar .clear-icon,
.holder-search .search-bar .search-input { .holder-search .search-bar .menu-icon {
position: relative;
width: 100%;
padding-left: 22px !important;
padding-right: 44px !important; }
/* line 84, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-input input {
width: inherit; }
/* line 89, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar:before {
content: '\4d';
left: 3px;
-moz-transition-property: color;
-o-transition-property: color;
-webkit-transition-property: color;
transition-property: color;
-moz-transition-duration: 250ms;
-o-transition-duration: 250ms;
-webkit-transition-duration: 250ms;
transition-duration: 250ms;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-moz-transition-delay: 0;
-o-transition-delay: 0;
-webkit-transition-delay: 0;
transition-delay: 0;
pointer-events: none; }
/* line 98, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar:hover:before {
color: #8c8c8c; }
/* line 102, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon {
right: 22px;
visibility: hidden;
opacity: 0; }
/* line 104, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon:before {
content: '\e607'; }
/* line 110, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon.show {
visibility: visible;
opacity: 1; }
/* line 115, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon:hover {
color: #8c8c8c; }
/* line 120, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon {
font-size: 0.8em;
padding-right: 4px;
right: 4px;
text-align: right; }
/* line 122, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon:before {
content: '\76'; }
/* line 128, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon:hover {
color: #8c8c8c; }
/* line 133, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-menu-holder {
float: right;
left: -20px;
z-index: 1;
transition: visibility .05s, opacity .05s; }
/* line 139, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-menu-holder.off {
visibility: hidden;
opacity: 0; }
/* line 154, ../../../../general/res/sass/search/_search.scss */
.holder-search .active-filter-display {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
line-height: 130%; color: #a6a6a6;
padding: 5px 0; height: 17px;
padding-left: 1.4625em; width: 17px;
font-size: 0.65em; line-height: 17px;
margin-top: 3px; } position: absolute;
/* line 167, ../../../../general/res/sass/search/_search.scss */ text-align: center;
.holder-search .active-filter-display .clear-filters-icon { top: 4px; }
color: #a6a6a6; /* line 92, ../../../../general/res/sass/search/_search.scss */
opacity: 1; .holder-search .search-bar .search-input {
font-size: 0.8em; position: relative;
position: absolute; width: 100%;
left: 1px; padding-left: 22px !important;
cursor: pointer; } padding-right: 44px !important; }
/* line 178, ../../../../general/res/sass/search/_search.scss */ /* line 99, ../../../../general/res/sass/search/_search.scss */
.holder-search .active-filter-display.off { .holder-search .search-bar .search-input input {
width: inherit; }
/* line 104, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar:before {
content: '\4d';
font-family: symbolsfont;
left: 3px;
-moz-transition-property: color;
-o-transition-property: color;
-webkit-transition-property: color;
transition-property: color;
-moz-transition-duration: 250ms;
-o-transition-duration: 250ms;
-webkit-transition-duration: 250ms;
transition-duration: 250ms;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-moz-transition-delay: 0;
-o-transition-delay: 0;
-webkit-transition-delay: 0;
transition-delay: 0;
pointer-events: none; }
/* line 114, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar:hover:before {
color: #8c8c8c; }
/* line 118, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon {
right: 22px;
visibility: hidden;
opacity: 0; }
/* line 124, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon.show {
visibility: visible;
opacity: 1; }
/* line 129, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon:hover {
color: #8c8c8c; }
/* line 134, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon {
font-size: 0.8em;
padding-right: 4px;
right: 4px;
text-align: right; }
/* line 136, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon:before {
content: '\76'; }
/* line 142, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon:hover {
color: #8c8c8c; }
/* line 147, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-menu-holder {
float: right;
left: -20px;
z-index: 3;
transition: visibility .05s, opacity .05s; }
/* line 153, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-menu-holder.off {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0; }
height: 0; /* line 168, ../../../../general/res/sass/search/_search.scss */
margin: 0; .holder-search .active-filter-display {
padding: 0; -moz-box-sizing: border-box;
border: 0; } -webkit-box-sizing: border-box;
/* line 189, ../../../../general/res/sass/search/_search.scss */ box-sizing: border-box;
.holder-search .search-scroll .load-more-button { line-height: 130%;
padding-left: 1.4625em;
font-size: 0.65em; }
/* line 181, ../../../../general/res/sass/search/_search.scss */
.holder-search .active-filter-display .clear-filters-icon {
color: #a6a6a6;
opacity: 1;
font-size: 0.8em;
position: absolute;
left: 1px;
cursor: pointer; }
/* line 194, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results {
-moz-transition-property: opacity, visibility;
-o-transition-property: opacity, visibility;
-webkit-transition-property: opacity, visibility;
transition-property: opacity, visibility;
-moz-transition-duration: 250ms;
-o-transition-duration: 250ms;
-webkit-transition-duration: 250ms;
transition-duration: 250ms;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-moz-transition-delay: 0;
-o-transition-delay: 0;
-webkit-transition-delay: 0;
transition-delay: 0; }
/* line 198, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results .hint {
margin-bottom: 10px;
font-size: 0.65em;
opacity: 0.6; }
/* line 204, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results.active {
visibility: visible;
opacity: 1; }
/* line 208, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results .load-more-button {
-moz-transform: translateX(-50%); -moz-transform: translateX(-50%);
-ms-transform: translateX(-50%); -ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%); -webkit-transform: translateX(-50%);

27
platform/search/res/templates/search.html
View File

@ -51,27 +51,24 @@
ng-class="{off: ngModel.filtersString === '' || ngModel.filtersString === undefined || !ngModel.search}" ng-class="{off: ngModel.filtersString === '' || ngModel.filtersString === undefined || !ngModel.search}"
ng-controller="SearchMenuController as menuController"> ng-controller="SearchMenuController as menuController">
<a class="ui-symbol clear-filters-icon" <a class="clear-icon clear-filters-icon"
ng-click="ngModel.checkAll = true; menuController.checkAll()"> ng-click="ngModel.checkAll = true; menuController.checkAll()"></a>Filtered by: {{ ngModel.filtersString }}
&#xe607;
</a>
Filtered by: {{ ngModel.filtersString }}
</div> </div>
<!-- This div exists to determine scroll bar location --> <!-- This div exists to determine scroll bar location -->
<div class="search-scroll flex-elem grows vscroll" ng-class="{ loading: loading }"> <div class="search-results flex-elem grows vscroll"
ng-class="{ off: !(loading || results.length > 0), loading: loading }">
<!-- Results list --> <!--ng-hide="(ngModel.input === '' || ngModel.input === undefined)"-->
<div class="results">
<mct-representation key="'search-item'"
ng-repeat="result in results"
mct-object="result.object"
ng-model="ngModel">
</mct-representation>
</div>
<!--<div class="hint" ng-show="results.length === 0">No results found</div>-->
<!--<div class="hint" ng-show="results.length > 0">Displaying {{ results.length }} result<span ng-show="results.length > 1">s</span></div>-->
<mct-representation key="'search-item'"
ng-repeat="result in results"
mct-object="result.object"
ng-model="ngModel">
</mct-representation>
<!-- Load more button --> <!-- Load more button -->
<a class="load-more-button s-btn vsm" ng-if="controller.areMore()" ng-click="controller.loadMore()">More Results</a> <a class="load-more-button s-btn vsm" ng-if="controller.areMore()" ng-click="controller.loadMore()">More Results</a>
</div> </div>