webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-08-07 23:03:00 +03:00
Code Activity

Improved shelf book management interface

Browse Source 
- Added ability to search books list (Local simple text match).
- Added handles, hover-states and cursor states for better user
  interaction and clearer use of drag & drop.
- Improved styles for dark mode.
- Converted shelf sort component to newer component format.
- Modernized shelf controller code a little.

Related to #3266
This commit is contained in:
Dan Brown
2022-07-24 12:23:25 +01:00
parent 975ba4f8d8
commit b0adb74d62
6 changed files with 102 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
resources/sass/_forms.scss
View File

@@ -317,7 +317,8 @@ input[type=color] {
.form-group[collapsible] {
padding: 0 $-m;
border: 1px solid #DDD;
border: 1px solid;
@include lightDark(border-color, #DDD, #000);
border-radius: 4px;
.collapse-title {
margin-inline-start: -$-m;

42
resources/sass/styles.scss
View File

@@ -241,28 +241,54 @@ $btt-size: 40px;
.scroll-box {
max-height: 250px;
overflow-y: scroll;
border: 1px solid #DDD;
border: 1px solid;
@include lightDark(border-color, #DDD, #000);
border-radius: 3px;
min-height: 20px;
@include lightDark(background-color, #EEE, #000);
.scroll-box-item {
padding: $-xs $-m;
border-bottom: 1px solid #DDD;
border-top: 1px solid #DDD;
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;
}
}
}
.scroll-box[data-instruction]:before {
content: attr(data-instruction);
input.scroll-box-search, .scroll-box-header-item {
font-size: 0.8rem;
padding: $-xs $-m;
border-bottom: 1px solid #DDD;
display: block;
font-size: 0.75rem;
border: 1px solid;
@include lightDark(border-color, #DDD, #000);
@include lightDark(background-color, #FFF, #222);
margin-bottom: -1px;
border-radius: 3px 3px 0 0;
width: 100%;
max-width: 100%;
height: auto;
line-height: 1.4;
color: #666;
}
.scroll-box-search + .scroll-box,
.scroll-box-header-item + .scroll-box {
border-radius: 0 0 3px 3px;
}
.fullscreen {
border:0;
position:fixed;