Updated standard entity lists

This commit is contained in:
Dan Brown 2019-03-17 15:07:03 +00:00
parent 837d2bc582
commit 8b7bee7c67
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
6 changed files with 99 additions and 34 deletions

View File

@ -53,9 +53,9 @@ class Chapter extends Entity
* @param int $length
* @return string
*/
public function getExcerpt($length = 100)
public function getExcerpt(int $length = 100)
{
$description = $this->description;
$description = $this->text ?? $this->description;
return strlen($description) > $length ? substr($description, 0, $length-3) . '...' : $description;
}
@ -67,4 +67,13 @@ class Chapter extends Entity
{
return "'BookStack\\\\Chapter' as entity_type, id, id as entity_id, slug, name, {$this->textField} as text, '' as html, book_id, priority, '0' as chapter_id, '0' as draft, created_by, updated_by, updated_at, created_at";
}
/**
* Check if this chapter has any child pages.
* @return bool
*/
public function hasChildren()
{
return count($this->pages) > 0;
}
}

View File

@ -102,6 +102,9 @@ p.secondary, p .secondary, span.secondary, .text-secondary {
.bg-book {
background-color: $color-book;
}
.bg-chapter {
background-color: $color-chapter;
}
.bg-shelf {
background-color: $color-bookshelf;
}

View File

@ -1,7 +1,11 @@
.book-contents .entity-list-item {
.icon {
margin-top: $-xs;
width: 30px;
border-radius: 4px;
justify-self: stretch;
align-self: stretch;
height: auto;
}
p {
margin-bottom: 0;
@ -10,8 +14,60 @@
padding-top: 0;
padding-bottom: 0;
}
.inset-list {
display: none;
}
.entity-list-item + .chapter-expansion {
display: flex;
padding: 0 $-m $-m $-m;
align-items: center;
border: 0;
width: 100%;
position: relative;
> .icon {
width: 30px;
height: auto;
border-radius: 0 0 4px 4px;
align-self: stretch;
flex-shrink: 0;
&:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background-color: currentColor;
content: '';
opacity: 0.2;
}
}
> .content {
flex: 1;
}
.chapter-expansion-toggle {
border-radius: 0 4px 4px 0;
padding: $-xs $-m;
}
.chapter-expansion-toggle:hover {
background-color: rgba(0, 0, 0, 0.06);
}
}
.entity-list-item.has-children {
padding-bottom: 0;
> .icon {
border-radius: 4px 4px 0 0;
}
}
.inset-list {
display: none;
.entity-list-item-name {
font-size: 1rem;
}
.entity-list-item-children {
padding-top: 0;
padding-bottom: 0;
}
}
@ -355,7 +411,7 @@ ul.pagination {
.svg-icon {
color: #FFF;
fill: #FFF;
font-size: 2rem;
font-size: 1.66rem;
margin-right: 0;
position: absolute;
bottom: $-xs;
@ -367,6 +423,10 @@ ul.pagination {
}
}
.chapter > .entity-list-item-image {
width: 60px;
}
.entity-list.compact {
font-size: 0.6 * $fs-m;
h4, a {

View File

@ -363,7 +363,7 @@
}
}
.entity-list-item > span:first-child, .icon-list-item > span:first-child {
.entity-list-item > span:first-child, .icon-list-item > span:first-child, .chapter-expansion > .icon {
font-size: 0.8rem;
width: 1.88em;
height: 1.88em;

View File

@ -49,7 +49,7 @@
{{--TODO--}}
<h3 class="text-muted">{{ trans('entities.search_results') }} <a v-if="searching" v-on:click="clearSearch()" class="text-small">@icon('close'){{ trans('entities.search_clear') }}</a></h3>
<div v-if="!searchResults">
@include('partials/loading-icon')
@include('partials.loading-icon')
</div>
<div v-html="searchResults"></div>
</div>

View File

@ -1,29 +1,22 @@
<div class="chapter entity-list-item"
data-entity-type="chapter" data-entity-id="{{$chapter->id}}">
<div class="icon text-chapter">@icon('chapter')</div>
<a href="{{ $chapter->getUrl() }}" class="chapter entity-list-item @if($chapter->hasChildren()) has-children @endif" data-entity-type="chapter" data-entity-id="{{$chapter->id}}">
<span class="icon text-chapter">@icon('chapter')</span>
<div class="content">
<a href="{{ $chapter->getUrl() }}" ><h4 class="entity-list-item-name break-text">{{ $chapter->name }}</h4></a>
<div>
<div class="entity-item-snippet">
<p class="text-muted break-text">{{ $chapter->getExcerpt() }}</p>
</div>
@if(count($chapter->pages) > 0)
<p chapter-toggle class="text-muted">@icon('caret-right') @icon('page') <span>{{ trans_choice('entities.x_pages', $chapter->pages->count()) }}</span></p>
<div class="inset-list">
@foreach($chapter->pages as $page)
<a href="{{ $page->getUrl() }}" class="inner-page {{$page->draft ? 'draft' : ''}} entity-list-item">
<div class="icon text-page">@icon('page')</div>
<div class="content">
<h6 class="entity-list-item-name break-text">{{ $page->name }}</h6>
{{ $slot ?? '' }}
</div>
</a>
@endforeach
</div>
@endif
<h4 class="entity-list-item-name break-text">{{ $chapter->name }}</h4>
<div class="entity-item-snippet">
<p class="text-muted break-text mb-s">{{ $chapter->getExcerpt() }}</p>
</div>
</div>
</div>
</a>
@if ($chapter->hasChildren())
<div class="chapter chapter-expansion">
<span class="icon text-chapter">@icon('page')</span>
<div class="content">
<div chapter-toggle class="text-muted chapter-expansion-toggle">@icon('caret-right') <span>{{ trans_choice('entities.x_pages', $chapter->pages->count()) }}</span></div>
<div class="inset-list">
<div class="entity-list-item-children">
@include('partials.entity-list-basic', ['entities' => $chapter->pages])
</div>
</div>
</div>
</div>
@endif