mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-11-24 20:02:35 +01:00
Updated book-tree design and abstracted breadcrumb template
This commit is contained in:
Dan Brown
parent
4a872012c5
commit
4df11701e7
@ -136,7 +136,7 @@ class PageDisplay {
|
||||
|
||||
// Fix the tree as a sidebar
|
||||
function stickTree() {
|
||||
$sidebar.width($bookTreeParent.width() - 32);
|
||||
$sidebar.css('width', $bookTreeParent.width());
|
||||
$sidebar.addClass("fixed");
|
||||
isFixed = true;
|
||||
}
|
||||
|
||||
@ -135,7 +135,6 @@ body.flexbox {
|
||||
z-index: 5;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
padding-right: $-m;
|
||||
padding-top: $-m;
|
||||
width: 30%;
|
||||
left: 0;
|
||||
|
||||
@ -95,88 +95,66 @@
|
||||
}
|
||||
|
||||
// Sidebar list
|
||||
.book-tree {
|
||||
transition: ease-in-out 240ms;
|
||||
transition-property: right, border;
|
||||
}
|
||||
.book-tree h4 {
|
||||
padding: $-m $-s 0 $-s;
|
||||
i {
|
||||
padding-right: $-s;
|
||||
.book-tree .book.entity-list-item {
|
||||
font-size: 0.6rem;
|
||||
h4 {
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.book-tree .sidebar-page-list {
|
||||
list-style: none;
|
||||
margin: $-xs 0 0;
|
||||
padding-left: 0;
|
||||
border-left: 5px solid $color-book;
|
||||
li a {
|
||||
display: block;
|
||||
border-bottom: none;
|
||||
padding: $-xs 0 $-xs $-s;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
li a i {
|
||||
padding-right: $-xs + 2px;
|
||||
}
|
||||
li, a {
|
||||
display: block;
|
||||
}
|
||||
a.bold {
|
||||
color: #EEE !important;
|
||||
fill: #EEE !important;
|
||||
}
|
||||
padding-right: 0;
|
||||
position: relative;
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: 1rem;
|
||||
padding-right: 0;
|
||||
}
|
||||
.entity-icon {
|
||||
font-size: 12px;
|
||||
z-index: 2;
|
||||
background-color: #FFF;
|
||||
}
|
||||
.entity-list-item-name {
|
||||
font-size: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
.book {
|
||||
color: $color-book !important;
|
||||
fill: $color-book !important;
|
||||
&.selected {
|
||||
background-color: rgba($color-book, 0.29);
|
||||
}
|
||||
.entity-list-item {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.chapter {
|
||||
color: $color-chapter !important;
|
||||
fill: $color-chapter !important;
|
||||
&.selected {
|
||||
background-color: rgba($color-chapter, 0.12);
|
||||
}
|
||||
.entity-list-item.selected {
|
||||
background-color: #EEE;
|
||||
}
|
||||
.page {
|
||||
color: $color-page !important;
|
||||
fill: $color-page !important;
|
||||
border-bottom: none;
|
||||
&.selected {
|
||||
background-color: rgba($color-page, 0.1);
|
||||
}
|
||||
.chapter-child-menu {
|
||||
font-size: 12px;
|
||||
padding-left: 2rem;
|
||||
margin-top: -.2rem;
|
||||
}
|
||||
[chapter-toggle] {
|
||||
padding-left: $-s;
|
||||
padding-left: 1.5rem;
|
||||
padding-bottom: .2rem;
|
||||
}
|
||||
.list-item-chapter {
|
||||
border-left: 5px solid $color-chapter;
|
||||
margin: 10px 10px;
|
||||
&:after, .sub-menu:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 1.6rem;
|
||||
top: 1rem;
|
||||
bottom: 1rem;
|
||||
border-left: 2px solid #DDD;
|
||||
opacity: 0.6;
|
||||
z-index: 1;
|
||||
}
|
||||
.list-item-page {
|
||||
border-bottom: none;
|
||||
border-left: 5px solid $color-page;
|
||||
margin: 10px 10px;
|
||||
}
|
||||
.list-item-page.draft {
|
||||
border-left: 5px solid $color-page-draft;
|
||||
}
|
||||
.page.draft .page, .list-item-page.draft a.page {
|
||||
color: $color-page-draft !important;
|
||||
fill: $color-page-draft !important;
|
||||
}
|
||||
.sub-menu {
|
||||
}
|
||||
|
||||
.chapter-child-menu {
|
||||
ul.sub-menu {
|
||||
display: none;
|
||||
padding-left: 0;
|
||||
position: relative;
|
||||
}
|
||||
[chapter-toggle].open + .sub-menu {
|
||||
display: block;
|
||||
|
||||
12
resources/views/chapters/child-menu.blade.php
Normal file
12
resources/views/chapters/child-menu.blade.php
Normal file
@ -0,0 +1,12 @@
|
||||
<div class="chapter-child-menu">
|
||||
<p chapter-toggle class="text-muted @if($bookChild->matchesOrContains($current)) open @endif">
|
||||
@icon('caret-right') @icon('page') <span>{{ trans_choice('entities.x_pages', $bookChild->pages->count()) }}</span>
|
||||
</p>
|
||||
<ul class="sub-menu inset-list @if($bookChild->matchesOrContains($current)) open @endif">
|
||||
@foreach($bookChild->pages as $childPage)
|
||||
<li class="list-item-page {{ $childPage->isA('page') && $childPage->draft ? 'draft' : '' }}">
|
||||
@include('partials.entity-list-item-basic', ['entity' => $childPage, 'classes' => $current->matches($childPage)? 'selected' : '' ])
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@ -1,14 +1,5 @@
|
||||
<div class="breadcrumbs">
|
||||
@if (userCan('view', $page->book))
|
||||
<a href="{{ $page->book->getUrl() }}" class="entity-chip text-book">@icon('book'){{ $page->book->getShortName() }}</a>
|
||||
<div class="separator">@icon('chevron-right')</div>
|
||||
@endif
|
||||
@if($page->hasChapter() && userCan('view', $page->chapter))
|
||||
<a href="{{ $page->chapter->getUrl() }}" class="entity-chip text-chapter">
|
||||
@icon('chapter')
|
||||
{{ $page->chapter->getShortName() }}
|
||||
</a>
|
||||
<div class="separator">@icon('chevron-right')</div>
|
||||
@endif
|
||||
<a href="{{ $page->getUrl() }}" class="entity-chip text-page">@icon('page'){{ $page->getShortName() }}</a>
|
||||
</div>
|
||||
@include('partials.breadcrumbs', [
|
||||
'page' => $page,
|
||||
'chapter' => $page->hasChapter() ? $page->chapter : null,
|
||||
'book' => $page->book,
|
||||
])
|
||||
@ -1,36 +1,21 @@
|
||||
<div id="book-tree" class="card book-tree mb-m" v-pre>
|
||||
<h3>@icon('book') {{ trans('entities.books_navigation') }}</h3>
|
||||
<div class="body">
|
||||
<ul class="sidebar-page-list menu">
|
||||
@if (userCan('view', $book))
|
||||
@include('partials.entity-list-item-basic', ['entity' => $book, 'classes' => ($current->matches($book)? 'selected' : '')])
|
||||
@else
|
||||
<h3>@icon('book') {{ trans('entities.books_navigation') }}</h3>
|
||||
@endif
|
||||
|
||||
@if (userCan('view', $book))
|
||||
<li class="book-header"><a href="{{ $book->getUrl() }}" class="book {{ $current->matches($book)? 'selected' : '' }}">@icon('book'){{$book->name}}</a></li>
|
||||
@endif
|
||||
<ul class="sidebar-page-list menu">
|
||||
|
||||
@foreach($sidebarTree as $bookChild)
|
||||
<li class="list-item-{{ $bookChild->getClassName() }} {{ $bookChild->getClassName() }} {{ $bookChild->isA('page') && $bookChild->draft ? 'draft' : '' }}">
|
||||
<a href="{{ $bookChild->getUrl() }}" class="{{ $bookChild->getClassName() }} {{ $current->matches($bookChild)? 'selected' : '' }}">
|
||||
@if($bookChild->isA('chapter'))@icon('chapter')@else @icon('page')@endif{{ $bookChild->name }}
|
||||
</a>
|
||||
@foreach($sidebarTree as $bookChild)
|
||||
<li class="list-item-{{ $bookChild->getClassName() }} {{ $bookChild->getClassName() }} {{ $bookChild->isA('page') && $bookChild->draft ? 'draft' : '' }}">
|
||||
@include('partials.entity-list-item-basic', ['entity' => $bookChild, 'classes' => $current->matches($bookChild)? 'selected' : ''])
|
||||
|
||||
@if($bookChild->isA('chapter') && count($bookChild->pages) > 0)
|
||||
<p chapter-toggle class="text-muted @if($bookChild->matchesOrContains($current)) open @endif">
|
||||
@icon('caret-right') @icon('page') <span>{{ trans_choice('entities.x_pages', $bookChild->pages->count()) }}</span>
|
||||
</p>
|
||||
<ul class="menu sub-menu inset-list @if($bookChild->matchesOrContains($current)) open @endif">
|
||||
@foreach($bookChild->pages as $childPage)
|
||||
<li class="list-item-page {{ $childPage->isA('page') && $childPage->draft ? 'draft' : '' }}">
|
||||
<a href="{{ $childPage->getUrl() }}" class="page {{ $current->matches($childPage)? 'selected' : '' }}">
|
||||
@icon('page') {{ $childPage->name }}
|
||||
</a>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
@endif
|
||||
@if($bookChild->isA('chapter') && count($bookChild->pages) > 0)
|
||||
@include('chapters.child-menu', ['chapter' => $bookChild, 'current' => $current])
|
||||
@endif
|
||||
|
||||
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
19
resources/views/partials/breadcrumbs.blade.php
Normal file
19
resources/views/partials/breadcrumbs.blade.php
Normal file
@ -0,0 +1,19 @@
|
||||
<div class="breadcrumbs">
|
||||
@if (isset($book) && userCan('view', $book))
|
||||
<a href="{{ $book->getUrl() }}" class="entity-chip 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="entity-chip text-chapter">
|
||||
@icon('chapter'){{ $chapter->getShortName() }}
|
||||
</a>
|
||||
<div class="separator">@icon('chevron-right')</div>
|
||||
@endif
|
||||
@if(isset($page) && userCan('view', $page))
|
||||
<a href="{{ $page->getUrl() }}" class="entity-chip text-page">
|
||||
@icon('page'){{ $page->getShortName() }}
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
@ -0,0 +1,8 @@
|
||||
<?php $type = $entity->getType(); ?>
|
||||
<a href="{{ $entity->getUrl() }}" class="{{$type}} {{$type === 'page' && $entity->draft ? 'draft' : ''}} {{$classes ?? ''}} entity-list-item" data-entity-type="{{$type}}" data-entity-id="{{$entity->id}}">
|
||||
<div class="entity-icon text-{{$type}}">@icon($type)</div>
|
||||
<div class="content">
|
||||
<h4 class="entity-list-item-name break-text">{{ $entity->name }}</h4>
|
||||
{{ $slot ?? '' }}
|
||||
</div>
|
||||
</a>
|
||||
@ -1,13 +1,5 @@
|
||||
<?php $type = $entity->getType(); ?>
|
||||
<a href="{{ $entity->getUrl() }}" class="{{$type}} {{$type === 'page' && $entity->draft ? 'draft' : ''}} entity-list-item" data-entity-type="{{$type}}" data-entity-id="{{$entity->id}}">
|
||||
<div class="entity-icon text-{{$type}}">@icon($type)</div>
|
||||
<div class="content">
|
||||
|
||||
<h4 class="entity-list-item-name break-text">{{ $entity->name }}</h4>
|
||||
|
||||
<div class="entity-item-snippet">
|
||||
<p class="text-muted break-text">{{ $entity->getExcerpt() }}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</a>
|
||||
@component('partials.entity-list-item-basic', ['entity' => $entity])
|
||||
<div class="entity-item-snippet">
|
||||
<p class="text-muted break-text">{{ $entity->getExcerpt() }}</p>
|
||||
</div>
|
||||
@endcomponent
|
||||
Loading…
Reference in New Issue
Block a user