archive/BookStackApp_BookStack
0
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-04-12 16:08:08 +00:00
Code Issues 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
No known key found for this signature in database
GPG key ID: 46D9F943C24A2EF9
2 changed files with 34 additions and 19 deletions
resources
js/components
shelf-sort.js
sass
styles.scss

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

@ -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),
});

52
resources/sass/styles.scss
View file

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