diff --git a/resources/assets/js/dashboard.js b/resources/assets/js/dashboard.js index afffd5b..acef1e4 100644 --- a/resources/assets/js/dashboard.js +++ b/resources/assets/js/dashboard.js @@ -234,9 +234,19 @@ function editListInit() { // empty the filter $filter.val(""); + // initialize the filter list functionality const filterList = new List("edit-list-wrapper", { valueNames: [ "title-column" ] }); + + // add/remove a filtered class to identify when the list is filtered + $filter.on("input", function() { + if ($filter.val() === "") { + $editList.removeClass("filtered"); + } else { + $editList.addClass("filtered"); + } + }); } }; diff --git a/resources/assets/sass/dashboard.scss b/resources/assets/sass/dashboard.scss index 5f5ccac..4e00114 100644 --- a/resources/assets/sass/dashboard.scss +++ b/resources/assets/sass/dashboard.scss @@ -245,86 +245,95 @@ body { } } - &.edit-list .list-group-item { - padding-top: 4px; - padding-bottom: 4px; - - @media (max-width: $screen-xs-max) { - margin: 3px; - padding-left: 60px; - } - - .title-column { - padding-top: 6px; - padding-bottom: 6px; - padding-left: 0px; - font-family: "Lucida Console", Monaco, monospace; + &.edit-list { + .list-group-item { + padding-top: 4px; + padding-bottom: 4px; @media (max-width: $screen-xs-max) { - text-align: center; + margin: 3px; + padding-left: 60px; } - @media (min-width: $screen-sm-min) { - float: left; - } - - .sort-icon { - margin-right: 10px; - display: inline-block; - cursor: grab; - cursor: -webkit-grabbing; + .title-column { + padding-top: 6px; + padding-bottom: 6px; + padding-left: 0px; + font-family: "Lucida Console", Monaco, monospace; @media (max-width: $screen-xs-max) { - position: absolute; - top: 50%; - left: 20px; - transform: translateY(-50%); - } - } - - .column { - @media (max-width: $screen-xs-max) { - margin-right: 3px; - display: inline-block; - - &.spacer { - display: block; - font-size: 0; - } + text-align: center; } @media (min-width: $screen-sm-min) { float: left; + } + + .sort-icon { margin-right: 10px; + display: inline-block; + opacity: 1; + transition: opacity 100ms; + cursor: grab; + cursor: -webkit-grabbing; + + @media (max-width: $screen-xs-max) { + position: absolute; + top: 50%; + left: 20px; + transform: translateY(-50%); + } + } + + .column { + @media (max-width: $screen-xs-max) { + margin-right: 3px; + display: inline-block; + + &.spacer { + display: block; + font-size: 0; + } + } + + @media (min-width: $screen-sm-min) { + float: left; + margin-right: 10px; + } + } + } + + .button-column { + padding-right: 0px; + padding-left: 0px; + + @media (max-width: $screen-xs-max) { + padding-bottom: 5px; + text-align: center; + } + + @media (min-width: $screen-sm-min) { + float: right; + text-align: right; + } + + .btn { + margin: 3px; + min-width: 70px; + height: 26px; + padding-top: 1px; + padding-bottom: 2px; + + @media (max-width: $screen-xs-max) { + min-width: 33%; + } } } } - .button-column { - padding-right: 0px; - padding-left: 0px; - - @media (max-width: $screen-xs-max) { - padding-bottom: 5px; - text-align: center; - } - - @media (min-width: $screen-sm-min) { - float: right; - text-align: right; - } - - .btn { - margin: 3px; - min-width: 70px; - height: 26px; - padding-top: 1px; - padding-bottom: 2px; - - @media (max-width: $screen-xs-max) { - min-width: 33%; - } - } + &.filtered .list-group-item .title-column .sort-icon { + opacity: 0.5; + pointer-events: none; } } }