Merge "Hacking on AJAX"

[laas.git] / src / templates / dashboard / multiple_select_filter_widget.html

diff --git a/src/templates/dashboard/multiple_select_filter_widget.html b/src/templates/dashboard/multiple_select_filter_widget.html
index e97a41b..ad58ccb 100644 (file)
--- a/src/templates/dashboard/multiple_select_filter_widget.html
+++ b/src/templates/dashboard/multiple_select_filter_widget.html
@@ -1,15 +1,15 @@
 <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>
@@ -17,15 +17,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">