]> BookStack Code Mirror - bookstack/commitdiff
Cleaned up sidebar book tree and moved details
authorDan Brown <redacted>
Sat, 30 Mar 2019 15:15:01 +0000 (15:15 +0000)
committerDan Brown <redacted>
Sat, 30 Mar 2019 15:15:01 +0000 (15:15 +0000)
- Also made top-spacing more consistent

12 files changed:
resources/assets/sass/_components.scss
resources/assets/sass/_lists.scss
resources/assets/sass/styles.scss
resources/views/books/index.blade.php
resources/views/books/list.blade.php
resources/views/books/show.blade.php
resources/views/chapters/show.blade.php
resources/views/pages/show.blade.php
resources/views/partials/book-tree.blade.php
resources/views/partials/breadcrumbs.blade.php
resources/views/shelves/list.blade.php
resources/views/shelves/show.blade.php

index 1f34166c61ffda83e9f72434bdf0875c6d2804f6..9ebe5d0d7373ac87eac3334b809faf804784ab11 100644 (file)
   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] {
index 74b0d9938565134a383b8d677b093ad848434401..7182e8f7e9910d9b822bb311865771920181a303 100644 (file)
@@ -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: '';
 }
 
 // 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;
   }
 }
 
index 7792aee83056ee6b5779786dc845037efddeb7f6..df1132de5f7934021a0109394cd1fbc44820e52a 100644 (file)
@@ -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;
index e106b37041abffbf19036233b320fe73fd8aabf1..bdfe4a48082ba3123d5b62b46733099f3e462bf8 100644 (file)
@@ -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">
     </div>
 @stop
 
-@section('body')
-    @include('books.list', ['books' => $books, 'view' => $view])
-@stop
-
 @section('right')
 
     <div class="actions mb-xl">
index 6e0cc1fd6205be6949f14623b6d8052febe56cf7..91a2c716e275bd1cefe9dd1bc6fd7a6b3c86191d 100644 (file)
@@ -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">
index 654bb98e36992006cd253d394de7557bc2e16266..04352d898e059a125e55ec402b6e01f7b0d1568b 100644 (file)
 
 @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">
         </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>
index 2e2cead8954ccea2e2fcdfeb0ef635db9ca7300b..15ac6bc2bcc37c89216b9200f2729791eff1e857 100644 (file)
 
 @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">
         </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
 
index 6858661c412b2d6af3f9d6bc1c9584ad8332b3da..776182fa0ca35f4080ff852c5d66f773b90ecf11 100644 (file)
     @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>
         </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)
         </div>
     </div>
 
-    @include('partials.book-tree', ['book' => $book, 'sidebarTree' => $sidebarTree])
-@stop
-
-@section('right')
     <div class="actions mb-xl">
         <h5>Actions</h5>
 
index 360162b2fd185b31f1c40e9194249a180f01b16f..73064dceb46b72b6d9f9f38b23c9aeb5e75d55af 100644 (file)
@@ -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>
index 3d07e1338238fdb7d82f613b6847fe5be9a32b36..df5d1aa049fce72ba44a9e45a1a8ac73b826f8a6 100644 (file)
@@ -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>
         <?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); ?>
 
index 84a0ded0ddfd792628c5641cc8f3c0ba4cc3933e..70787f7e805ce9990d5403dadff7b58538d774a5 100644 (file)
@@ -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>
index afe56d577bb996c65e853d65b88cdf21780893b7..21e8cf38dad64f3e7cc0eee2486a0f06ca9e4d9e 100644 (file)
@@ -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">