Cleaned book-show page/chapter list design

This commit is contained in:
Dan Brown 2015-09-02 14:39:54 +01:00
parent 1f03d8fb2a
commit 30d2edddda
6 changed files with 38 additions and 9 deletions

View File

@ -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');
});

View File

@ -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;
border-top: 3px dotted #EEE;
// padding-left: $-m;
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 {

View File

@ -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>

View File

@ -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);
});

View File

@ -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">