Redesign multiple select filter widget

Removed the right border on the lab selection box so
that it looks better on mobile, replaced with a
rounded border around the content.

Also fixed the button click bug where it wouldn't filter
the images list. It now properly processes the selected
host and disables images accordingly.

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

4 files changed, 28 insertions, 30 deletions

diff --git a/src/static/css/base.css b/src/static/css/base.css
index 1494e77..a2d5b05 100644
--- a/src/static/css/base.css
+++ b/src/static/css/base.css
@@ -66,9 +66,6 @@ a[aria-expanded="true"] > i.rotate {
     box-shadow: 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(109, 243, 76, 0.6);
     transition: border-color ease-in-out .1s,box-shadow ease-in-out .1s;
 }
-#grid_wrapper > .row > div:first-child {
-    border-right: 1px solid gray;
-}
 
 /* Cursor effects */
 .not-allowed {
diff --git a/src/templates/booking/quick_deploy.html b/src/templates/booking/quick_deploy.html
index 50ec59a..6776980 100644
--- a/src/templates/booking/quick_deploy.html
+++ b/src/templates/booking/quick_deploy.html
@@ -7,13 +7,13 @@
 <form id="quick_booking_form" action="/booking/quick/" method="POST" class="form">
     {% csrf_token %}
     <div class="container-fluid">
-        <div class="row">
-            <div class="col-12 px-1 my-2">
-                <div class="col py-2 rounded border">
-                    <p>Please select a host type you wish to book. Only available types are shown.</p>
-                    {% bootstrap_field form.filter_field show_label=False %}
-                </div>
+        <div class="row mx-0 px-0">
+            <div class="col-12 mx-0 px-0 mt-2">
+                <p class="my-0">Please select a host type you wish to book. Only available types are shown.</p>
+                {% bootstrap_field form.filter_field show_label=False %}
             </div>
+        </div>
+        <div class="row">
             <div class="col-12 col-lg-3 px-1 my-2">
                 <div class="col border rounded py-2 h-100">
                     {% bootstrap_field form.purpose %}
@@ -80,11 +80,8 @@
     var sup_installer_dict = {{installer_filter | safe}};
     var sup_scenario_dict = {{scenario_filter | safe}};
 
-    function imageHider() {
+    function imageFilter() {
         var drop = document.getElementById("id_image");
-
-        hide_dropdown("id_image");
-
         var lab_pk = get_selected_value("lab");
         var host_pk = get_selected_value("host");
 
@@ -92,21 +89,18 @@
             var image_object = sup_image_dict[childNode.value];
             if (image_object) //weed out empty option
             {
-                if (image_object.host_profile == host_pk && image_object.lab == lab_pk) {
-                    childNode.style.display = "inherit";
-                    childNode.disabled = false;
-                }
+                childNode.disabled = !(image_object.host_profile == host_pk && image_object.lab == lab_pk);
             }
         }
     }
 
-    imageHider();
+    imageFilter();
     $('#id_installer').children().hide();
     $('#id_scenario').children().hide();
 
 
     Array.from(document.getElementsByClassName("grid-item-select-btn")).forEach(function (element) {
-        element.addEventListener('click', imageHider);
+        element.addEventListener('click', imageFilter);
     });
 
     function installerHider() {
diff --git a/src/templates/dashboard/multiple_select_filter_widget.html b/src/templates/dashboard/multiple_select_filter_widget.html
index 4a65bd9..4068919 100644
--- a/src/templates/dashboard/multiple_select_filter_widget.html
+++ b/src/templates/dashboard/multiple_select_filter_widget.html
@@ -2,17 +2,17 @@
 </script>
 
 <input name="filter_field" id="filter_field" type="hidden"/>
-<div id="grid_wrapper" class="container-fluid p-4">
-    <div class="row">
-        {% for object_class, object_list in display_objects %}
-            <div class="col-12 col-lg d-flex flex-column pt-2 my-2">
+<div class="row">
+    {% for object_class, object_list in display_objects %}
+        <div class="col-12 col-lg-6 d-flex flex-column pt-2 mx-0 px-1">
+            <div class="col mx-0 border rounded py-2 flex-grow-1 d-flex flex-column">
                 <div class="w-100">
                     <h4 class="text-capitalize">{{object_class}}</h4>
                 </div>
-                <div id="{{object_class}}" class="row h-100">
+                <div id="{{object_class}}" class="row flex-grow-1">
                 {% for obj in object_list %}
-                    <div class="col-12 col-md-6 col-xl-4 my-2">
-                        <div id="{{ obj.id|default:'not_provided' }}" class="card h-100" onclick="multi_filter_widget.processClick('{{obj.id}}');">
+                    <div class="col-12 col-md-6 col-xl-4 my-2 d-flex flex-grow-1">
+                        <div id="{{ obj.id|default:'not_provided' }}" class="card flex-grow-1">
                             <div class="card-header">
                                 <p class="h5 font-weight-bold mt-2">{{obj.name}}</p>
                             </div>
@@ -20,15 +20,22 @@
                                 <p class="grid-item-description">{{obj.description}}</p>
                             </div>
                             <div class="card-footer">
-                                <button type="button" class="btn btn-success grid-item-select-btn w-100">{% if obj.multiple %}Add{% else %}Select{% endif %}</button>
+                                <button type="button" class="btn btn-success grid-item-select-btn w-100 stretched-link"
+                                        onclick="multi_filter_widget.processClick('{{obj.id}}');">
+                                    {% if obj.multiple %}
+                                        Add
+                                    {% else %}
+                                        Select
+                                    {% endif %}
+                                </button>
                             </div>
                         </div>
                     </div>
                 {% endfor %}
                 </div>
             </div>
-        {% endfor %}
-    </div>
+        </div>
+    {% endfor %}
 </div>
 
 <div id="dropdown_wrapper" class="px-3 list-group-flush w-25 mt-2">
diff --git a/src/templates/resource/steps/define_hardware.html b/src/templates/resource/steps/define_hardware.html
index 33a7d8e..2cb37da 100644
--- a/src/templates/resource/steps/define_hardware.html
+++ b/src/templates/resource/steps/define_hardware.html
@@ -9,7 +9,7 @@ As you make your selections, labs and hosts that are not compatible
 with your current configuration will become unavailable.</p>
 <h4>NOTE: Only PTL's are able to create multi-node PODs. See <a href="https://google.com">here</a>
     for more details</h4>
-<form id="step_form" method="post">
+<form id="step_form" method="post" class="px-3">
     {% csrf_token %}
     {{form.filter_field|default:"<p>No Form</p>"}}
 </form>