Make filter field more aesthetically pleasing

Change-Id: I41fbf0d7f6232d102861d9dcedd762e12e8fdd0a
Signed-off-by: Sawyer Bergeron <sawyerbergeron@gmail.com>

diff --git a/src/templates/dashboard/multiple_select_filter_widget.html b/src/templates/dashboard/multiple_select_filter_widget.html
index bfcbed6..91e55a5 100644 (file)
--- a/src/templates/dashboard/multiple_select_filter_widget.html
+++ b/src/templates/dashboard/multiple_select_filter_widget.html
@@ -34,6 +34,18 @@
     padding: 7px;
     transition: border-color ease-in-out .1s,box-shadow ease-in-out .1s;
     box-shadow: 0 1px 1px rgba(0,0,0,.075);
+
+    display: flex;
+    flex-direction: column;
+}
+
+.grid-item > .btn:active, .grid-item > .btn:focus {
+    outline: none; !important;
+    box-shadow: none;
+}
+
+.grid-item-description {
+    flex: 1;
 }
 
 .selected_node {
@@ -42,6 +54,11 @@
     transition: border-color ease-in-out .1s,box-shadow ease-in-out .1s;
 }
 
+.grid-item:hover:not(.selected_node):not(.disabled_node) {
+    box-shadow: 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(100, 100, 100, 0.3);
+    transition: border-color ease-in-out .1s,box-shadow ease-in-out .1s;
+}
+
 .disabled_node {
     cursor: not-allowed;
     background-color: #EFEFEF;
@@ -102,7 +119,8 @@
         </div>
         <div id="{{object_class}}" class="object_class_wrapper">
         {% for obj in object_list %}
-            <div id="{{ obj.id|default:'not_provided' }}" class="grid-item">
+            <div id="{{ obj.id|default:'not_provided' }}" class="grid-item" onclick="multi_filter_widget.processClick(
+                    '{{obj.id}}');">
                 <p class="grid-item-header">{{obj.name}}</p>
                 <p class="grid-item-description">{{obj.description}}</p>
                 <button type="button" class="btn btn-success grid-item-select-btn" onclick="multi_filter_widget.processClick(