From fb7f87d6b0991c85b6bbba13ea825fc162c8e65d Mon Sep 17 00:00:00 2001
From: Kevin MacMartin <prurigro@gmail.com>
Date: Sat, 13 Jan 2018 01:16:19 -0500
Subject: [PATCH] Don't allow sorting when the edit-list is filtered to prevent
 messing up the sort order

---
 resources/assets/js/dashboard.js     |  10 ++
 resources/assets/sass/dashboard.scss | 139 ++++++++++++++-------------
 2 files changed, 84 insertions(+), 65 deletions(-)

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;
         }
     }
 }