diff options
| author |   Sawyer Bergeron <sbergeron@iol.unh.edu> | 2019-06-21 11:54:23 -0400 |
|---|---|---|
| committer |   Sawyer Bergeron <sawyerbergeron@gmail.com> | 2019-06-25 15:58:00 -0400 |
| commit | 341b3336ae80fbb3c8e90070c52f62df387c8cf5 (patch) | |
| tree | 134cdaa06daf6827012807eba7324d9ff00cd316 /src | |
| parent | f8b55ea3e44af8f09412361e33f4c604be9fb397 (diff) | |
Make filter field more aesthetically pleasing
Change-Id: I41fbf0d7f6232d102861d9dcedd762e12e8fdd0a
Signed-off-by: Sawyer Bergeron <sawyerbergeron@gmail.com>
Diffstat (limited to 'src')
| -rw-r--r-- | src/templates/dashboard/multiple_select_filter_widget.html | 20 |
1 files changed, 19 insertions, 1 deletions
diff --git a/src/templates/dashboard/multiple_select_filter_widget.html b/src/templates/dashboard/multiple_select_filter_widget.html index bfcbed6..91e55a5 100644 --- 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( |