Refactor usages of search field

Change-Id: I5af3d8d5db204fc9eb95a1ee4967cce0caf9b75c
Signed-off-by: Sawyer Bergeron <sbergeron@iol.unh.edu>

3 files changed, 104 insertions, 47 deletions

diff --git a/dashboard/src/templates/booking/quick_deploy.html b/dashboard/src/templates/booking/quick_deploy.html
index f0a2bc1..2fbd035 100644
--- a/dashboard/src/templates/booking/quick_deploy.html
+++ b/dashboard/src/templates/booking/quick_deploy.html
@@ -26,6 +26,10 @@
     .grid_element_2third {
         grid-column-start: span 8;
     }
+    .collaborator_pane {
+        display: flex;
+        flex-direction: column;
+    }
     #id_length {
         -moz-appearance: none;
         border: none;
diff --git a/dashboard/src/templates/dashboard/genericselect.html b/dashboard/src/templates/dashboard/genericselect.html
index fc29ee6..a03f759 100644
--- a/dashboard/src/templates/dashboard/genericselect.html
+++ b/dashboard/src/templates/dashboard/genericselect.html
@@ -6,52 +6,92 @@
 {% block content %}
 
 <style>
-#{{select_type}}_form_div {
-        width: 100%;
-        padding: 5%;
+    #page-wrapper {
+        display: flex;
+        flex-direction: column;
     }
 
-    .panel {
-        border: none;
+    #{{select_type}}_form_div div {
     }
-    .select_panels {
-        width: 100%;
+
+    #{{select_type}}_form_div > *:not(.divider) {
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+
+    #{{select_type}}_form_div div * {
+    }
+
+    #{{select_type}}_form_div {
+        flex: 1;
+        margin: 30px;
         display: grid;
-        grid-template-columns: 45% 10% 45%;
+        grid-template-rows: auto 1px auto 1fr;
+        grid-template-columns: repeat(24, 1fr);
+        grid-row-gap: 15px;
+    }
+
+    #select_section {
+        display: flex;
+        flex-direction: column;
+        grid-column-start: 3;
+        grid-column-end: 21;
+    }
+
+    #{{select_type}}_select_form {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
 
+    .autocomplete {
+        flex: 1;
     }
 
-    .panel_center {
-        text-align: center;
-        border: none;
+    #create_section {
+        grid-column-start: 1;
+        grid-column-end: 24;
+    }
 
+    #select_header_section {
+        grid-column: 1 / 24;
     }
-    .panel_center p{
-        font-size: 20pt;
+
+    h3 {
+        margin-top: 0;
+        margin-bottom: 0;
+        vertical-align: middle;
+    }
+
+    .divider {
+        border-top: 1px solid #ccc;
+        grid-column-start: 1;
+        grid-column-end: 24;
     }
+
+
 </style>
 
 <div id="{{select_type}}_form_div">
-    <div class="select_panels">
-        <div class="panel_chooser panel">
-            <form id="{{select_type}}_select_form" method="post" action="" class="form" id="{{select_type}}selectorform">
-            {% csrf_token %}
-            {{ form|default:"<p>no form loaded</p>" }}
-            {% buttons %}
-
-            {% endbuttons %}
-            </form>
-        </div>
-        <div class="panel_center panel"><p>OR</p></div>
-        <div class="panel_add panel">
-            <button class="btn {% if disabled %} disabled {% endif %}"
-                style="width: 100%; height: 100%;"
-                {% if not disabled %}onclick="parent.add_wf({{addable_type_num}})"
-                {% endif %}>Create {{select_type_title}}
-            </button>
-        </div>
+    <h3 id="create_section">Create a Resource
+        <button class="btn btn-primary {% if disabled %} disabled {% endif %}"
+            {% if not disabled %}onclick="parent.add_wf({{addable_type_num}})"
+            {% endif %}>Here
+        </button>
+    </h3>
+    <div class="divider"></div>
+    <h3 id="select_header_section">Or select from the list below:</h3>
+    <div id="select_section">
+        <form id="{{select_type}}_select_form" method="post" action="" class="form" id="{{select_type}}selectorform">
+        {% csrf_token %}
+        {{ form|default:"<p>no form loaded</p>" }}
+        {% buttons %}
+
+        {% endbuttons %}
+        </form>
     </div>
 </div>
+
 <script>
     {% if disabled %}
     disable();
diff --git a/dashboard/src/templates/dashboard/searchable_select_multiple.html b/dashboard/src/templates/dashboard/searchable_select_multiple.html
index 588b693..c594a27 100644
--- a/dashboard/src/templates/dashboard/searchable_select_multiple.html
+++ b/dashboard/src/templates/dashboard/searchable_select_multiple.html
@@ -7,6 +7,15 @@
         <p>Please make a different selection, as the current config conflicts with the selected pod</p>
         {% endif %}
     </div>
+
+    <div id="added_list">
+
+    </div>
+    <div id="added_counter">
+        <p id="added_number">0</p>
+        <p id="addable_limit">/ {% if selectable_limit > -1 %} {{ selectable_limit }} {% else %} &infin; {% endif %}added</p>
+    </div>
+
     <input id="user_field" name="ignore_this" class="form-control" autocomplete="off" type="text" placeholder="{{placeholder}}" value="" oninput="search(this.value)"
     {% if disabled %} disabled {% endif %}
     >
@@ -17,16 +26,20 @@
     >
     </input>
 
-    <ul id="drop_results"></ul>
-
-    <div id="added_list">
-
-    </div>
-    <div id="added_counter">
-        <p id="added_number">0</p>
-        <p id="addable_limit">/ {% if selectable_limit > -1 %} {{ selectable_limit }} {% else %} &infin; {% endif %}added</p>
+    <div id="scroll_restrictor">
+        <ul id="drop_results"></ul>
     </div>
     <style>
+        #scroll_restrictor {
+            flex: 1;
+            position: relative;
+            overflow-y: auto;
+        }
+        .autocomplete {
+            display: flex;
+            flex: 1;
+            flex-direction: column;
+        }
         #user_field {
             font-size: 14pt;
             padding: 5px;
@@ -37,14 +50,16 @@
             list-style-type: none;
             padding: 0;
             margin: 0;
-            max-height: 300px;
             min-height: 0;
-            overflow-y: scroll;
-            overflow-x: hidden;
             border: solid 1px #ddd;
             border-top: none;
             border-bottom: none;
-            display: none;
+            visibility: hidden;
+            flex: 1;
+
+            position: absolute;
+            width: 100%;
+            box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
 
         }
 
@@ -104,7 +119,6 @@
         }
 
         #drop_results li a:hover .entry_tooltip {
-            display: block;
             position: absolute;
             background: #444;
             color: #ddd;
@@ -135,7 +149,6 @@
         #added_number, #addable_limit {
             display: inline;
         }
-
     </style>
 </div>
 
@@ -386,11 +399,11 @@
 
         if( !drop.firstChild )
         {
-            drop.style.display = 'none';
+            drop.style.visibility = 'hidden';
         }
         else
         {
-            drop.style.display = 'block';
+            drop.style.visibility = 'inherit';
         }
     }