From ccbc68b5600790546e073546a31b8123d5693411 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Wed, 28 Sep 2022 20:48:29 +0100
Subject: [PATCH] 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
---
 resources/js/components/shelf-sort.js |  1 +
 resources/sass/styles.scss            | 52 +++++++++++++++++----------
 2 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/resources/js/components/shelf-sort.js b/resources/js/components/shelf-sort.js
index 07526716a..30eda5a21 100644
--- 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 65eee866d..ab97466a5 100644
--- 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;
   }
 }