Replace and change CSS

Fix animation bugs
Fix layout issues
Replace custom CSS to bootstrap classes
Remove unused files
Change code to use es6 syntax
Add dropdown styles

Change-Id: Ie2ed31fa2e6763cf30d3b19e4bf9379019cbb0f5
Signed-off-by: Brandon Lo <lobrandon1217@gmail.com>

1 files changed, 14 insertions, 144 deletions

diff --git a/src/templates/dashboard/searchable_select_multiple.html b/src/templates/dashboard/searchable_select_multiple.html
index 8bcf890..8299a55 100644
--- a/src/templates/dashboard/searchable_select_multiple.html
+++ b/src/templates/dashboard/searchable_select_multiple.html
@@ -1,19 +1,18 @@
 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
 <script src="/static/js/dashboard.js"></script>
-
-<div id="search_select_outer" class="autocomplete">
-    <div id="warning_pane" style="background: #FFFFFF; color: #CC0000;">
-        {% if incompatible == "true" %}
-        <h3>Warning: Incompatible Configuration</h3>
-        <p>Please make a different selection, as the current config conflicts with the selected pod</p>
-        {% endif %}
-    </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="search_select_outer" class="d-flex flex-column">
+    {% if incompatible == "true" %}
+        <div class="alert alert-danger" role="alert">
+            <h3>Warning: Incompatible Configuration</h3>
+            <p>Please make a different selection, as the current config conflicts with the selected pod</p>
+        </div>
+    {% endif %}
+    <div id="added_counter" class="text-center">
+        <span id="added_number">0</span>
+        <span id="addable_limit">/ {% if selectable_limit > -1 %} {{ selectable_limit }} {% else %} &infin; {% endif %}added</span>
     </div>
 
-    <div id="added_list">
+    <div id="added_list" class="pb-2">
 
     </div>
 
@@ -22,143 +21,14 @@
     >
     </input>
 
-    <input type="hidden" id="selector" name="{{ name }}" class="form-control" style="display: none;"
+    <input type="hidden" id="selector" name="{{ name }}" class="form-control d-none"
     {% if disabled %} disabled {% endif %}
     >
     </input>
 
-    <div id="scroll_restrictor">
-        <ul id="drop_results"></ul>
+    <div id="scroll_restrictor" class="d-flex pb-4 position-relative">
+        <ul id="drop_results" class="list-group w-100 overflow-auto position-absolute"></ul>
     </div>
-    <style>
-        #scroll_restrictor {
-            flex: 1;
-            position: relative;
-            overflow-y: auto;
-            padding-bottom: 10px;
-        }
-
-        #added_list {
-            margin-bottom: 5px;
-        }
-
-        .autocomplete {
-            display: flex;
-            flex: 1;
-            flex-direction: column;
-        }
-        #user_field {
-            font-size: 14pt;
-            padding: 5px;
-            height: 40px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-
-        }
-
-        #drop_results{
-            list-style-type: none;
-            padding: 0;
-            margin: 0;
-            min-height: 0;
-            border: solid 1px #ddd;
-            border-top: none;
-            border-bottom: none;
-            visibility: inherit;
-            flex: 1;
-
-            position: absolute;
-            width: 100%;
-
-        }
-
-        #drop_results li a{
-            font-size: 14pt;
-            background-color: #f6f6f6;
-            padding: 7px;
-            text-decoration: none;
-            display: block;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-
-        #drop_results li a {
-            border-bottom: 1px solid #ddd;
-        }
-
-        .list_entry {
-            border: 1px solid #ccc;
-            border-radius: 5px;
-            margin-top: 5px;
-            vertical-align: middle;
-            line-height: 40px;
-            height: 40px;
-            padding-left: 12px;
-            width: 100%;
-            display: flex;
-        }
-
-        #drop_results li a:hover{
-            background-color: #ffffff;
-        }
-
-        .added_entry_text {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: inline;
-            width: 100%;
-        }
-
-        .btn-remove {
-            float: right;
-            height: 30px;
-            margin: 4px;
-            padding: 1px;
-            max-width: 20%;
-            width: 15%;
-            min-width: 70px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        .entry_tooltip {
-            display: none;
-        }
-
-        #drop_results li a:hover .entry_tooltip {
-            position: absolute;
-            background: #444;
-            color: #ddd;
-            text-align: center;
-            font-size: 12pt;
-            border-radius: 3px;
-
-        }
-
-        #drop_results {
-            max-width: 100%;
-            display: inline-block;
-            list-style-type: none;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-        }
-
-        #drop_results li {
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        #added_counter {
-            text-align: center;
-        }
-
-        #added_number, #addable_limit {
-            display: inline;
-        }
-    </style>
 </div>
 
 <script type="text/javascript">