Skip to content

Commit

Permalink
Started accessible controls for shelf book sort
Browse files Browse the repository at this point in the history 
Added buttons and fit to design.
Added new icon variations to support.
Extracted book item to own view and setup for future auto sorts.
  • Loading branch information
@ssddanbrown
ssddanbrown committed Feb 17, 2023
1 parent af31a6f commit 71a09bc
Show file tree
Hide file tree
Showing 7 changed files with 107 additions and 83 deletions.
4 changes: 2 additions & 2 deletions app/Http/Controllers/BookshelfController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ public function index(Request $request)
public function create()
{
$this->checkPermission('bookshelf-create-all');
$books = Book::visible()->orderBy('name')->get(['name', 'id', 'slug']);
$books = Book::visible()->orderBy('name')->get(['name', 'id', 'slug', 'created_at', 'updated_at']);
$this->setPageTitle(trans('entities.shelves_create'));

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

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

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

Expand Down
1 change: 1 addition & 0 deletions resources/icons/add-small.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions resources/icons/remove.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
77 changes: 77 additions & 0 deletions resources/sass/_components.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1050,4 +1050,81 @@ $btt-size: 40px;
vertical-align: top;
line-height: 2;
}
}

// Sortable scroll boxes
.scroll-box {
list-style: none;
padding: 0;
margin: 0;
max-height: 250px;
overflow-y: scroll;
border: 1px solid;
@include lightDark(border-color, #DDD, #000);
border-radius: 3px;
min-height: 20px;
@include lightDark(background-color, #EEE, #000);
}
.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;
align-items: flex-start;
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;
}
.handle + * {
padding-left: 0;
}
&:hover .handle {
@include lightDark(color, #444, #FFF);
}
a:hover {
text-decoration: none;
}
}

input.scroll-box-search, .scroll-box-header-item {
font-size: 0.8rem;
padding: $-xs $-m;
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;
}

.scroll-box[refs="shelf-sort@shelf-book-list"] [data-action="add"] {
display: none;
}
.scroll-box[refs="shelf-sort@all-book-list"] [data-action="remove"] {
display: none;
}
65 changes: 0 additions & 65 deletions resources/sass/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,71 +198,6 @@ $loadingSize: 10px;
}
}

.scroll-box {
max-height: 250px;
overflow-y: scroll;
border: 1px solid;
@include lightDark(border-color, #DDD, #000);
border-radius: 3px;
min-height: 20px;
@include lightDark(background-color, #EEE, #000);
}
.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;
}
.handle + * {
padding-left: 0;
}
&:hover .handle {
@include lightDark(color, #444, #FFF);
}
a:hover {
text-decoration: none;
}
}

input.scroll-box-search, .scroll-box-header-item {
font-size: 0.8rem;
padding: $-xs $-m;
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;
Expand Down
24 changes: 8 additions & 16 deletions resources/views/shelves/parts/form.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,28 +16,20 @@
<input refs="shelf-sort@input" type="hidden" name="books"
value="{{ isset($shelf) ? $shelf->visibleBooks->implode('id', ',') : '' }}">
<div class="scroll-box-header-item">{{ trans('entities.shelves_drag_books') }}</div>
<div refs="shelf-sort@shelf-book-list" class="scroll-box">
@if (count($shelf->visibleBooks ?? []) > 0)
@foreach ($shelf->visibleBooks as $book)
<div data-id="{{ $book->id }}" class="scroll-box-item">
<div class="handle">@icon('grip')</div>
<a href="{{ $book->getUrl() }}" class="text-book">@icon('book'){{ $book->name }}</a>
</div>
@endforeach
@endif
</div>
<ul refs="shelf-sort@shelf-book-list" class="scroll-box">
@foreach (($shelf->visibleBooks ?? []) as $book)
@include('shelves.parts.shelf-sort-book-item', ['book' => $book])
@endforeach
</ul>
</div>
<div class="form-group">
<label for="books">{{ trans('entities.shelves_add_books') }}</label>
<input type="text" refs="shelf-sort@book-search" class="scroll-box-search" placeholder="{{ trans('common.search') }}">
<div refs="shelf-sort@all-book-list" class="scroll-box">
<ul refs="shelf-sort@all-book-list" class="scroll-box">
@foreach ($books as $book)
<div data-id="{{ $book->id }}" class="scroll-box-item">
<div class="handle">@icon('grip')</div>
<a href="{{ $book->getUrl() }}" class="text-book">@icon('book'){{ $book->name }}</a>
</div>
@include('shelves.parts.shelf-sort-book-item', ['book' => $book])
@endforeach
</div>
</ul>
</div>
</div>

Expand Down
18 changes: 18 additions & 0 deletions resources/views/shelves/parts/shelf-sort-book-item.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<li data-id="{{ $book->id }}"
data-name="{{ $book->name }}"
data-created="{{ $book->created_at->timestamp }}"
data-updated="{{ $book->updated_at->timestamp }}"
class="scroll-box-item">
<div class="handle px-s">@icon('grip')</div>
<a href="{{ $book->getUrl() }}" class="text-book">@icon('book'){{ $book->name }}</a>
<div class="buttons flex-container-row items-center ml-auto px-xxs py-xs">
<button type="button" data-action="move_up" class="icon-button p-xxs"
title="{{ trans('entities.books_sort_move_up') }}">@icon('chevron-up')</button>
<button type="button" data-action="move_down" class="icon-button p-xxs"
title="{{ trans('entities.books_sort_move_down') }}">@icon('chevron-down')</button>
<button type="button" data-action="remove" class="icon-button p-xxs"
title="{{ trans('common.remove') }}">@icon('remove')</button>
<button type="button" data-action="add" class="icon-button p-xxs"
title="{{ trans('common.add') }}">@icon('add-small')</button>
</div>
</li>

0 comments on commit 71a09bc

Please sign in to comment.