Updated book-tree design and abstracted breadcrumb template

diff --git a/resources/assets/js/components/page-display.js b/resources/assets/js/components/page-display.js
index a76160247e768df6e1fe7d08719dd1bf805a8ad7..e7dacea64cc9c82c0e21f8ac565d5e6cf67686c6 100644 (file)
--- a/resources/assets/js/components/page-display.js
+++ b/resources/assets/js/components/page-display.js
@@ -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;
         }

diff --git a/resources/assets/sass/_grid.scss b/resources/assets/sass/_grid.scss
index c742d020de8265ce5c9f7f9103cabaee75c82fd5..0ee934b3f2cc05207f05802a97728e2ee8e82e61 100644 (file)
--- a/resources/assets/sass/_grid.scss
+++ b/resources/assets/sass/_grid.scss
@@ -135,7 +135,6 @@ body.flexbox {
     z-index: 5;
     position: fixed;
     top: 0;
-    padding-right: $-m;
     padding-top: $-m;
     width: 30%;
     left: 0;

diff --git a/resources/assets/sass/_lists.scss b/resources/assets/sass/_lists.scss
index c28d7219f9ee89e8fe991efdc137b6ea39f1bbd3..a979363c008dc80eea5c05180d7115db556eaba6 100644 (file)
--- a/resources/assets/sass/_lists.scss
+++ b/resources/assets/sass/_lists.scss
@@ -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;

diff --git a/resources/views/chapters/child-menu.blade.php b/resources/views/chapters/child-menu.blade.php
new file mode 100644 (file)
index 0000000..36c7f9a
--- /dev/null
+++ b/resources/views/chapters/child-menu.blade.php
@@ -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>
\ No newline at end of file

diff --git a/resources/views/pages/_breadcrumbs.blade.php b/resources/views/pages/_breadcrumbs.blade.php
index 8bbda04115eddddf6376064cc8b38127f0392974..f10f7ebe8bc48d9a71febc3fc7edd7aab3480522 100644 (file)
--- a/resources/views/pages/_breadcrumbs.blade.php
+++ b/resources/views/pages/_breadcrumbs.blade.php
@@ -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>
\ No newline at end of file
+@include('partials.breadcrumbs', [
+        'page' => $page,
+        'chapter' => $page->hasChapter() ? $page->chapter : null,
+        'book' => $page->book,
+])
\ No newline at end of file

diff --git a/resources/views/partials/book-tree.blade.php b/resources/views/partials/book-tree.blade.php
index b0e5bff640e6a9f552906f5ae8e42bf85d79c160..29e313fb45fa19d49dd0f7d262577aa1c50cd533 100644 (file)
--- a/resources/views/partials/book-tree.blade.php
+++ b/resources/views/partials/book-tree.blade.php
@@ -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>
\ No newline at end of file

diff --git a/resources/views/partials/breadcrumbs.blade.php b/resources/views/partials/breadcrumbs.blade.php
new file mode 100644 (file)
index 0000000..e008130
--- /dev/null
+++ b/resources/views/partials/breadcrumbs.blade.php
@@ -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>
\ No newline at end of file

diff --git a/resources/views/partials/entity-list-item-basic.blade.php b/resources/views/partials/entity-list-item-basic.blade.php
new file mode 100644 (file)
index 0000000..020522e
--- /dev/null
+++ b/resources/views/partials/entity-list-item-basic.blade.php
@@ -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>
\ No newline at end of file

diff --git a/resources/views/partials/entity-list-item.blade.php b/resources/views/partials/entity-list-item.blade.php
index 32d22853f17006da996203ca5a109f5879be600f..d971ae0db464dae015f7052b95417774ac41bdbc 100644 (file)
--- a/resources/views/partials/entity-list-item.blade.php
+++ b/resources/views/partials/entity-list-item.blade.php
@@ -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>
\ No newline at end of file
+@component('partials.entity-list-item-basic', ['entity' => $entity])
+<div class="entity-item-snippet">
+    <p class="text-muted break-text">{{ $entity->getExcerpt() }}</p>
+</div>
+@endcomponent
\ No newline at end of file