mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 05:36:00 +00:00
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:
parent
f79b7bc799
commit
ccbc68b560
@ -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),
|
||||||
});
|
});
|
||||||
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user