diff options
| author |   Brandon Lo <lobrandon1217@gmail.com> | 2019-07-03 12:32:15 -0400 |
|---|---|---|
| committer | Brandon Lo <lobrandon1217@gmail.com> | 2019-07-08 09:34:33 -0400 |
| commit | 0ef4a10abef7fc58c9ab1db8060cf6eb2caca94a (patch) | |
| tree | 4a04871555a32c82394063fc2c2bbbf27fefa994 /src/templates/dashboard | |
| parent | e0b8bb3ee3c218a65562acdc5e76f714aab92926 (diff) | |
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>
Diffstat (limited to 'src/templates/dashboard')
| -rw-r--r-- | src/templates/dashboard/multiple_select_filter_widget.html | 27 |
1 files changed, 17 insertions, 10 deletions
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"> |