colin
/
bookstack
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
Dan Brown 2022-09-28 20:48:29 +01:00
parent f79b7bc799
commit ccbc68b560
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
2 changed files with 34 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
resources/js/components/shelf-sort.js
View File

@ -19,6 +19,7 @@ class ShelfSort {
new Sortable(scrollBox, { new Sortable(scrollBox, {
group: 'shelf-books', group: 'shelf-books',
ghostClass: 'primary-background-light', ghostClass: 'primary-background-light',
handle: '.handle',
animation: 150, animation: 150,
onSort: this.onChange.bind(this), onSort: this.onChange.bind(this),
}); });

20
resources/sass/styles.scss
View File

@ -246,15 +246,15 @@ $btt-size: 40px;
border-radius: 3px; border-radius: 3px;
min-height: 20px; min-height: 20px;
@include lightDark(background-color, #EEE, #000); @include lightDark(background-color, #EEE, #000);
.scroll-box-item { }
padding: $-xs $-m; .scroll-box-item {
border-bottom: 1px solid; border-bottom: 1px solid;
border-top: 1px solid; border-top: 1px solid;
@include lightDark(border-color, #DDD, #000); @include lightDark(border-color, #DDD, #000);
margin-top: -1px; margin-top: -1px;
@include lightDark(background-color, #FFF, #222); @include lightDark(background-color, #FFF, #222);
display: flex; display: flex;
gap: $-xs; padding: 1px;
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
} }
@ -266,6 +266,20 @@ $btt-size: 40px;
color: #AAA; color: #AAA;
cursor: grab; cursor: grab;
} }
.handle svg {
margin: 0;
}
> * {
padding: $-xs $-m;
}
.handle + * {
padding-left: 0;
}
&:hover .handle {
@include lightDark(color, #444, #FFF);
}
a:hover {
text-decoration: none;
} }
} }