Skip to content

Commit 71a09bc

Browse files
ssddanbrownssddanbrown
committed
Started accessible controls for shelf book sort
Added buttons and fit to design. Added new icon variations to support. Extracted book item to own view and setup for future auto sorts.
1 parent af31a6f commit 71a09bc

7 files changed

Lines changed: 107 additions & 83 deletions

File tree

‎app/Http/Controllers/BookshelfController.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ public function index(Request $request)
6464
public function create()
6565
{
6666
$this->checkPermission('bookshelf-create-all');
67-
$books = Book::visible()->orderBy('name')->get(['name', 'id', 'slug']);
67+
$books = Book::visible()->orderBy('name')->get(['name', 'id', 'slug', 'created_at', 'updated_at']);
6868
$this->setPageTitle(trans('entities.shelves_create'));
6969

7070
return view('shelves.create', ['books' => $books]);
@@ -140,7 +140,7 @@ public function edit(string $slug)
140140
$this->checkOwnablePermission('bookshelf-update', $shelf);
141141

142142
$shelfBookIds = $shelf->books()->get(['id'])->pluck('id');
143-
$books = Book::visible()->whereNotIn('id', $shelfBookIds)->orderBy('name')->get(['name', 'id', 'slug']);
143+
$books = Book::visible()->whereNotIn('id', $shelfBookIds)->orderBy('name')->get(['name', 'id', 'slug', 'created_at', 'updated_at']);
144144

145145
$this->setPageTitle(trans('entities.shelves_edit_named', ['name' => $shelf->getShortName()]));
146146

‎resources/icons/add-small.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎resources/icons/remove.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎resources/sass/_components.scss‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1050,4 +1050,81 @@ $btt-size: 40px;
10501050
vertical-align: top;
10511051
line-height: 2;
10521052
}
1053+
}
1054+
1055+
// Sortable scroll boxes
1056+
.scroll-box {
1057+
list-style: none;
1058+
padding: 0;
1059+
margin: 0;
1060+
max-height: 250px;
1061+
overflow-y: scroll;
1062+
border: 1px solid;
1063+
@include lightDark(border-color, #DDD, #000);
1064+
border-radius: 3px;
1065+
min-height: 20px;
1066+
@include lightDark(background-color, #EEE, #000);
1067+
}
1068+
.scroll-box-item {
1069+
border-bottom: 1px solid;
1070+
border-top: 1px solid;
1071+
@include lightDark(border-color, #DDD, #000);
1072+
margin-top: -1px;
1073+
@include lightDark(background-color, #FFF, #222);
1074+
display: flex;
1075+
align-items: flex-start;
1076+
padding: 1px;
1077+
&:last-child {
1078+
border-bottom: 0;
1079+
}
1080+
&:hover {
1081+
cursor: pointer;
1082+
@include lightDark(background-color, #f8f8f8, #333);
1083+
}
1084+
.handle {
1085+
color: #AAA;
1086+
cursor: grab;
1087+
}
1088+
.handle svg {
1089+
margin: 0;
1090+
}
1091+
> * {
1092+
padding: $-xs $-m;
1093+
}
1094+
.handle + * {
1095+
padding-left: 0;
1096+
}
1097+
&:hover .handle {
1098+
@include lightDark(color, #444, #FFF);
1099+
}
1100+
a:hover {
1101+
text-decoration: none;
1102+
}
1103+
}
1104+
1105+
input.scroll-box-search, .scroll-box-header-item {
1106+
font-size: 0.8rem;
1107+
padding: $-xs $-m;
1108+
border: 1px solid;
1109+
@include lightDark(border-color, #DDD, #000);
1110+
@include lightDark(background-color, #FFF, #222);
1111+
margin-bottom: -1px;
1112+
border-radius: 3px 3px 0 0;
1113+
width: 100%;
1114+
max-width: 100%;
1115+
height: auto;
1116+
line-height: 1.4;
1117+
color: #666;
1118+
}
1119+
1120+
.scroll-box-search + .scroll-box,
1121+
.scroll-box-header-item + .scroll-box {
1122+
border-radius: 0 0 3px 3px;
1123+
}
1124+
1125+
.scroll-box[refs="shelf-sort@shelf-book-list"] [data-action="add"] {
1126+
display: none;
1127+
}
1128+
.scroll-box[refs="shelf-sort@all-book-list"] [data-action="remove"] {
1129+
display: none;
10531130
}

‎resources/sass/styles.scss‎

Lines changed: 0 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -198,71 +198,6 @@ $loadingSize: 10px;
198198
}
199199
}
200200

201-
.scroll-box {
202-
max-height: 250px;
203-
overflow-y: scroll;
204-
border: 1px solid;
205-
@include lightDark(border-color, #DDD, #000);
206-
border-radius: 3px;
207-
min-height: 20px;
208-
@include lightDark(background-color, #EEE, #000);
209-
}
210-
.scroll-box-item {
211-
border-bottom: 1px solid;
212-
border-top: 1px solid;
213-
@include lightDark(border-color, #DDD, #000);
214-
margin-top: -1px;
215-
@include lightDark(background-color, #FFF, #222);
216-
display: flex;
217-
padding: 1px;
218-
&:last-child {
219-
border-bottom: 0;
220-
}
221-
&:hover {
222-
cursor: pointer;
223-
@include lightDark(background-color, #f8f8f8, #333);
224-
}
225-
.handle {
226-
color: #AAA;
227-
cursor: grab;
228-
}
229-
.handle svg {
230-
margin: 0;
231-
}
232-
> * {
233-
padding: $-xs $-m;
234-
}
235-
.handle + * {
236-
padding-left: 0;
237-
}
238-
&:hover .handle {
239-
@include lightDark(color, #444, #FFF);
240-
}
241-
a:hover {
242-
text-decoration: none;
243-
}
244-
}
245-
246-
input.scroll-box-search, .scroll-box-header-item {
247-
font-size: 0.8rem;
248-
padding: $-xs $-m;
249-
border: 1px solid;
250-
@include lightDark(border-color, #DDD, #000);
251-
@include lightDark(background-color, #FFF, #222);
252-
margin-bottom: -1px;
253-
border-radius: 3px 3px 0 0;
254-
width: 100%;
255-
max-width: 100%;
256-
height: auto;
257-
line-height: 1.4;
258-
color: #666;
259-
}
260-
261-
.scroll-box-search + .scroll-box,
262-
.scroll-box-header-item + .scroll-box {
263-
border-radius: 0 0 3px 3px;
264-
}
265-
266201
.fullscreen {
267202
border:0;
268203
position:fixed;

‎resources/views/shelves/parts/form.blade.php‎

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -16,28 +16,20 @@
1616
<input refs="shelf-sort@input" type="hidden" name="books"
1717
value="{{ isset($shelf) ? $shelf->visibleBooks->implode('id', ',') : '' }}">
1818
<div class="scroll-box-header-item">{{ trans('entities.shelves_drag_books') }}</div>
19-
<div refs="shelf-sort@shelf-book-list" class="scroll-box">
20-
@if (count($shelf->visibleBooks ?? []) > 0)
21-
@foreach ($shelf->visibleBooks as $book)
22-
<div data-id="{{ $book->id }}" class="scroll-box-item">
23-
<div class="handle">@icon('grip')</div>
24-
<a href="{{ $book->getUrl() }}" class="text-book">@icon('book'){{ $book->name }}</a>
25-
</div>
26-
@endforeach
27-
@endif
28-
</div>
19+
<ul refs="shelf-sort@shelf-book-list" class="scroll-box">
20+
@foreach (($shelf->visibleBooks ?? []) as $book)
21+
@include('shelves.parts.shelf-sort-book-item', ['book' => $book])
22+
@endforeach
23+
</ul>
2924
</div>
3025
<div class="form-group">
3126
<label for="books">{{ trans('entities.shelves_add_books') }}</label>
3227
<input type="text" refs="shelf-sort@book-search" class="scroll-box-search" placeholder="{{ trans('common.search') }}">
33-
<div refs="shelf-sort@all-book-list" class="scroll-box">
28+
<ul refs="shelf-sort@all-book-list" class="scroll-box">
3429
@foreach ($books as $book)
35-
<div data-id="{{ $book->id }}" class="scroll-box-item">
36-
<div class="handle">@icon('grip')</div>
37-
<a href="{{ $book->getUrl() }}" class="text-book">@icon('book'){{ $book->name }}</a>
38-
</div>
30+
@include('shelves.parts.shelf-sort-book-item', ['book' => $book])
3931
@endforeach
40-
</div>
32+
</ul>
4133
</div>
4234
</div>
4335

‎resources/views/shelves/parts/shelf-sort-book-item.blade.php‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<li data-id="{{ $book->id }}"
2+
data-name="{{ $book->name }}"
3+
data-created="{{ $book->created_at->timestamp }}"
4+
data-updated="{{ $book->updated_at->timestamp }}"
5+
class="scroll-box-item">
6+
<div class="handle px-s">@icon('grip')</div>
7+
<a href="{{ $book->getUrl() }}" class="text-book">@icon('book'){{ $book->name }}</a>
8+
<div class="buttons flex-container-row items-center ml-auto px-xxs py-xs">
9+
<button type="button" data-action="move_up" class="icon-button p-xxs"
10+
title="{{ trans('entities.books_sort_move_up') }}">@icon('chevron-up')</button>
11+
<button type="button" data-action="move_down" class="icon-button p-xxs"
12+
title="{{ trans('entities.books_sort_move_down') }}">@icon('chevron-down')</button>
13+
<button type="button" data-action="remove" class="icon-button p-xxs"
14+
title="{{ trans('common.remove') }}">@icon('remove')</button>
15+
<button type="button" data-action="add" class="icon-button p-xxs"
16+
title="{{ trans('common.add') }}">@icon('add-small')</button>
17+
</div>
18+
</li>

0 commit comments

Comments
 (0)