Cleaned styles further and added loading icon to search

resources/assets/js/global.js

@@ -1,5 +1,6 @@
 $(function () {
 
+    // Notification hiding
     $('.notification').click(function () {
         $(this).fadeOut(100);
     });
@@ -7,4 +8,11 @@ $(function () {
     // Dropdown toggles
     $('[data-dropdown]').dropDown();
 
+    // Chapter page list toggles
+    $('.chapter-toggle').click(function(e) {
+        e.preventDefault();
+        $(this).toggleClass('open');
+        $(this).closest('.book-child').find('.inset-list').slideToggle(180);
+    });
+
 });

resources/assets/sass/_animations.scss

@@ -22,7 +22,7 @@
   animation-name: searchResult;
   animation-duration: 220ms;
   animation-fill-mode: forwards;
-  animation-timing-function: cubic-bezier(.62,.28,.23,.99);
+  animation-timing-function: cubic-bezier(.62, .28, .23, .99);
 }
 
 @keyframes searchResult {
@@ -60,15 +60,39 @@
 }
 
 @keyframes menuIn {
-  from { opacity: 0;transform: scale3d(0, 0, 1);}
+  from {
+    opacity: 0;
+    transform: scale3d(0, 0, 1);
+  }
 
-  to { opacity: 1; transform: scale3d(1, 1, 1);}
+  to {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
 }
 
 .anim.menuIn {
-  transform-origin: 0% 0%;
+  transform-origin: 100% 0%;
   animation-name: menuIn;
   animation-duration: 120ms;
   animation-delay: 0s;
-  animation-timing-function: cubic-bezier(.62,.28,.23,.99);
+  animation-timing-function: cubic-bezier(.62, .28, .23, .99);
-}
+}
+
+@keyframes loadingBob {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  30% {
+    transform: translate3d(0, 0, 0);
+  }
+  50% {
+    transform: translate3d(0, -10px, 0);
+  }
+  70% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}

resources/assets/sass/_header.scss

@@ -99,7 +99,7 @@ form.search-box {
   position: absolute;
   z-index: 999;
   top: 0;
-  left: 0;
+  right: 0;
   margin: $-m 0;
   background-color: #FFFFFF;
   list-style: none;

resources/assets/sass/_lists.scss

@@ -20,14 +20,17 @@
   hr {
     margin-top: 0;
   }
-  .book-child {
+  .page, .chapter, .book {
     padding-left: $-l;
-    &.page {
+  }
-      border-left: 5px solid $color-page;
+  .page {
-    }
+    border-left: 5px solid $color-page;
-    &.chapter {
+  }
-      border-left: 5px solid $color-chapter;
+  .chapter {
-    }
+    border-left: 5px solid $color-chapter;
+  }
+  .book {
+    border-left: 5px solid $color-book;
   }
 }
 .chapter-toggle {

resources/assets/sass/_variables.scss

@@ -41,7 +41,7 @@ $negative: #D32F2F;
 
 // Item Colors
 $color-book: #009688;
-$color-chapter: #EF6C00;
+$color-chapter: #ef7c3c;
 $color-page: $primary;
 
 // Text colours

resources/assets/sass/styles.scss

@@ -64,6 +64,41 @@ body.dragging, body.dragging * {
   }
 }
 
+// Loading icon
+$loadingSize: 10px;
+.loading-container {
+  position: relative;
+  display: block;
+  height: $loadingSize;
+  margin: $-xl auto;
+  > div {
+    width: $loadingSize;
+    height: $loadingSize;
+    border-radius: $loadingSize;
+    display: inline-block;
+    vertical-align: top;
+    transform: translate3d(0, 0, 0);
+    animation-name: loadingBob;
+    animation-duration: 1.4s;
+    animation-iteration-count: infinite;
+    animation-timing-function: cubic-bezier(.62, .28, .23, .99);
+    margin-right: 4px;
+    background-color: $color-page;
+    animation-delay: 0.3s;
+  }
+  > div:first-child {
+      left: -($loadingSize+$-xs);
+      background-color: $color-book;
+      animation-delay: 0s;
+  }
+  > div:last-child {
+    left: $loadingSize+$-xs;
+    background-color: $color-chapter;
+    animation-delay: 0.6s;
+  }
+}
+
+
 // Search results
 .search-results > h3 a {
   font-size: 0.66em;

resources/views/books/list-item.blade.php

@@ -1,4 +1,8 @@
 <div class="book">
     <h3 class="text-book"><a class="text-book" href="{{$book->getUrl()}}"><i class="zmdi zmdi-book"></i>{{$book->name}}</a></h3>
-    <p class="text-muted">{{$book->description}}</p>
+    @if(isset($book->searchSnippet))
+        <p class="text-muted">{!! $book->searchSnippet !!}</p>
+    @else
+        <p class="text-muted">{{ $book->getExcerpt() }}</p>
+    @endif
 </div>

resources/views/books/show.blade.php

@@ -39,25 +39,11 @@
                         <hr>
                         @if(count($book->children()) > 0)
                             @foreach($book->children() as $childElement)
-                                <div class="book-child {{ $childElement->getName() }}">
+                                @if($childElement->isA('chapter'))
-                                    <h3>
+                                    @include('chapters/list-item', ['chapter' => $childElement])
-                                        <a href="{{ $childElement->getUrl() }}" class="{{ $childElement->getName() }}">
+                                @else
-                                            <i class="zmdi {{ $childElement->isA('chapter') ? 'zmdi-collection-bookmark':'zmdi-file-text'}}"></i>{{ $childElement->name }}
+                                    @include('pages/list-item', ['page' => $childElement])
-                                        </a>
+                                @endif
-                                    </h3>
-                                    <p class="text-muted">
-                                        {{$childElement->getExcerpt()}}
-                                    </p>
-
-                                    @if($childElement->isA('chapter') && count($childElement->pages) > 0)
-                                        <p class="text-muted chapter-toggle open"><i class="zmdi zmdi-caret-right"></i> {{ count($childElement->pages) }} Pages</p>
-                                        <div class="inset-list">
-                                            @foreach($childElement->pages as $page)
-                                                <h4><a href="{{$page->getUrl()}}"><i class="zmdi zmdi-file-text"></i>{{$page->name}}</a></h4>
-                                            @endforeach
-                                        </div>
-                                    @endif
-                                </div>
                                 <hr>
                             @endforeach
                         @else
@@ -78,6 +64,9 @@
                 </div>
                 <div class="search-results" v-if="searching">
                     <h3 class="text-muted">Search Results <a v-if="searching" v-on="click: clearSearch" class="text-small"><i class="zmdi zmdi-close"></i>Clear Search</a></h3>
+                    <div v-if="!searchResults">
+                        @include('partials/loading-icon')
+                    </div>
                     <div v-html="searchResults"></div>
                 </div>
 
@@ -86,7 +75,6 @@
 
             <div class="col-md-4 col-md-offset-1">
                 <div class="margin-top large"></div>
-                {{--<h3>Search This Book</h3>--}}
                 <div class="search-box">
                     <form v-on="submit: searchBook, input: checkSearchForm" v-el="form" action="/search/book/{{ $book->id }}">
                         {!! csrf_field() !!}
@@ -103,20 +91,6 @@
         </div>
     </div>
 
-
+    <script src="/js/book-dashboard.js"></script>
-
-    <script>
-        $(function() {
-
-            $('.chapter-toggle').click(function(e) {
-                e.preventDefault();
-                $(this).toggleClass('open');
-                $(this).closest('.book-child').find('.inset-list').slideToggle(180);
-            });
-
-        });
-    </script>
-
-    <script src="/js/book-sidebar.js"></script>
 
 @stop

resources/views/chapters/list-item.blade.php

@@ -0,0 +1,21 @@
+<div class="chapter">
+    <h3>
+        <a href="{{ $chapter->getUrl() }}" class="text-chapter">
+            <i class="zmdi zmdi-collection-bookmark"></i>{{ $chapter->name }}
+        </a>
+    </h3>
+    @if(isset($chapter->searchSnippet))
+        <p class="text-muted">{!! $chapter->searchSnippet !!}</p>
+    @else
+        <p class="text-muted">{{ $chapter->getExcerpt() }}</p>
+    @endif
+
+    @if(count($chapter->pages) > 0 && !isset($hidePages))
+        <p class="text-muted chapter-toggle open"><i class="zmdi zmdi-caret-right"></i> {{ count($chapter->pages) }} Pages</p>
+        <div class="inset-list">
+            @foreach($chapter->pages as $page)
+                <h4><a href="{{$page->getUrl()}}"><i class="zmdi zmdi-file-text"></i>{{$page->name}}</a></h4>
+            @endforeach
+        </div>
+    @endif
+</div>

resources/views/chapters/show.blade.php

@@ -38,16 +38,7 @@
                     <div class="page-list">
                         <hr>
                         @foreach($chapter->pages as $page)
-                            <div >
+                            @include('pages/list-item', ['page' => $page])
-                                <h3>
-                                    <a href="{{ $page->getUrl() }}">
-                                        <i class="zmdi zmdi-file-text"></i>{{ $page->name }}
-                                    </a>
-                                </h3>
-                                <p class="text-muted">
-                                    {{$page->getExcerpt(180)}}
-                                </p>
-                            </div>
                             <hr>
                         @endforeach
                     </div>
@@ -68,9 +59,9 @@
                     Last Updated {{$chapter->updated_at->diffForHumans()}} @if($chapter->createdBy) by {{$chapter->updatedBy->name}} @endif
                 </p>
             </div>
-        </div>
+            <div class="col-md-3 col-md-offset-1">
-        <div class="col-md-3 col-md-offset-1">
+                @include('pages/sidebar-tree-list', ['book' => $book])
-            @include('pages/sidebar-tree-list', ['book' => $book])
+            </div>
         </div>
     </div>
 

resources/views/home.blade.php

@@ -2,7 +2,6 @@
 
 @section('content')
 
-
     <div class="container">
         <div class="row">
             <div class="col-md-7">

resources/views/pages/list-item.blade.php

@@ -0,0 +1,10 @@
+<div class="page">
+    <h3>
+        <a href="{{ $page->getUrl() }}" class="text-page"><i class="zmdi zmdi-file-text"></i>{{ $page->name }}</a>
+    </h3>
+    @if(isset($page->searchSnippet))
+        <p class="text-muted">{!! $page->searchSnippet !!}</p>
+    @else
+        <p class="text-muted">{{ $page->getExcerpt() }}</p>
+    @endif
+</div>

resources/views/partials/loading-icon.blade.php

@@ -0,0 +1,5 @@
+<div class="loading-container">
+    <div></div>
+    <div></div>
+    <div></div>
+</div>

resources/views/search/all.blade.php

@@ -13,17 +13,8 @@
                 <div class="page-list">
                     @if(count($pages) > 0)
                         @foreach($pages as $page)
-                            <div class="book-child">
+                            @include('pages/list-item', ['page' => $page])
-                                <h3>
+                            <hr>
-                                    <a href="{{$page->getUrl() . '#' . $searchTerm}}" class="page">
-                                        <i class="zmdi zmdi-file-text"></i>{{$page->name}}
-                                    </a>
-                                </h3>
-                                <p class="text-muted">
-                                    {!! $page->searchSnippet !!}
-                                </p>
-                                <hr>
-                            </div>
                         @endforeach
                     @else
                         <p class="text-muted">No pages matched this search</p>
@@ -37,17 +28,8 @@
                     <h3>Matching Books</h3>
                     <div class="page-list">
                         @foreach($books as $book)
-                            <div class="book-child">
+                            @include('books/list-item', ['book' => $book])
-                                <h3>
+                            <hr>
-                                    <a href="{{$book->getUrl()}}" class="text-book">
-                                        <i class="zmdi zmdi-book"></i>{{$book->name}}
-                                    </a>
-                                </h3>
-                                <p class="text-muted">
-                                    {!! $book->searchSnippet !!}
-                                </p>
-                                <hr>
-                            </div>
                         @endforeach
                     </div>
                 @endif
@@ -56,17 +38,7 @@
                     <h3>Matching Chapters</h3>
                     <div class="page-list">
                         @foreach($chapters as $chapter)
-                            <div class="book-child">
+                            @include('chapters/list-item', ['chapter' => $chapter, 'hidePages' => true])
-                                <h3>
-                                    <a href="{{$chapter->getUrl()}}" class="text-chapter">
-                                        <i class="zmdi zmdi-collection-bookmark"></i>{{$chapter->name}}
-                                    </a>
-                                </h3>
-                                <p class="text-muted">
-                                    {!! $chapter->searchSnippet !!}
-                                </p>
-                                <hr>
-                            </div>
                         @endforeach
                     </div>
                 @endif

resources/views/search/book.blade.php

@@ -1,17 +1,8 @@
-
 <div class="page-list">
     @if(count($pages) > 0)
-        @foreach($pages as $page)
+        @foreach($pages as $pageIndex => $page)
-            <div class="book-child anim searchResult">
+            <div class="anim searchResult" style="animation-delay: {{$pageIndex*50 . 'ms'}};">
-                <h3>
+                @include('pages/list-item', ['page' => $page])
-                    <a href="{{$page->getUrl() . '#' . $searchTerm}}" class="page">
-                        <i class="zmdi zmdi-file-text"></i>{{$page->name}}
-                    </a>
-                </h3>
-
-                <p class="text-muted">
-                    {!! $page->searchSnippet !!}
-                </p>
                 <hr>
             </div>
         @endforeach
@@ -22,17 +13,9 @@
 
 @if(count($chapters) > 0)
     <div class="page-list">
-        @foreach($chapters as $chapter)
+        @foreach($chapters as $chapterIndex => $chapter)
-            <div class="book-child anim searchResult">
+            <div class="anim searchResult" style="animation-delay: {{($chapterIndex+count($pages))*50 . 'ms'}};">
-                <h3>
+                @include('chapters/list-item', ['chapter' => $chapter, 'hidePages' => true])
-                    <a href="{{$chapter->getUrl()}}" class="text-chapter">
-                        <i class="zmdi zmdi-collection-bookmark"></i>{{$chapter->name}}
-                    </a>
-                </h3>
-
-                <p class="text-muted">
-                    {!! $chapter->searchSnippet !!}
-                </p>
                 <hr>
             </div>
         @endforeach