mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-26 12:16:07 +00:00
Cleaned up sidebar book tree and moved details
- Also made top-spacing more consistent
This commit is contained in:
parent
42e908c7f0
commit
60d175a9b9
@ -54,13 +54,18 @@
|
||||
transition: all ease-in-out 180ms;
|
||||
user-select: none;
|
||||
svg[data-icon="caret-right"] {
|
||||
margin-right: 0;
|
||||
font-size: 1rem;
|
||||
transition: all ease-in-out 180ms;
|
||||
transform: rotate(0deg);
|
||||
transform-origin: 25% 50%;
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
&.open svg[data-icon="caret-right"] {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
svg[data-icon="caret-right"] + * {
|
||||
margin-left: $-xs;
|
||||
}
|
||||
}
|
||||
|
||||
[overlay] {
|
||||
|
@ -85,7 +85,7 @@
|
||||
.sidebar-page-nav {
|
||||
$nav-indent: $-m;
|
||||
list-style: none;
|
||||
margin: $-s 0 $-m 2px;
|
||||
margin: $-s 0 $-m $-xs;
|
||||
position: relative;
|
||||
&:after {
|
||||
content: '';
|
||||
@ -140,61 +140,68 @@
|
||||
}
|
||||
|
||||
// Sidebar list
|
||||
.book-tree .book.entity-list-item {
|
||||
font-size: 0.6rem;
|
||||
h4 {
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.book-tree .sidebar-page-list {
|
||||
.book-tree .sidebar-page-list {
|
||||
list-style: none;
|
||||
margin: $-xs 0 0;
|
||||
margin: $-xs -$-s 0 -$-s;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
position: relative;
|
||||
|
||||
&:after, .sub-menu:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: $-m;
|
||||
top: 1rem;
|
||||
bottom: 1rem;
|
||||
border-left: 4px solid rgba(0, 0, 0, 0.1);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: 1rem;
|
||||
padding-right: 0;
|
||||
}
|
||||
.entity-icon {
|
||||
font-size: 12px;
|
||||
z-index: 2;
|
||||
background-color: #FFF;
|
||||
.entity-list-item {
|
||||
padding-top: $-xxs;
|
||||
padding-bottom: $-xxs;
|
||||
.content {
|
||||
padding-top: $-xs;
|
||||
padding-bottom: $-xs;
|
||||
}
|
||||
}
|
||||
.entity-list-item.no-hover {
|
||||
margin-top: -$-xs;
|
||||
padding-right: 0;
|
||||
}
|
||||
.entity-list-item-name {
|
||||
font-size: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
.entity-list-item {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.entity-list-item.selected {
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
.chapter-child-menu {
|
||||
font-size: 12px;
|
||||
padding-left: 2rem;
|
||||
font-size: .8rem;
|
||||
margin-top: -.2rem;
|
||||
margin-left: -1rem;
|
||||
}
|
||||
[chapter-toggle] {
|
||||
padding-left: 1.5rem;
|
||||
padding-bottom: .2rem;
|
||||
}
|
||||
.icon {
|
||||
.entity-list-item .icon {
|
||||
z-index: 2;
|
||||
}
|
||||
&:after, .sub-menu:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 1.6rem;
|
||||
top: 1rem;
|
||||
bottom: 1rem;
|
||||
border-left: 2px solid #DDD;
|
||||
width: 4px;
|
||||
height: auto;
|
||||
align-self: stretch;
|
||||
flex-shrink: 0;
|
||||
border-radius: 1px;
|
||||
opacity: 0.6;
|
||||
z-index: 0;
|
||||
}
|
||||
.entity-list-item .icon:after {
|
||||
opacity: 1;
|
||||
}
|
||||
.entity-list-item .icon svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -212,12 +212,6 @@ $btt-size: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.entity-list-item.selected {
|
||||
h3, i, p ,a, span {
|
||||
color: #EEE;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-box {
|
||||
max-height: 250px;
|
||||
overflow-y: scroll;
|
||||
|
@ -2,6 +2,10 @@
|
||||
|
||||
@section('container-classes', 'mt-xl')
|
||||
|
||||
@section('body')
|
||||
@include('books.list', ['books' => $books, 'view' => $view])
|
||||
@stop
|
||||
|
||||
@section('left')
|
||||
@if($recents)
|
||||
<div id="recents" class="mb-xl">
|
||||
@ -29,10 +33,6 @@
|
||||
</div>
|
||||
@stop
|
||||
|
||||
@section('body')
|
||||
@include('books.list', ['books' => $books, 'view' => $view])
|
||||
@stop
|
||||
|
||||
@section('right')
|
||||
|
||||
<div class="actions mb-xl">
|
||||
|
@ -1,5 +1,5 @@
|
||||
|
||||
<div class="content-wrap card">
|
||||
<div class="content-wrap mt-m card">
|
||||
<div class="grid half v-center">
|
||||
<h1 class="list-heading">{{ trans('entities.books') }}</h1>
|
||||
<div class="text-right">
|
||||
|
@ -60,6 +60,23 @@
|
||||
|
||||
@section('right')
|
||||
|
||||
<div class="mb-xl">
|
||||
<h5>{{ trans('common.details') }}</h5>
|
||||
<div class="text-small text-muted blended-links">
|
||||
@include('partials.entity-meta', ['entity' => $book])
|
||||
@if($book->restricted)
|
||||
<div class="active-restriction">
|
||||
@if(userCan('restrictions-manage', $book))
|
||||
<a href="{{ $book->getUrl('/permissions') }}">@icon('lock'){{ trans('entities.books_permissions_active') }}</a>
|
||||
@else
|
||||
@icon('lock'){{ trans('entities.books_permissions_active') }}
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="actions mb-xl">
|
||||
<h5>{{ trans('common.actions') }}</h5>
|
||||
<div class="icon-list text-primary">
|
||||
@ -130,22 +147,6 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="mb-xl">
|
||||
<h5>{{ trans('common.details') }}</h5>
|
||||
<div class="text-small text-muted blended-links">
|
||||
@include('partials.entity-meta', ['entity' => $book])
|
||||
@if($book->restricted)
|
||||
<div class="active-restriction">
|
||||
@if(userCan('restrictions-manage', $book))
|
||||
<a href="{{ $book->getUrl('/permissions') }}">@icon('lock'){{ trans('entities.books_permissions_active') }}</a>
|
||||
@else
|
||||
@icon('lock'){{ trans('entities.books_permissions_active') }}
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if(count($activity) > 0)
|
||||
<div class="mb-xl">
|
||||
<h5>{{ trans('entities.recent_activity') }}</h5>
|
||||
|
@ -58,6 +58,33 @@
|
||||
|
||||
@section('right')
|
||||
|
||||
<div class="mb-xl">
|
||||
<h5>{{ trans('common.details') }}</h5>
|
||||
<div class="blended-links text-small text-muted">
|
||||
@include('partials.entity-meta', ['entity' => $chapter])
|
||||
|
||||
@if($book->restricted)
|
||||
<div class="active-restriction">
|
||||
@if(userCan('restrictions-manage', $book))
|
||||
<a href="{{ $book->getUrl('/permissions') }}">@icon('lock'){{ trans('entities.books_permissions_active') }}</a>
|
||||
@else
|
||||
@icon('lock'){{ trans('entities.books_permissions_active') }}
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if($chapter->restricted)
|
||||
<div class="active-restriction">
|
||||
@if(userCan('restrictions-manage', $chapter))
|
||||
<a href="{{ $chapter->getUrl('/permissions') }}">@icon('lock'){{ trans('entities.chapters_permissions_active') }}</a>
|
||||
@else
|
||||
@icon('lock'){{ trans('entities.chapters_permissions_active') }}
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions mb-xl">
|
||||
<h5>{{ trans('common.actions') }}</h5>
|
||||
<div class="icon-list text-primary">
|
||||
@ -139,33 +166,6 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="mb-xl">
|
||||
<h5>{{ trans('common.details') }}</h5>
|
||||
<div class="blended-links text-small text-muted">
|
||||
@include('partials.entity-meta', ['entity' => $chapter])
|
||||
|
||||
@if($book->restricted)
|
||||
<div class="active-restriction">
|
||||
@if(userCan('restrictions-manage', $book))
|
||||
<a href="{{ $book->getUrl('/permissions') }}">@icon('lock'){{ trans('entities.books_permissions_active') }}</a>
|
||||
@else
|
||||
@icon('lock'){{ trans('entities.books_permissions_active') }}
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if($chapter->restricted)
|
||||
<div class="active-restriction">
|
||||
@if(userCan('restrictions-manage', $chapter))
|
||||
<a href="{{ $chapter->getUrl('/permissions') }}">@icon('lock'){{ trans('entities.chapters_permissions_active') }}</a>
|
||||
@else
|
||||
@icon('lock'){{ trans('entities.chapters_permissions_active') }}
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@include('partials/book-tree', ['book' => $book, 'sidebarTree' => $sidebarTree])
|
||||
@stop
|
||||
|
||||
|
@ -48,12 +48,15 @@
|
||||
@endif
|
||||
|
||||
@if ($page->attachments->count() > 0)
|
||||
<div id="page-attachments" class="mb-xl">
|
||||
<div id="page-attachments" class="mb-l">
|
||||
<h5>{{ trans('entities.pages_attachments') }}</h5>
|
||||
<div class="body">
|
||||
@foreach($page->attachments as $attachment)
|
||||
<div class="attachment">
|
||||
<a href="{{ $attachment->getUrl() }}" @if($attachment->external) target="_blank" @endif>@icon($attachment->external ? 'export' : 'file'){{ $attachment->name }}</a>
|
||||
<div class="attachment icon-list">
|
||||
<a class="icon-list-item py-xs" href="{{ $attachment->getUrl() }}" @if($attachment->external) target="_blank" @endif>
|
||||
<span class="icon">@icon($attachment->external ? 'export' : 'file')</span>
|
||||
<span>{{ $attachment->name }}</span>
|
||||
</a>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@ -76,9 +79,13 @@
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@include('partials.book-tree', ['book' => $book, 'sidebarTree' => $sidebarTree])
|
||||
@stop
|
||||
|
||||
@section('right')
|
||||
<div id="page-details" class="entity-details mb-xl">
|
||||
<h5>{{ trans('common.details') }}</h5>
|
||||
<div class="body text-muted text-small blended-links">
|
||||
<div class="body text-small blended-links">
|
||||
@include('partials.entity-meta', ['entity' => $page])
|
||||
|
||||
@if($book->restricted)
|
||||
@ -113,10 +120,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@include('partials.book-tree', ['book' => $book, 'sidebarTree' => $sidebarTree])
|
||||
@stop
|
||||
|
||||
@section('right')
|
||||
<div class="actions mb-xl">
|
||||
<h5>Actions</h5>
|
||||
|
||||
|
@ -1,19 +1,27 @@
|
||||
<div id="book-tree" class="book-tree mb-xl" v-pre>
|
||||
<h5>{{ trans('entities.books_navigation') }}</h5>
|
||||
@if (userCan('view', $book))
|
||||
<div class="entity-list">
|
||||
@include('partials.entity-list-item-basic', ['entity' => $book, 'classes' => ($current->matches($book)? 'selected' : '')])
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<ul class="sidebar-page-list menu entity-list">
|
||||
<ul class="sidebar-page-list mt-xs menu entity-list">
|
||||
@if (userCan('view', $book))
|
||||
<li class="list-item-book book">
|
||||
@include('partials.entity-list-item-basic', ['entity' => $book, 'classes' => ($current->matches($book)? 'selected' : '')])
|
||||
</li>
|
||||
@endif
|
||||
|
||||
@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)
|
||||
@include('chapters.child-menu', ['chapter' => $bookChild, 'current' => $current])
|
||||
<div class="entity-list-item no-hover">
|
||||
<span class="icon text-chapter">
|
||||
|
||||
</span>
|
||||
<div class="content">
|
||||
@include('chapters.child-menu', ['chapter' => $bookChild, 'current' => $current])
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endif
|
||||
|
||||
</li>
|
||||
|
@ -1,7 +1,7 @@
|
||||
<div class="breadcrumbs text-center">
|
||||
<?php $breadcrumbCount = 0; ?>
|
||||
|
||||
{{--Show top level item--}}
|
||||
{{-- Show top level books item --}}
|
||||
@if (count($crumbs) > 0 && array_first($crumbs) instanceof \BookStack\Entities\Book)
|
||||
<a href="{{ baseUrl('/books') }}" class="text-book icon-list-item outline-hover">
|
||||
<span>@icon('books')</span>
|
||||
@ -10,6 +10,15 @@
|
||||
<?php $breadcrumbCount++; ?>
|
||||
@endif
|
||||
|
||||
{{-- Show top level shelves item --}}
|
||||
@if (count($crumbs) > 0 && array_first($crumbs) instanceof \BookStack\Entities\Bookshelf)
|
||||
<a href="{{ baseUrl('/shelves') }}" class="text-bookshelf icon-list-item outline-hover">
|
||||
<span>@icon('bookshelf')</span>
|
||||
<span>{{ trans('entities.shelves') }}</span>
|
||||
</a>
|
||||
<?php $breadcrumbCount++; ?>
|
||||
@endif
|
||||
|
||||
@foreach($crumbs as $key => $crumb)
|
||||
<?php $isEntity = ($crumb instanceof \BookStack\Entities\Entity); ?>
|
||||
|
||||
|
@ -1,6 +1,5 @@
|
||||
|
||||
<div class="content-wrap card">
|
||||
{{--TODO - Create unique list item--}}
|
||||
<div class="content-wrap mt-m card">
|
||||
|
||||
<div class="grid half v-center">
|
||||
<h1 class="list-heading">{{ trans('entities.shelves') }}</h1>
|
||||
|
@ -2,6 +2,12 @@
|
||||
|
||||
@section('body')
|
||||
|
||||
<div class="mb-s">
|
||||
@include('partials.breadcrumbs', ['crumbs' => [
|
||||
$shelf,
|
||||
]])
|
||||
</div>
|
||||
|
||||
<div class="card content-wrap">
|
||||
<h1 class="break-text">{{$shelf->name}}</h1>
|
||||
<div class="book-content">
|
||||
|
Loading…
Reference in New Issue
Block a user