From 26ab9af911415f6f7e1320d489dbe2c5042b072e Mon Sep 17 00:00:00 2001
From: slhale <sarah.hale@nasa.gov>
Date: Fri, 14 Aug 2015 10:19:13 -0700
Subject: [PATCH] [Search] Dynamic positioning and height

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.
---
 platform/commonUI/general/res/css/tree.css    | 436 +++++++++---------
 .../general/res/sass/search/_search.scss      |  24 +-
 2 files changed, 240 insertions(+), 220 deletions(-)

diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index f2e96f8adc..cf7456fcb1 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -276,224 +276,234 @@ ul.tree {
   padding-right: 5px;
   top: 23px;
   margin-top: 10px; }
-  /* line 37, ../sass/search/_search.scss */
-  .search-holder .search .search-bar {
-    width: 100%;
-    height: 19px;
-    margin-top: 4px;
-    position: relative; }
-    /* line 47, ../sass/search/_search.scss */
-    .search-holder .search .search-bar .search-input {
-      position: relative;
-      top: -4px;
+  /* 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;
-      padding-right: 16px;
-      padding-right: 28px; }
-    /* line 60, ../sass/search/_search.scss */
-    .search-holder .search .search-bar .search-icon {
-      color: #737373;
-      font-size: 12px;
-      margin-left: 3px;
-      width: 0;
-      height: 0;
-      margin-top: -19px;
-      transition: visibility .15s, opacity .15s, color .2s; }
-      /* line 74, ../sass/search/_search.scss */
-      .search-holder .search .search-bar .search-icon.content {
+      margin-top: 4px;
+      position: relative;
+      order: 1; }
+      /* line 50, ../sass/search/_search.scss */
+      .search-holder .search .search-bar .search-input {
+        position: relative;
+        top: -4px;
+        width: 100%;
+        height: 19px;
+        padding-right: 16px;
+        padding-right: 28px; }
+      /* line 63, ../sass/search/_search.scss */
+      .search-holder .search .search-bar .search-icon {
+        color: #737373;
+        font-size: 12px;
+        margin-left: 3px;
+        width: 0;
+        height: 0;
+        margin-top: -19px;
+        transition: visibility .15s, opacity .15s, color .2s; }
+        /* line 77, ../sass/search/_search.scss */
+        .search-holder .search .search-bar .search-icon.content {
+          visibility: hidden;
+          opacity: 0; }
+      /* line 85, ../sass/search/_search.scss */
+      .search-holder .search .search-bar .search-input:focus + div.search-icon {
         visibility: hidden;
         opacity: 0; }
-    /* line 82, ../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 */
-    .search-holder .search .search-bar .search-input:hover + div.search-icon {
-      color: #a6a6a6; }
-    /* line 92, ../sass/search/_search.scss */
-    .search-holder .search .search-bar .clear-icon {
-      position: absolute;
-      display: block;
-      cursor: pointer;
-      color: #737373;
-      font-size: 6px;
-      padding: 6px;
-      padding-left: 4px;
-      right: 0px;
-      top: -3px;
-      visibility: hidden;
-      opacity: 0;
-      transition: visibility .15s, opacity .15s;
-      right: 16px;
-      padding-right: 2px; }
-      /* line 112, ../sass/search/_search.scss */
-      .search-holder .search .search-bar .clear-icon.content {
-        visibility: visible;
-        opacity: 1; }
-    /* line 122, ../sass/search/_search.scss */
-    .search-holder .search .search-bar .menu-icon {
-      position: absolute;
-      display: block;
-      cursor: pointer;
-      color: #737373;
-      font-size: 6px;
-      padding: 6px;
-      padding-left: 4px;
-      right: 0px;
-      top: -3px;
-      transition: color .2s; }
-      /* line 138, ../sass/search/_search.scss */
-      .search-holder .search .search-bar .menu-icon:hover {
+      /* line 91, ../sass/search/_search.scss */
+      .search-holder .search .search-bar .search-input:hover + div.search-icon {
         color: #a6a6a6; }
-    /* line 143, ../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 */
-      .search-holder .search .search-bar .search-menu-holder .search-menu {
-        border-top: 0; }
+      /* line 95, ../sass/search/_search.scss */
+      .search-holder .search .search-bar .clear-icon {
+        position: absolute;
+        display: block;
+        cursor: pointer;
+        color: #737373;
+        font-size: 6px;
+        padding: 6px;
+        padding-left: 4px;
+        right: 0px;
+        top: -3px;
+        visibility: hidden;
+        opacity: 0;
+        transition: visibility .15s, opacity .15s;
+        right: 16px;
+        padding-right: 2px; }
+        /* line 115, ../sass/search/_search.scss */
+        .search-holder .search .search-bar .clear-icon.content {
+          visibility: visible;
+          opacity: 1; }
+      /* line 125, ../sass/search/_search.scss */
+      .search-holder .search .search-bar .menu-icon {
+        position: absolute;
+        display: block;
+        cursor: pointer;
+        color: #737373;
+        font-size: 6px;
+        padding: 6px;
+        padding-left: 4px;
+        right: 0px;
+        top: -3px;
+        transition: color .2s; }
+        /* line 141, ../sass/search/_search.scss */
+        .search-holder .search .search-bar .menu-icon:hover {
+          color: #a6a6a6; }
+      /* line 146, ../sass/search/_search.scss */
+      .search-holder .search .search-bar .search-menu-holder {
+        float: right;
+        margin-top: 17px;
+        left: -25px; }
         /* line 151, ../sass/search/_search.scss */
-        .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item {
-          padding-top: 0;
-          padding-bottom: 0;
-          padding-left: 4px;
-          padding-right: 6px;
-          font-size: 0.8em;
-          color: #e6e6e6; }
-          /* line 161, ../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 */
-            .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 */
-          .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-glyph {
-            color: #3dcfff; }
-          /* line 186, ../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 */
-            .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 */
-    .search-holder .search .search-bar .search-menu-holder:after {
-      position: absolute;
-      top: -6px;
-      left: 10px;
-      display: inline-block;
-      border-right: 6px solid transparent;
-      border-bottom: 6px solid #5e5e5e;
-      border-left: 6px solid transparent;
-      content: ''; }
-    /* line 212, ../sass/search/_search.scss */
-    .search-holder .search .search-bar .menu-icon:hover + div.search-menu-holder {
-      visibility: visible; }
-    /* line 215, ../sass/search/_search.scss */
-    .search-holder .search .search-bar div.search-menu-holder:hover {
-      visibility: visible; }
-  /* line 220, ../sass/search/_search.scss */
-  .search-holder .search .active-filter-display {
-    font-size: .6em;
-    height: auto; }
-    /* line 224, ../sass/search/_search.scss */
-    .search-holder .search .active-filter-display .clear-filters-icon {
-      padding: 4px;
-      margin-left: -4px;
-      cursor: pointer;
-      color: #737373;
-      font-size: 6px; }
-    /* line 234, ../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 */
-  .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 */
-    .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 269, ../sass/search/_search.scss */
-      .search-holder .search .search-scroll .results .search-result-item .label {
-        margin-left: 6px; }
-        /* line 273, ../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 295, ../sass/search/_search.scss */
-      .search-holder .search .search-scroll .results .search-result-item.selected {
-        background: #005177;
-        color: #fff; }
-        /* line 299, ../sass/search/_search.scss */
-        .search-holder .search .search-scroll .results .search-result-item.selected .view-control {
-          color: #0099cc; }
-        /* line 302, ../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 */
-      .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover {
-        background: #404040;
-        color: #cccccc; }
-        /* line 312, ../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 */
-        .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon {
-          color: #33ccff; }
-    /* line 323, ../sass/search/_search.scss */
-    .search-holder .search .search-scroll .load-icon {
+        .search-holder .search .search-bar .search-menu-holder .search-menu {
+          border-top: 0; }
+          /* 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;
+            padding-left: 4px;
+            padding-right: 6px;
+            font-size: 0.8em;
+            color: #e6e6e6; }
+            /* 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 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 185, ../sass/search/_search.scss */
+            .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-glyph {
+              color: #3dcfff; }
+            /* 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 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 202, ../sass/search/_search.scss */
+      .search-holder .search .search-bar .search-menu-holder:after {
+        position: absolute;
+        top: -6px;
+        left: 10px;
+        display: inline-block;
+        border-right: 6px solid transparent;
+        border-bottom: 6px solid #5e5e5e;
+        border-left: 6px solid transparent;
+        content: ''; }
+      /* line 215, ../sass/search/_search.scss */
+      .search-holder .search .search-bar .menu-icon:hover + div.search-menu-holder {
+        visibility: visible; }
+      /* line 218, ../sass/search/_search.scss */
+      .search-holder .search .search-bar div.search-menu-holder:hover {
+        visibility: visible; }
+    /* line 223, ../sass/search/_search.scss */
+    .search-holder .search .active-filter-display {
+      font-size: .6em;
+      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 244, ../sass/search/_search.scss */
+      .search-holder .search .active-filter-display .filter-options {
+        position: relative;
+        margin-left: 10px;
+        top: -8px; }
+    /* line 251, ../sass/search/_search.scss */
+    .search-holder .search .search-scroll {
+      overflow-y: auto;
+      padding-right: 5px;
+      top: auto;
+      height: auto;
+      max-height: 100%;
+      order: 3;
       position: relative; }
-      /* line 325, ../sass/search/_search.scss */
-      .search-holder .search .search-scroll .load-icon.loading {
-        pointer-events: none;
-        margin-left: 6px; }
-        /* line 329, ../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 */
-        .search-holder .search .search-scroll .load-icon.loading .wait-spinner {
+      /* 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;
+        -webkit-transition: background-color 0.25s;
+        transition: background-color 0.25s;
+        margin-bottom: 2px;
+        border-radius: 2px;
+        padding-top: 4px;
+        padding-bottom: 2px; }
+        /* line 279, ../sass/search/_search.scss */
+        .search-holder .search .search-scroll .results .search-result-item .label {
           margin-left: 6px; }
-      /* line 344, ../sass/search/_search.scss */
-      .search-holder .search .search-scroll .load-icon:not(.loading) {
-        cursor: pointer; }
-    /* line 349, ../sass/search/_search.scss */
-    .search-holder .search .search-scroll .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; }
+          /* line 283, ../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 305, ../sass/search/_search.scss */
+        .search-holder .search .search-scroll .results .search-result-item.selected {
+          background: #005177;
+          color: #fff; }
+          /* line 309, ../sass/search/_search.scss */
+          .search-holder .search .search-scroll .results .search-result-item.selected .view-control {
+            color: #0099cc; }
+          /* line 312, ../sass/search/_search.scss */
+          .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon {
+            color: #fff; }
+        /* line 319, ../sass/search/_search.scss */
+        .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover {
+          background: #404040;
+          color: #cccccc; }
+          /* line 322, ../sass/search/_search.scss */
+          .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger {
+            display: block; }
+          /* line 325, ../sass/search/_search.scss */
+          .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon {
+            color: #33ccff; }
+      /* line 333, ../sass/search/_search.scss */
+      .search-holder .search .search-scroll .load-icon {
+        position: relative; }
+        /* line 335, ../sass/search/_search.scss */
+        .search-holder .search .search-scroll .load-icon.loading {
+          pointer-events: none;
+          margin-left: 6px; }
+          /* 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 349, ../sass/search/_search.scss */
+          .search-holder .search .search-scroll .load-icon.loading .wait-spinner {
+            margin-left: 6px; }
+        /* line 354, ../sass/search/_search.scss */
+        .search-holder .search .search-scroll .load-icon:not(.loading) {
+          cursor: pointer; }
+      /* line 359, ../sass/search/_search.scss */
+      .search-holder .search .search-scroll .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 5919984899..0c15c449c2 100644
--- a/platform/commonUI/general/res/sass/search/_search.scss
+++ b/platform/commonUI/general/res/sass/search/_search.scss
@@ -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 {