Updated shelf book management to allow scroll on mobile

Updates book drag handling to be limited to the handle so scrolling can
be done on the items themselves.
Increased handling area and improved styling to support

diff --git a/resources/js/components/shelf-sort.js b/resources/js/components/shelf-sort.js
index 07526716a932da86ca34bbec46f8e8cbfa4bf7b3..30eda5a21f7cf920fc99f254ac051b3e36b79408 100644 (file)
--- a/resources/js/components/shelf-sort.js
+++ b/resources/js/components/shelf-sort.js
@@ -19,6 +19,7 @@ class ShelfSort {
             new Sortable(scrollBox, {
                 group: 'shelf-books',
                 ghostClass: 'primary-background-light',
+                handle: '.handle',
                 animation: 150,
                 onSort: this.onChange.bind(this),
             });

diff --git a/resources/sass/styles.scss b/resources/sass/styles.scss
index 65eee866d7d8f9b9dcd9fa7d42392e15a9af10e1..ab97466a5aa260e50c7e24a09c04d6526f82b810 100644 (file)
--- a/resources/sass/styles.scss
+++ b/resources/sass/styles.scss
@@ -246,26 +246,40 @@ $btt-size: 40px;
   border-radius: 3px;
   min-height: 20px;
   @include lightDark(background-color, #EEE, #000);
-  .scroll-box-item {
+}
+.scroll-box-item {
+  border-bottom: 1px solid;
+  border-top: 1px solid;
+  @include lightDark(border-color, #DDD, #000);
+  margin-top: -1px;
+  @include lightDark(background-color, #FFF, #222);
+  display: flex;
+  padding: 1px;
+  &:last-child {
+    border-bottom: 0;
+  }
+  &:hover {
+    cursor: pointer;
+    @include lightDark(background-color, #f8f8f8, #333);
+  }
+  .handle {
+    color: #AAA;
+    cursor: grab;
+  }
+  .handle svg {
+    margin: 0;
+  }
+  > * {
     padding: $-xs $-m;
-    border-bottom: 1px solid;
-    border-top: 1px solid;
-    @include lightDark(border-color, #DDD, #000);
-    margin-top: -1px;
-    @include lightDark(background-color, #FFF, #222);
-    display: flex;
-    gap: $-xs;
-    &:last-child {
-      border-bottom: 0;
-    }
-    &:hover {
-      cursor: pointer;
-      @include lightDark(background-color, #f8f8f8, #333);
-    }
-    .handle {
-      color: #AAA;
-      cursor: grab;
-    }
+  }
+  .handle + * {
+    padding-left: 0;
+  }
+  &:hover .handle {
+    @include lightDark(color, #444, #FFF);
+  }
+  a:hover {
+    text-decoration: none;
   }
 }