Standardized breadcrumbs a little further with icons

This commit is contained in:
Dan Brown 2019-02-17 17:52:42 +00:00
parent 8445304fe9
commit e70423c73f
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
27 changed files with 139 additions and 86 deletions

View File

@ -200,14 +200,24 @@ header .search-box {
display: flex;
flex-direction: row;
align-items: center;
}
.breadcrumbs .separator {
fill: #aaa;
font-size: 1.6em;
line-height: 0.8;
margin: 0 $-xs;
margin-top: -2px;
justify-content: flex-start;
flex-wrap: wrap;
.icon-list-item {
width: auto;
padding-top: $-xs;
padding-bottom: $-xs;
&:not(:hover) {
color: #666;
fill: #888;
}
}
.separator {
display: inline-block;
fill: #aaa;
font-size: 1.6em;
line-height: 0.8;
margin: -2px 0 0;
}
}
.faded {

View File

@ -2,10 +2,16 @@
@section('body')
<div class="container small">
<div class="my-l">
<div class="my-s">
@include('partials.breadcrumbs', ['crumbs' => [
'/books' => trans('entities.books'),
'/create-book' => trans('entities.books_create')
'/books' => [
'text' => trans('entities.books'),
'icon' => 'book'
],
'/create-book' => [
'text' => trans('entities.books_create'),
'icon' => 'add'
]
]])
</div>

View File

@ -4,10 +4,13 @@
<div class="container small">
<div class="my-l">
<div class="my-s">
@include('partials.breadcrumbs', ['crumbs' => [
$book,
$book->getUrl('/delete') => trans('entities.books_delete')
$book->getUrl('/delete') => [
'text' => trans('entities.books_delete'),
'icon' => 'delete',
]
]])
</div>

View File

@ -4,10 +4,13 @@
<div class="container small">
<div class="my-l">
<div class="my-s">
@include('partials.breadcrumbs', ['crumbs' => [
$book,
$book->getUrl('/edit') => trans('entities.books_edit')
$book->getUrl('/edit') => [
'text' => trans('entities.books_edit'),
'icon' => 'edit',
]
]])
</div>

View File

@ -4,10 +4,13 @@
<div class="container">
<div class="my-l">
<div class="my-s">
@include('partials.breadcrumbs', ['crumbs' => [
$book,
$book->getUrl('/permissions') => trans('entities.books_permissions')
$book->getUrl('/permissions') => [
'text' => trans('entities.books_permissions'),
'icon' => 'lock',
]
]])
</div>

View File

@ -6,7 +6,7 @@
<div class="container">
<div class="my-l">
<div class="my-s">
@include('partials.breadcrumbs', ['crumbs' => [
$book,
$book->getUrl('/sort') => [

View File

@ -1,4 +0,0 @@
@include('partials.breadcrumbs', ['crumbs' => [
$chapter->book,
$chapter,
]])

View File

@ -3,10 +3,13 @@
@section('body')
<div class="container small">
<div class="my-l">
<div class="my-s">
@include('partials.breadcrumbs', ['crumbs' => [
$book,
$book->getUrl('create-chapter') => trans('entities.chapters_create')
$book->getUrl('create-chapter') => [
'text' => trans('entities.chapters_create'),
'icon' => 'add',
]
]])
</div>

View File

@ -4,11 +4,14 @@
<div class="container small">
<div class="my-l">
<div class="my-s">
@include('partials.breadcrumbs', ['crumbs' => [
$chapter->book,
$chapter,
$chapter->getUrl('/delete') => trans('entities.chapters_delete')
$chapter->getUrl('/delete') => [
'text' => trans('entities.chapters_delete'),
'icon' => 'delete',
]
]])
</div>

View File

@ -4,11 +4,14 @@
<div class="container small">
<div class="my-l">
<div class="my-s">
@include('partials.breadcrumbs', ['crumbs' => [
$book,
$chapter,
$chapter->getUrl('/edit') => trans('entities.chapters_edit')
$chapter->getUrl('/edit') => [
'text' => trans('entities.chapters_edit'),
'icon' => 'edit'
]
]])
</div>

View File

@ -4,11 +4,14 @@
<div class="container small">
<div class="my-l">
<div class="my-s">
@include('partials.breadcrumbs', ['crumbs' => [
$chapter->book,
$chapter,
$chapter->getUrl('/move') => trans('entities.chapters_move')
$chapter->getUrl('/move') => [
'text' => trans('entities.chapters_move'),
'icon' => 'folder',
]
]])
</div>

View File

@ -4,11 +4,14 @@
<div class="container">
<div class="my-l">
<div class="my-s">
@include('partials.breadcrumbs', ['crumbs' => [
$chapter->book,
$chapter,
$chapter->getUrl('/permissions') => trans('entities.chapters_permissions')
$chapter->getUrl('/permissions') => [
'text' => trans('entities.chapters_permissions'),
'icon' => 'lock',
]
]])
</div>

View File

@ -9,7 +9,10 @@
@section('body')
<div class="mb-m">
@include('chapters._breadcrumbs', ['chapter' => $chapter])
@include('partials.breadcrumbs', ['crumbs' => [
$chapter->book,
$chapter,
]])
</div>
<div class="content-wrap card">

View File

@ -1,5 +0,0 @@
@include('partials.breadcrumbs', ['crumbs' => [
$page->book,
$page->hasChapter() ? $page->chapter : null,
$page,
]])

View File

@ -4,12 +4,15 @@
<div class="container small">
<div class="my-l">
<div class="my-s">
@include('partials.breadcrumbs', ['crumbs' => [
$page->book,
$page->chapter,
$page,
$page->getUrl('/copy') => trans('entities.pages_copy')
$page->getUrl('/copy') => [
'text' => trans('entities.pages_copy'),
'icon' => 'copy',
]
]])
</div>

View File

@ -4,12 +4,15 @@
<div class="container small">
<div class="my-l">
<div class="my-s">
@include('partials.breadcrumbs', ['crumbs' => [
$page->book,
$page->chapter,
$page,
$page->getUrl('/delete') => trans('entities.pages_delete')
$page->getUrl('/delete') => [
'text' => trans('entities.pages_delete'),
'icon' => 'delete',
]
]])
</div>

View File

@ -4,12 +4,15 @@
<div class="container small">
<div class="my-l">
<div class="my-s">
@include('partials.breadcrumbs', ['crumbs' => [
$page->book,
$page->chapter,
$page,
$page->getUrl('/move') => trans('entities.pages_move')
$page->getUrl('/move') => [
'text' => trans('entities.pages_move'),
'icon' => 'folder',
]
]])
</div>

View File

@ -4,12 +4,15 @@
<div class="container">
<div class="my-l">
<div class="my-s">
@include('partials.breadcrumbs', ['crumbs' => [
$page->book,
$page->chapter,
$page,
$page->getUrl('/permissions') => trans('entities.pages_permissions')
$page->getUrl('/permissions') => [
'text' => trans('entities.pages_permissions'),
'icon' => 'lock',
]
]])
</div>

View File

@ -16,7 +16,10 @@
$page->$book,
$page->chapter,
$page,
$page->getUrl('/revisions') => trans('entities.pages_revisions'),
$page->getUrl('/revisions') => [
'text' => trans('entities.pages_revisions'),
'icon' => 'history',
],
$revision->getUrl('/changes') => $diff ? trans('entities.pages_revisions_numbered_changes', ['id' => $revision->id]) : null,
$revision->getUrl() => !$diff ? trans('entities.pages_revisions_numbered', ['id' => $revision->id]) : null,
]])

View File

@ -3,12 +3,15 @@
@section('body')
<div class="container">
<div class="my-l">
<div class="my-s">
@include('partials.breadcrumbs', ['crumbs' => [
$page->book,
$page->chapter,
$page,
$page->getUrl('/revisions') => trans('entities.pages_revisions')
$page->getUrl('/revisions') => [
'text' => trans('entities.pages_revisions'),
'icon' => 'history',
]
]])
</div>

View File

@ -3,7 +3,11 @@
@section('body')
<div class="mb-m">
@include('pages._breadcrumbs', ['page' => $page])
@include('partials.breadcrumbs', ['crumbs' => [
$page->book,
$page->hasChapter() ? $page->chapter : null,
$page,
]])
</div>
<div class="content-wrap card">

View File

@ -13,34 +13,16 @@
{{ $crumb }}
</a>
@elseif (is_array($crumb))
<a href="{{ baseUrl($key) }}">
@icon($crumb['icon']) {{ $crumb['text'] }}
<a href="{{ baseUrl($key) }}" class="icon-list-item">
<span>@icon($crumb['icon'])</span>
<span>{{ $crumb['text'] }}</span>
</a>
@elseif($crumb instanceof \BookStack\Entities\Entity)
<a href="{{ $crumb->getUrl() }}" class="text-{{$crumb->getType()}}">
@icon($crumb->getType()){{ $crumb->getShortName() }}
<a href="{{ $crumb->getUrl() }}" class="text-{{$crumb->getType()}} icon-list-item">
<span>@icon($crumb->getType())</span>
<span>{{ $crumb->getShortName() }}</span>
</a>
@endif
<?php $breadcrumbCount++; ?>
@endforeach
{{--@if (isset($book) && userCan('view', $book))--}}
{{--<a href="{{ $book->getUrl() }}" class="text-book">--}}
{{--@icon('book'){{ $book->getShortName() }}--}}
{{--</a>--}}
{{--<div class="separator">@icon('chevron-right')</div>--}}
{{--@endif--}}
{{--@if(isset($chapter) && userCan('view', $chapter))--}}
{{--<a href="{{ $chapter->getUrl() }}" class="text-chapter">--}}
{{--@icon('chapter'){{ $chapter->getShortName() }}--}}
{{--</a>--}}
{{--@if (isset($page))--}}
{{--<div class="separator">@icon('chevron-right')</div>--}}
{{--@endif--}}
{{--@endif--}}
{{--@if(isset($page) && userCan('view', $page))--}}
{{--<a href="{{ $page->getUrl() }}" class="text-page">--}}
{{--@icon('page'){{ $page->getShortName() }}--}}
{{--</a>--}}
{{--@endif--}}
</div>

View File

@ -4,10 +4,16 @@
<div class="container small">
<div class="my-l">
<div class="my-s">
@include('partials.breadcrumbs', ['crumbs' => [
'/shelves' => trans('entities.shelves'),
'/create-shelf' => trans('entities.shelves_create')
'/shelves' => [
'text' => trans('entities.shelves'),
'icon' => 'bookshelf',
],
'/create-shelf' => [
'text' => trans('entities.shelves_create'),
'icon' => 'add',
]
]])
</div>

View File

@ -4,10 +4,13 @@
<div class="container small">
<div class="my-l">
<div class="my-s">
@include('partials.breadcrumbs', ['crumbs' => [
$shelf,
$shelf->getUrl('/delete') => trans('entities.shelves_delete')
$shelf->getUrl('/delete') => [
'text' => trans('entities.shelves_delete'),
'icon' => 'delete',
]
]])
</div>

View File

@ -4,10 +4,13 @@
<div class="container small">
<div class="my-l">
<div class="my-s">
@include('partials.breadcrumbs', ['crumbs' => [
$shelf,
$shelf->getUrl('/edit') => trans('entities.shelves_edit')
$shelf->getUrl('/edit') => [
'text' => trans('entities.shelves_edit'),
'icon' => 'edit',
]
]])
</div>

View File

@ -4,10 +4,13 @@
<div class="container small">
<div class="my-l">
<div class="my-s">
@include('partials.breadcrumbs', ['crumbs' => [
$shelf,
$shelf->getUrl('/permissions') => trans('entities.shelves_permissions')
$shelf->getUrl('/permissions') => [
'text' => trans('entities.shelves_permissions'),
'icon' => 'lock',
]
]])
</div>

View File

@ -8,9 +8,9 @@
{{--@yield('toolbar')--}}
{{--</div>--}}
<div class="tri-layout-container mt-xl" tri-layout @yield('container-attrs') >
<div class="tri-layout-container mt-m" tri-layout @yield('container-attrs') >
<div class="tri-layout-left print-hidden " id="sidebar">
<div class="tri-layout-left print-hidden pt-m" id="sidebar">
<div class="tri-layout-left-contents">
@yield('left')
</div>
@ -20,7 +20,7 @@
@yield('body')
</div>
<div class="tri-layout-right print-hidden">
<div class="tri-layout-right print-hidden pt-m">
<div class="tri-layout-right-contents">
@yield('right')
</div>