Updated standard entity lists

diff --git a/app/Entities/Chapter.php b/app/Entities/Chapter.php
index 079105ba92a7a5c0d18bdc4ac31085610c8d4ae2..bdacb7c9d8340ee26a43c9652587594d33afadb6 100644 (file)
--- a/app/Entities/Chapter.php
+++ b/app/Entities/Chapter.php
@@ -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;
+    }
 }

diff --git a/resources/assets/sass/_colors.scss b/resources/assets/sass/_colors.scss
index d2ee13837936afb14e100c23d10f67f20edd1eb1..644b6b8afc17574ee9d3ec2e85b88a78259294ab 100644 (file)
--- a/resources/assets/sass/_colors.scss
+++ b/resources/assets/sass/_colors.scss
@@ -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;
 }
\ No newline at end of file

diff --git a/resources/assets/sass/_lists.scss b/resources/assets/sass/_lists.scss
index db057532daff019ebae82dd00654908b2bc59b2f..8b7027ef2103731c01e723742b6356ef82312b8b 100644 (file)
--- a/resources/assets/sass/_lists.scss
+++ b/resources/assets/sass/_lists.scss
@@ -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 {

diff --git a/resources/assets/sass/_pages.scss b/resources/assets/sass/_pages.scss
index 1b11930796c569e033f5a1a66d422621aa72c336..427b98c2626e94cd1d5bdb2661d4874f1fc14377 100755 (executable)
--- a/resources/assets/sass/_pages.scss
+++ b/resources/assets/sass/_pages.scss
@@ -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;

diff --git a/resources/views/books/show.blade.php b/resources/views/books/show.blade.php
index 28983b22c6ebf08b1ffc29992ba788a2f667adac..3a4a2c1928fe092720e679d82b30f9a2e9258837 100644 (file)
--- a/resources/views/books/show.blade.php
+++ b/resources/views/books/show.blade.php
@@ -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>

diff --git a/resources/views/chapters/list-item.blade.php b/resources/views/chapters/list-item.blade.php
index 62864e7adc4bc338d89a74d1da04dda492c487b5..e342ea6a3a1a0a04ab4cc68233d3377efd384589 100644 (file)
--- a/resources/views/chapters/list-item.blade.php
+++ b/resources/views/chapters/list-item.blade.php
@@ -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
+        <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>
+</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>
-            @endif
-
+            </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+@endif
\ No newline at end of file