github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-06-06 18:54:33 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Updated shelf book management to allow scroll on mobile

Browse Source 
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
2 changed files with 34 additions and 19 deletions
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),
}); });

52
resources/sass/styles.scss
View File

@ -246,26 +246,40 @@ $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 { }
.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; padding: $-xs $-m;
border-bottom: 1px solid; }
border-top: 1px solid; .handle + * {
@include lightDark(border-color, #DDD, #000); padding-left: 0;
margin-top: -1px; }
@include lightDark(background-color, #FFF, #222); &:hover .handle {
display: flex; @include lightDark(color, #444, #FFF);
gap: $-xs; }
&:last-child { a:hover {
border-bottom: 0; text-decoration: none;
}
&:hover {
cursor: pointer;
@include lightDark(background-color, #f8f8f8, #333);
}
.handle {
color: #AAA;
cursor: grab;
}
} }
} }