From: Dan Brown <redacted>
Date: Wed, 28 Sep 2022 19:48:29 +0000 (+0100)
Subject: Updated shelf book management to allow scroll on mobile
X-Git-Tag: v22.10~1^2~17
X-Git-Url: http://source.bookstackapp.com/bookstack/commitdiff_plain/ccbc68b5600790546e073546a31b8123d5693411

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