Dan Brown

Cleaned book-show page/chapter list design

...@@ -14,6 +14,6 @@ var elixir = require('laravel-elixir'); ...@@ -14,6 +14,6 @@ var elixir = require('laravel-elixir');
14 elixir(function(mix) { 14 elixir(function(mix) {
15 mix.sass('styles.scss'); 15 mix.sass('styles.scss');
16 mix.scripts('image-manager.js', 'public/js/image-manager.js'); 16 mix.scripts('image-manager.js', 'public/js/image-manager.js');
17 - mix.scripts('book-sidebar.js', 'public/js/book-sidebar.js'); 17 + mix.scripts('book-dashboard.js', 'public/js/book-dashboard.js');
18 mix.scripts('jquery-extensions.js', 'public/js/jquery-extensions.js'); 18 mix.scripts('jquery-extensions.js', 'public/js/jquery-extensions.js');
19 }); 19 });
......
...@@ -169,7 +169,7 @@ body.flexbox { ...@@ -169,7 +169,7 @@ body.flexbox {
169 169
170 .page-list { 170 .page-list {
171 h3 { 171 h3 {
172 - margin: $-l 0; 172 + margin: $-l 0 $-m 0;
173 } 173 }
174 a.chapter { 174 a.chapter {
175 color: $color-chapter; 175 color: $color-chapter;
...@@ -177,16 +177,43 @@ body.flexbox { ...@@ -177,16 +177,43 @@ body.flexbox {
177 .inset-list { 177 .inset-list {
178 display: block; 178 display: block;
179 overflow: hidden; 179 overflow: hidden;
180 - padding-left: $-l*2; 180 + // padding-left: $-m;
181 - border-top: 3px dotted #EEE; 181 + margin-bottom: $-l;
182 } 182 }
183 h4 { 183 h4 {
184 display: block; 184 display: block;
185 - margin: $-m 0; 185 + margin: $-s 0 0 0;
186 + border-left: 5px solid $color-page;
187 + padding: $-xs 0 $-xs $-m;
186 } 188 }
187 hr { 189 hr {
188 margin-top: 0; 190 margin-top: 0;
189 } 191 }
192 + .book-child {
193 + padding-left: $-l;
194 + &.page {
195 + border-left: 5px solid $color-page;
196 + }
197 + &.chapter {
198 + border-left: 5px solid $color-chapter;
199 + }
200 + }
201 +}
202 +.chapter-toggle {
203 + cursor: pointer;
204 + margin: 0 0 $-l 0;
205 + transition: all ease-in-out 180ms;
206 + i {
207 + transition: all ease-in-out 180ms;
208 + transform: rotate(0deg);
209 + transform-origin: 25% 50%;
210 + }
211 + &.open {
212 + margin-bottom: 0;
213 + }
214 + &.open i {
215 + transform: rotate(90deg);
216 + }
190 } 217 }
191 218
192 .side-nav { 219 .side-nav {
......
...@@ -11,6 +11,6 @@ ...@@ -11,6 +11,6 @@
11 </div> 11 </div>
12 12
13 <div class="form-group"> 13 <div class="form-group">
14 - <a href="/books" class="button muted">Cancel</a> 14 + <a href="{{ back()->getTargetUrl() }}" class="button muted">Cancel</a>
15 <button type="submit" class="button pos">Save Book</button> 15 <button type="submit" class="button pos">Save Book</button>
16 </div> 16 </div>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -39,10 +39,10 @@ ...@@ -39,10 +39,10 @@
39 <hr> 39 <hr>
40 @if(count($book->children()) > 0) 40 @if(count($book->children()) > 0)
41 @foreach($book->children() as $childElement) 41 @foreach($book->children() as $childElement)
42 - <div class="book-child"> 42 + <div class="book-child {{ $childElement->getName() }}">
43 <h3> 43 <h3>
44 <a href="{{ $childElement->getUrl() }}" class="{{ $childElement->getName() }}"> 44 <a href="{{ $childElement->getUrl() }}" class="{{ $childElement->getName() }}">
45 - <i class="zmdi {{ $childElement->isA('chapter') ? 'zmdi-collection-bookmark chapter-toggle':'zmdi-file-text'}}"></i>{{ $childElement->name }} 45 + <i class="zmdi {{ $childElement->isA('chapter') ? 'zmdi-collection-bookmark':'zmdi-file-text'}}"></i>{{ $childElement->name }}
46 </a> 46 </a>
47 </h3> 47 </h3>
48 <p class="text-muted"> 48 <p class="text-muted">
...@@ -50,6 +50,7 @@ ...@@ -50,6 +50,7 @@
50 </p> 50 </p>
51 51
52 @if($childElement->isA('chapter') && count($childElement->pages) > 0) 52 @if($childElement->isA('chapter') && count($childElement->pages) > 0)
53 + <p class="text-muted chapter-toggle open"><i class="zmdi zmdi-caret-right"></i> {{ count($childElement->pages) }} Pages</p>
53 <div class="inset-list"> 54 <div class="inset-list">
54 @foreach($childElement->pages as $page) 55 @foreach($childElement->pages as $page)
55 <h4><a href="{{$page->getUrl()}}"><i class="zmdi zmdi-file-text"></i>{{$page->name}}</a></h4> 56 <h4><a href="{{$page->getUrl()}}"><i class="zmdi zmdi-file-text"></i>{{$page->name}}</a></h4>
...@@ -109,6 +110,7 @@ ...@@ -109,6 +110,7 @@
109 110
110 $('.chapter-toggle').click(function(e) { 111 $('.chapter-toggle').click(function(e) {
111 e.preventDefault(); 112 e.preventDefault();
113 + $(this).toggleClass('open');
112 $(this).closest('.book-child').find('.inset-list').slideToggle(180); 114 $(this).closest('.book-child').find('.inset-list').slideToggle(180);
113 }); 115 });
114 116
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
7 <div class="row"> 7 <div class="row">
8 <div class="col-md-4 faded"> 8 <div class="col-md-4 faded">
9 <div class="breadcrumbs"> 9 <div class="breadcrumbs">
10 - <a href="{{$book->getUrl()}}"><i class="zmdi zmdi-book"></i>{{ $book->name }}</a> 10 + <a href="{{$book->getUrl()}}" class="text-book"><i class="zmdi zmdi-book"></i>{{ $book->name }}</a>
11 </div> 11 </div>
12 </div> 12 </div>
13 <div class="col-md-8 faded"> 13 <div class="col-md-8 faded">
......