BookStack/resources/views/books/parts/sort-box.blade.php
Dan Brown b649738718
Made book-sort changes based on screen reader testing
- Removed having sort items in tabbing order since they have no action.
- Updated "show other books" list to add upon single selection since it
  was not clear how these were added (double press) without then seeing
the add button, and even then the add button would be after the scroll
list.
2023-01-27 17:06:39 +00:00

65 lines
No EOL
3.4 KiB
PHP

<details class="sort-box" data-type="book" data-id="{{ $book->id }}" open>
<summary>
<h5 class="flex-container-row items-center justify-flex-start gap-xs">
<div class="text-book text-bigger caret-container">
@icon('caret-right')
</div>
<div class="entity-list-item no-hover py-s text-book px-none">
<span>@icon('book')</span>
<span>{{ $book->name }}</span>
</div>
</h5>
</summary>
<div class="sort-box-options pb-sm">
<button type="button" data-sort="name" class="button outline small">{{ trans('entities.books_sort_name') }}</button>
<button type="button" data-sort="created" class="button outline small">{{ trans('entities.books_sort_created') }}</button>
<button type="button" data-sort="updated" class="button outline small">{{ trans('entities.books_sort_updated') }}</button>
<button type="button" data-sort="chaptersFirst" class="button outline small">{{ trans('entities.books_sort_chapters_first') }}</button>
<button type="button" data-sort="chaptersLast" class="button outline small">{{ trans('entities.books_sort_chapters_last') }}</button>
</div>
<ul class="sortable-page-list sort-list">
@foreach($bookChildren as $bookChild)
<li class="text-{{ $bookChild->getType() }}"
data-id="{{$bookChild->id}}"
data-type="{{ $bookChild->getType() }}"
data-name="{{ $bookChild->name }}"
data-created="{{ $bookChild->created_at->timestamp }}"
data-updated="{{ $bookChild->updated_at->timestamp }}"
tabindex="-1">
<div class="flex-container-row items-center">
<div class="text-muted sort-list-handle px-s py-m">@icon('grip')</div>
<div class="entity-list-item px-none no-hover">
<span>@icon($bookChild->getType()) </span>
<div>
{{ $bookChild->name }}
<div>
</div>
</div>
</div>
@include('books.parts.sort-box-actions')
</div>
@if($bookChild->isA('chapter'))
<ul class="sortable-page-sublist">
@foreach($bookChild->visible_pages as $page)
<li class="text-page flex-container-row items-center"
data-id="{{$page->id}}" data-type="page"
data-name="{{ $page->name }}" data-created="{{ $page->created_at->timestamp }}"
data-updated="{{ $page->updated_at->timestamp }}"
tabindex="-1">
<div class="text-muted sort-list-handle px-s py-m">@icon('grip')</div>
<div class="entity-list-item px-none no-hover">
<span>@icon('page')</span>
<span>{{ $page->name }}</span>
</div>
@include('books.parts.sort-box-actions')
</li>
@endforeach
</ul>
@endif
</li>
@endforeach
</ul>
</details>