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