luisgulo/BookStack
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Applied shelf book sort changes from testing

Browse source 
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;
cursor: grab;
}
button {
opacity: .6;
}
.handle svg {
margin: 0;
}
@ -1097,6 +1100,9 @@ $btt-size: 40px;
&:hover .handle {
@include lightDark(color, #444, #FFF);
}
&:hover button {
opacity: 1;
}
a:hover {
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 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"
value="{{ isset($shelf) ? $shelf->visibleBooks->implode('id', ',') : '' }}">
<div class="scroll-box-header-item flex-container-row items-center py-xs">
@ -33,16 +33,20 @@
</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)
@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>
<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') }}">
<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)
@include('shelves.parts.shelf-sort-book-item', ['book' => $book])
@endforeach

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

@ -4,7 +4,7 @@
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="text-book">@icon('book'){{ $book->name }}</div>
<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>