From 46ab5d82161a4a6ee368dc2adf6e0ca0dea38799 Mon Sep 17 00:00:00 2001 From: Parker Berberian Date: Tue, 18 Jun 2019 14:58:27 -0400 Subject: Redesigns Multiple Select Filter Widget Makes the filter widget work as it should so that it can be integrated with the rest of the Django form handling nicely. Also fixes a lot of ugly code tangential to the widget. Change-Id: Ib92db8e584f3d2162c6c43a18b75a57273bb18f5 Signed-off-by: Parker Berberian --- src/templates/booking/quick_deploy.html | 121 ++----- .../dashboard/multiple_select_filter_widget.html | 353 +++++++++------------ src/templates/resource/steps/define_hardware.html | 2 +- 3 files changed, 181 insertions(+), 295 deletions(-) (limited to 'src/templates') diff --git a/src/templates/booking/quick_deploy.html b/src/templates/booking/quick_deploy.html index 2fbd035..8cf8481 100644 --- a/src/templates/booking/quick_deploy.html +++ b/src/templates/booking/quick_deploy.html @@ -79,77 +79,57 @@ - {% endblock %} diff --git a/src/templates/dashboard/multiple_select_filter_widget.html b/src/templates/dashboard/multiple_select_filter_widget.html index 536fdcc..3a7e148 100644 --- a/src/templates/dashboard/multiple_select_filter_widget.html +++ b/src/templates/dashboard/multiple_select_filter_widget.html @@ -4,6 +4,7 @@ grid-template-columns: 1fr 1fr 1fr; border: 0px; } + .class_grid_wrapper { border: 0px; text-align: center; @@ -20,96 +21,78 @@ display: grid; grid-template-columns: 1fr 1fr; } + .grid-item { cursor: pointer; - border:1px solid #cccccc; + border: 1px solid #cccccc; border-radius: 5px; - margin:20px; + margin: 20px; height: 200px; padding: 7px; - transition-property: box-shadow, background-color; - transition-duration: .2s; -} - -.grid-item:hover { - box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.45); - transition-property: box-shadow; - transition-duration: .2s; - + transition: border-color ease-in-out .1s,box-shadow ease-in-out .1s; + box-shadow: 0 1px 1px rgba(0,0,0,.075); } .selected_node { - box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.45); - background-color: #fff; - transition-property: background-color; - transition-duration: .2s; + border-color: #40c640; + 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; } .disabled_node { cursor: not-allowed; background-color: #EFEFEF; - transition-property: box-shadow; - transition-duration: .2s; - border: 1px solid #ccc; } -.disabled_node:hover { -} +.disabled_node:hover {} .cleared_node { background-color: #FFFFFF; } -.grid-item-header -{ +.grid-item-header { font-weight: bold; font-size: 20px; margin-top: 10px; } -#dropdown_wrapper > div > h5 { - margin: 12px; - display: inline-block; - vertical-align: middle; +.dropdown_item { + border: 1px; + border-style: solid; + border-color: lightgray; + border-radius: 5px; + margin: 20px; + padding: 2px; + grid-column: 1; + display: grid; + grid-template-columns: 1fr 3fr 1fr; + justify-items: center; } -#dropdown_wrapper > div > button { - padding: 7px; +.dropdown_item > button { margin: 2px; - float: right; - width: 80px; + justify-self: end; } -#dropdown_wrapper > div > input { - padding: 7px; - margin: 2px; - float: right; - width: 300px; - width: calc(100% - 240px); + +.dropdown_item > h5 { + margin: auto; } -#dropdown_wrapper > div { - border:2px; - border-style:none; - border-color:black; - border-radius: 5px; - margin:20px; - padding: 2px; - box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.75); - transition-property: box-shadow, background-color; - transition-duration: .2s; - display: inline-block; - vertical-align: middle; +.dropdown_item > input { + padding: 7px; + margin: 2px; + width: 90%; } #dropdown_wrapper { display: grid; - grid-template-columns: 3fr 5fr; + grid-template-columns: 4fr 5fr; } - +
-{% for object_class, object_list in filter_objects %} +{% for object_class, object_list in display_objects %}

{{object_class}}

@@ -120,12 +103,8 @@

{{obj.name}}

{{obj.description}}

+ '{{obj.id}}');">{% if obj.multiple %}Add{% else %}Select{% endif %}
- {% endfor %}
@@ -137,62 +116,55 @@