colin
/
bookstack
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Applied shelf book sort changes from testing 

Added better labelling of sort lists for screen readers.
Fadded out sort-item action buttons until hovering for a cleaner look.
This commit is contained in:
Dan Brown 2023-02-17 16:18:24 +00:00
parent 9c26ccf43d
commit f799c9b260
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
3 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
resources/sass/_components.scss
View File

@ -1085,6 +1085,9 @@ $btt-size: 40px;
color: #AAA; color: #AAA;
cursor: grab; cursor: grab;
} }
button {
opacity: .6;
}
.handle svg { .handle svg {
margin: 0; margin: 0;
} }
@ -1097,6 +1100,9 @@ $btt-size: 40px;
&:hover .handle { &:hover .handle {
@include lightDark(color, #444, #FFF); @include lightDark(color, #444, #FFF);
} }
&:hover button {
opacity: 1;
}
a:hover { a:hover {
text-decoration: none; text-decoration: none;
} }

12
resources/views/shelves/parts/form.blade.php
View File

@ -12,7 +12,7 @@
<div component="shelf-sort" class="grid half gap-xl"> <div component="shelf-sort" class="grid half gap-xl">
<div class="form-group"> <div class="form-group">
<label for="books">{{ trans('entities.shelves_books') }}</label> <label for="books" id="shelf-sort-books-label">{{ trans('entities.shelves_books') }}</label>
<input refs="shelf-sort@input" type="hidden" name="books" <input refs="shelf-sort@input" type="hidden" name="books"
value="{{ isset($shelf) ? $shelf->visibleBooks->implode('id', ',') : '' }}"> value="{{ isset($shelf) ? $shelf->visibleBooks->implode('id', ',') : '' }}">
<div class="scroll-box-header-item flex-container-row items-center py-xs"> <div class="scroll-box-header-item flex-container-row items-center py-xs">
@ -33,16 +33,20 @@
</div> </div>
</div> </div>
</div> </div>
<ul refs="shelf-sort@shelf-book-list" class="scroll-box"> <ul refs="shelf-sort@shelf-book-list"
aria-labelledby="shelf-sort-books-label"
class="scroll-box">
@foreach (($shelf->visibleBooks ?? []) as $book) @foreach (($shelf->visibleBooks ?? []) as $book)
@include('shelves.parts.shelf-sort-book-item', ['book' => $book]) @include('shelves.parts.shelf-sort-book-item', ['book' => $book])
@endforeach @endforeach
</ul> </ul>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="books">{{ trans('entities.shelves_add_books') }}</label> <label for="books" id="shelf-sort-all-books-label">{{ trans('entities.shelves_add_books') }}</label>
<input type="text" refs="shelf-sort@book-search" class="scroll-box-search" placeholder="{{ trans('common.search') }}"> <input type="text" refs="shelf-sort@book-search" class="scroll-box-search" placeholder="{{ trans('common.search') }}">
<ul refs="shelf-sort@all-book-list" class="scroll-box"> <ul refs="shelf-sort@all-book-list"
aria-labelledby="shelf-sort-all-books-label"
class="scroll-box">
@foreach ($books as $book) @foreach ($books as $book)
@include('shelves.parts.shelf-sort-book-item', ['book' => $book]) @include('shelves.parts.shelf-sort-book-item', ['book' => $book])
@endforeach @endforeach

2
resources/views/shelves/parts/shelf-sort-book-item.blade.php
View File

@ -4,7 +4,7 @@
data-updated="{{ $book->updated_at->timestamp }}" data-updated="{{ $book->updated_at->timestamp }}"
class="scroll-box-item"> class="scroll-box-item">
<div class="handle px-s">@icon('grip')</div> <div class="handle px-s">@icon('grip')</div>
<a href="{{ $book->getUrl() }}" class="text-book">@icon('book'){{ $book->name }}</a> <div class="text-book">@icon('book'){{ $book->name }}</div>
<div class="buttons flex-container-row items-center ml-auto px-xxs py-xs"> <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" <button type="button" data-action="move_up" class="icon-button p-xxs"
title="{{ trans('entities.books_sort_move_up') }}">@icon('chevron-up')</button> title="{{ trans('entities.books_sort_move_up') }}">@icon('chevron-up')</button>