minor UI fixes 09/68209/2
authorSawyer Bergeron <sbergeron@iol.unh.edu>
Wed, 10 Jul 2019 13:36:34 +0000 (09:36 -0400)
committerSawyer Bergeron <sbergeron@iol.unh.edu>
Wed, 10 Jul 2019 13:46:44 +0000 (13:46 +0000)
Change-Id: I70b35ee7f62d8b2f22c8677e6c817c3e6a9b3412
Signed-off-by: Sawyer Bergeron <sbergeron@iol.unh.edu>
src/static/js/dashboard.js
src/templates/dashboard/multiple_select_filter_widget.html
src/templates/workflow/viewport-base.html

index b74ead9..8e1250a 100644 (file)
@@ -386,13 +386,18 @@ class MultipleSelectFilterWidget {
     add_item_prepopulate(node, prepopulate){
         const div = document.createElement("DIV");
         div.id = "dropdown_" + this.dropdown_count;
-        div.classList.add("list-group-item");
+        div.classList.add("card", "flex-row", "d-flex", "mb-2");
         this.dropdown_count++;
         const label = document.createElement("H5")
         label.appendChild(document.createTextNode(node['name']))
+        label.classList.add("p-1", "m-1");
         div.appendChild(label);
-        div.appendChild(this.make_input(div, node, prepopulate));
-        div.appendChild(this.make_remove_button(div, node));
+        let input = this.make_input(div, node, prepopulate);
+        input.classList.add("flex-grow-1", "p-1", "m-1");
+        div.appendChild(input);
+        let remove_btn = this.make_remove_button(div, node);
+        remove_btn.classList.add("p-1", "m-1");
+        div.appendChild(remove_btn);
         document.getElementById("dropdown_wrapper").appendChild(div);
         return div;
     }
index ad58ccb..aee5f23 100644 (file)
@@ -35,7 +35,9 @@
     {% endfor %}
 </div>
 
-<div id="dropdown_wrapper" class="px-3 list-group-flush w-25 mt-2">
+<div id="dropdown_row" class="row">
+    <div id="dropdown_wrapper" class="col-12 col-lg-6 d-flex flex-column pt-2 mx-0 px-1">
+    </div>
 </div>
 <script>
 function multipleSelectFilterWidgetEntry() {
index 02c5597..4ae2ff3 100644 (file)
@@ -47,7 +47,7 @@
 <div class="row d-flex flex-column flex-grow-1">
     <div class="container-fluid d-flex flex-column h-100">
         <div class="row d-flex flex-grow-1 p-4">
-            <div class="col-12 d-flex border flex-grow-1 px-0">
+            <div class="col-12 d-flex flex-grow-1 px-0">
                 <div id="formContainer" class="h-100 w-100"></div>
             </div>
         </div>