Cleaned book-show page/chapter list design

gulpfile.js

@@ -14,6 +14,6 @@ var elixir = require('laravel-elixir');
 elixir(function(mix) {
     mix.sass('styles.scss');
     mix.scripts('image-manager.js', 'public/js/image-manager.js');
-    mix.scripts('book-sidebar.js', 'public/js/book-sidebar.js');
+    mix.scripts('book-dashboard.js', 'public/js/book-dashboard.js');
     mix.scripts('jquery-extensions.js', 'public/js/jquery-extensions.js');
 });

resources/assets/sass/styles.scss

@@ -169,7 +169,7 @@ body.flexbox {
 
 .page-list {
   h3 {
-    margin: $-l 0;
+    margin: $-l 0 $-m 0;
   }
   a.chapter {
     color: $color-chapter;
@@ -177,16 +177,43 @@ body.flexbox {
   .inset-list {
     display: block;
     overflow: hidden;
-    padding-left: $-l*2;
+   // padding-left: $-m;
-    border-top: 3px dotted #EEE;
+    margin-bottom: $-l;
   }
   h4 {
     display: block;
-    margin: $-m 0;
+    margin: $-s 0 0 0;
+    border-left: 5px solid $color-page;
+    padding: $-xs 0 $-xs $-m;
   }
   hr {
     margin-top: 0;
   }
+  .book-child {
+    padding-left: $-l;
+    &.page {
+      border-left: 5px solid $color-page;
+    }
+    &.chapter {
+      border-left: 5px solid $color-chapter;
+    }
+  }
+}
+.chapter-toggle {
+  cursor: pointer;
+  margin: 0 0 $-l 0;
+  transition: all ease-in-out 180ms;
+  i {
+    transition: all ease-in-out 180ms;
+    transform: rotate(0deg);
+    transform-origin: 25% 50%;
+  }
+  &.open {
+    margin-bottom: 0;
+  }
+  &.open i {
+    transform: rotate(90deg);
+  }
 }
 
 .side-nav {

resources/views/books/form.blade.php

@@ -11,6 +11,6 @@
 </div>
 
 <div class="form-group">
-    <a href="/books" class="button muted">Cancel</a>
+    <a href="{{ back()->getTargetUrl() }}" class="button muted">Cancel</a>
     <button type="submit" class="button pos">Save Book</button>
 </div>

resources/views/books/show.blade.php

@@ -39,10 +39,10 @@
                         <hr>
                         @if(count($book->children()) > 0)
                             @foreach($book->children() as $childElement)
-                                <div class="book-child">
+                                <div class="book-child {{ $childElement->getName() }}">
                                     <h3>
                                         <a href="{{ $childElement->getUrl() }}" class="{{ $childElement->getName() }}">
-                                            <i class="zmdi {{ $childElement->isA('chapter') ? 'zmdi-collection-bookmark chapter-toggle':'zmdi-file-text'}}"></i>{{ $childElement->name }}
+                                            <i class="zmdi {{ $childElement->isA('chapter') ? 'zmdi-collection-bookmark':'zmdi-file-text'}}"></i>{{ $childElement->name }}
                                         </a>
                                     </h3>
                                     <p class="text-muted">
@@ -50,6 +50,7 @@
                                     </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>
@@ -109,6 +110,7 @@
 
             $('.chapter-toggle').click(function(e) {
                 e.preventDefault();
+                $(this).toggleClass('open');
                 $(this).closest('.book-child').find('.inset-list').slideToggle(180);
             });
 

resources/views/chapters/show.blade.php

@@ -7,7 +7,7 @@
             <div class="row">
                 <div class="col-md-4 faded">
                     <div class="breadcrumbs">
-                        <a href="{{$book->getUrl()}}"><i class="zmdi zmdi-book"></i>{{ $book->name }}</a>
+                        <a href="{{$book->getUrl()}}" class="text-book"><i class="zmdi zmdi-book"></i>{{ $book->name }}</a>
                     </div>
                 </div>
                 <div class="col-md-8 faded">