From 295f520f216e3ec15ac96afcedd3503a601f5b47 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sat, 19 Aug 2017 18:32:24 +0100
Subject: [PATCH 1/8] Started design update

---
 resources/assets/sass/_blocks.scss            |  18 ++
 resources/assets/sass/_codemirror.scss        |   2 +-
 resources/assets/sass/_grid.scss              |  39 +++-
 resources/assets/sass/_lists.scss             |  10 +-
 resources/assets/sass/_pages.scss             |  13 +-
 resources/views/base.blade.php                |   2 +-
 resources/views/pages/form.blade.php          |   2 +-
 resources/views/pages/show.blade.php          | 182 ++++++++----------
 .../views/pages/sidebar-tree-list.blade.php   | 121 ++++++------
 resources/views/sidebar-layout.blade.php      |  30 +++
 10 files changed, 239 insertions(+), 180 deletions(-)
 create mode 100644 resources/views/sidebar-layout.blade.php

diff --git a/resources/assets/sass/_blocks.scss b/resources/assets/sass/_blocks.scss
index e3a0d6952..3eb60152d 100644
--- a/resources/assets/sass/_blocks.scss
+++ b/resources/assets/sass/_blocks.scss
@@ -180,4 +180,22 @@
   &.warning:before {
     content: '\f1f1';
   }
+}
+
+.card {
+  margin: $-m;
+  background-color: #FFF;
+  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2);
+  h3 {
+    padding: $-m;
+    border-bottom: 1px solid #E8E8E8;
+    margin: 0;
+    font-size: $fs-s;
+    color: #888;
+    font-weight: 400;
+    text-transform: uppercase;
+  }
+  .body {
+    padding: $-m;
+  }
 }
\ No newline at end of file
diff --git a/resources/assets/sass/_codemirror.scss b/resources/assets/sass/_codemirror.scss
index 0f006c91a..89ed0f54e 100644
--- a/resources/assets/sass/_codemirror.scss
+++ b/resources/assets/sass/_codemirror.scss
@@ -392,7 +392,7 @@ span.CodeMirror-selectedtext { background: none; }
 }
 .cm-s-base16-light .CodeMirror-gutters { background: #f5f5f5; border-right: 1px solid #DDD; }
 
-.flex-fill .CodeMirror {
+.code-fill .CodeMirror {
   position: absolute;
   top: 0;
   bottom: 0;
diff --git a/resources/assets/sass/_grid.scss b/resources/assets/sass/_grid.scss
index de1ee83fb..6bff97cb3 100644
--- a/resources/assets/sass/_grid.scss
+++ b/resources/assets/sass/_grid.scss
@@ -20,19 +20,46 @@ body.flexbox {
   align-items: stretch;
   min-height: 0;
   position: relative;
-  .flex, &.flex {
-    min-height: 0;
-    flex: 1;
+  &.rows {
+    flex-direction: row;
   }
+  &.columns {
+    flex-direction: column;
+  }
+}
+
+.flex {
+  min-height: 0;
+  flex: 1;
+}
+
+.flex.scroll {
+  //overflow-y: auto;
+  display: flex;
+  &.sidebar {
+    margin-right: -14px;
+  }
+}
+.flex.scroll .scroll-body {
+  overflow-y: scroll;
+  flex: 1;
 }
 
 .flex-child > div {
   flex: 1;
 }
 
-//body.ie .flex-child > div {
-//  flex: 1 0 0px;
-//}
+.flex.sidebar {
+  flex: 1;
+  background-color: #F2F2F2;
+  max-width: 360px;
+  min-height: 90vh;
+}
+.flex.sidebar + .flex.content {
+  flex: 3;
+  background-color: #FFFFFF;
+  border-left: 1px solid #DDD;
+}
 
 /** Rules for all columns */
 div[class^="col-"] img {
diff --git a/resources/assets/sass/_lists.scss b/resources/assets/sass/_lists.scss
index d08ccc9bb..61b2aa858 100644
--- a/resources/assets/sass/_lists.scss
+++ b/resources/assets/sass/_lists.scss
@@ -86,24 +86,18 @@
 
 // Sidebar list
 .book-tree {
-  padding: $-xs 0 0 0;
   position: relative;
   right: 0;
   top: 0;
   transition: ease-in-out 240ms;
   transition-property: right, border;
-  border-left: 0px solid #FFF;
-  background-color: #FFF;
-  max-width: 320px;
   &.fixed {
-    background-color: #FFF;
     z-index: 5;
     position: fixed;
     top: 0;
-    padding-left: $-l;
-    padding-right: $-l + 15;
+    padding-right: $-l + 5px;
     width: 30%;
-    right: -15px;
+    left: 0;
     height: 100%;
     overflow-y: scroll;
     -ms-overflow-style: none;
diff --git a/resources/assets/sass/_pages.scss b/resources/assets/sass/_pages.scss
index 65fdfbc4b..f73bbd546 100755
--- a/resources/assets/sass/_pages.scss
+++ b/resources/assets/sass/_pages.scss
@@ -1,12 +1,3 @@
-#page-show {
-  >.row .col-md-9 {
-    z-index: 2;
-  }
-  >.row .col-md-3 {
-    z-index: 1;
-  }
-}
-
 .page-editor {
   display: flex;
   flex-direction: column;
@@ -36,6 +27,8 @@
 
 .page-content {
   max-width: 840px;
+  margin: 0 auto;
+  margin-top: $-xxl;
   overflow-wrap: break-word;
   .align-left {
     text-align: left;
@@ -252,8 +245,6 @@
 }
 
 .tag-display {
-  width: 100%;
-  //opacity: 0.7;
   position: relative;
   table {
     width: 100%;
diff --git a/resources/views/base.blade.php b/resources/views/base.blade.php
index 1c972e4fb..edbd6a096 100644
--- a/resources/views/base.blade.php
+++ b/resources/views/base.blade.php
@@ -34,7 +34,7 @@
     @include('partials/notifications')
 
     <header id="header">
-        <div class="container">
+        <div class="container fluid">
             <div class="row">
                 <div class="col-sm-4" ng-non-bindable>
                     <a href="{{ baseUrl('/') }}" class="logo">
diff --git a/resources/views/pages/form.blade.php b/resources/views/pages/form.blade.php
index eb5ebb0bd..b73b67ef7 100644
--- a/resources/views/pages/form.blade.php
+++ b/resources/views/pages/form.blade.php
@@ -74,7 +74,7 @@
 
         {{--Markdown Editor--}}
         @if(setting('app-editor') === 'markdown')
-            <div id="markdown-editor" markdown-editor class="flex-fill flex">
+            <div id="markdown-editor" markdown-editor class="flex-fill flex code-fill">
 
                 <div class="markdown-editor-wrap">
                     <div class="editor-toolbar">
diff --git a/resources/views/pages/show.blade.php b/resources/views/pages/show.blade.php
index 0d75a534a..6b06b4611 100644
--- a/resources/views/pages/show.blade.php
+++ b/resources/views/pages/show.blade.php
@@ -1,114 +1,100 @@
-@extends('base')
+@extends('sidebar-layout')
 
-@section('content')
-
-    <div class="faded-small toolbar">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-8 col-xs-5 faded">
-                    @include('pages._breadcrumbs', ['page' => $page])
-                </div>
-                <div class="col-sm-4 col-xs-7 faded">
-                    <div class="action-buttons">
-                        <span dropdown class="dropdown-container">
-                            <div dropdown-toggle class="text-button text-primary"><i class="zmdi zmdi-open-in-new"></i>{{ trans('entities.export') }}</div>
-                            <ul class="wide">
-                                <li><a href="{{ $page->getUrl('/export/html') }}" target="_blank">{{ trans('entities.export_html') }} <span class="text-muted float right">.html</span></a></li>
-                                <li><a href="{{ $page->getUrl('/export/pdf') }}" target="_blank">{{ trans('entities.export_pdf') }} <span class="text-muted float right">.pdf</span></a></li>
-                                <li><a href="{{ $page->getUrl('/export/plaintext') }}" target="_blank">{{ trans('entities.export_text') }} <span class="text-muted float right">.txt</span></a></li>
-                            </ul>
-                        </span>
+@section('toolbar')
+    <div class="col-sm-8 col-xs-5 faded">
+        @include('pages._breadcrumbs', ['page' => $page])
+    </div>
+    <div class="col-sm-4 col-xs-7 faded">
+        <div class="action-buttons">
+                    <span dropdown class="dropdown-container">
+                        <div dropdown-toggle class="text-button text-primary"><i class="zmdi zmdi-open-in-new"></i>{{ trans('entities.export') }}</div>
+                        <ul class="wide">
+                            <li><a href="{{ $page->getUrl('/export/html') }}" target="_blank">{{ trans('entities.export_html') }} <span class="text-muted float right">.html</span></a></li>
+                            <li><a href="{{ $page->getUrl('/export/pdf') }}" target="_blank">{{ trans('entities.export_pdf') }} <span class="text-muted float right">.pdf</span></a></li>
+                            <li><a href="{{ $page->getUrl('/export/plaintext') }}" target="_blank">{{ trans('entities.export_text') }} <span class="text-muted float right">.txt</span></a></li>
+                        </ul>
+                    </span>
+            @if(userCan('page-update', $page))
+                <a href="{{ $page->getUrl('/edit') }}" class="text-primary text-button" ><i class="zmdi zmdi-edit"></i>{{ trans('common.edit') }}</a>
+            @endif
+            @if(userCan('page-update', $page) || userCan('restrictions-manage', $page) || userCan('page-delete', $page))
+                <div dropdown class="dropdown-container">
+                    <a dropdown-toggle class="text-primary text-button"><i class="zmdi zmdi-more-vert"></i></a>
+                    <ul>
                         @if(userCan('page-update', $page))
-                            <a href="{{ $page->getUrl('/edit') }}" class="text-primary text-button" ><i class="zmdi zmdi-edit"></i>{{ trans('common.edit') }}</a>
+                            <li><a href="{{ $page->getUrl('/move') }}" class="text-primary" ><i class="zmdi zmdi-folder"></i>{{ trans('common.move') }}</a></li>
+                            <li><a href="{{ $page->getUrl('/revisions') }}" class="text-primary"><i class="zmdi zmdi-replay"></i>{{ trans('entities.revisions') }}</a></li>
                         @endif
-                        @if(userCan('page-update', $page) || userCan('restrictions-manage', $page) || userCan('page-delete', $page))
-                            <div dropdown class="dropdown-container">
-                                <a dropdown-toggle class="text-primary text-button"><i class="zmdi zmdi-more-vert"></i></a>
-                                <ul>
-                                    @if(userCan('page-update', $page))
-                                        <li><a href="{{ $page->getUrl('/move') }}" class="text-primary" ><i class="zmdi zmdi-folder"></i>{{ trans('common.move') }}</a></li>
-                                        <li><a href="{{ $page->getUrl('/revisions') }}" class="text-primary"><i class="zmdi zmdi-replay"></i>{{ trans('entities.revisions') }}</a></li>
-                                    @endif
-                                    @if(userCan('restrictions-manage', $page))
-                                        <li><a href="{{ $page->getUrl('/permissions') }}" class="text-primary"><i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.permissions') }}</a></li>
-                                    @endif
-                                    @if(userCan('page-delete', $page))
-                                        <li><a href="{{ $page->getUrl('/delete') }}" class="text-neg"><i class="zmdi zmdi-delete"></i>{{ trans('common.delete') }}</a></li>
-                                    @endif
-                                </ul>
-                            </div>
+                        @if(userCan('restrictions-manage', $page))
+                            <li><a href="{{ $page->getUrl('/permissions') }}" class="text-primary"><i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.permissions') }}</a></li>
                         @endif
-
-                    </div>
+                        @if(userCan('page-delete', $page))
+                            <li><a href="{{ $page->getUrl('/delete') }}" class="text-neg"><i class="zmdi zmdi-delete"></i>{{ trans('common.delete') }}</a></li>
+                        @endif
+                    </ul>
                 </div>
-            </div>
+            @endif
+
         </div>
     </div>
+@stop
 
+@section('sidebar')
+    @if($book->restricted || ($page->chapter && $page->chapter->restricted) || $page->restricted)
+        <div class="text-muted">
 
-    <div class="container" id="page-show">
-        <div class="row">
-            <div class="col-md-9 print-full-width">
-                <div class="page-content" ng-non-bindable>
-
-                    <div class="pointer-container" id="pointer">
-                        <div class="pointer anim" >
-                            <span class="icon text-primary"><i class="zmdi zmdi-link"></i></span>
-                            <input readonly="readonly" type="text" id="pointer-url" placeholder="url">
-                            <button class="button icon" data-clipboard-target="#pointer-url" type="button" title="{{ trans('entities.pages_copy_link') }}"><i class="zmdi zmdi-copy"></i></button>
-                        </div>
-                    </div>
-
-                    @include('pages/page-display')
-
-                    <hr>
-
-                    @include('partials.entity-meta', ['entity' => $page])
-
-                </div>
-                @include('comments/comments', ['pageId' => $page->id])
-            </div>
-
-            <div class="col-md-3 print-hidden">
-                <div class="margin-top large"></div>
-                @if($book->restricted || ($page->chapter && $page->chapter->restricted) || $page->restricted)
-                    <div class="text-muted">
-
-                        @if($book->restricted)
-                            @if(userCan('restrictions-manage', $book))
-                                <a href="{{ $book->getUrl('/permissions') }}"><i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.books_permissions_active') }}</a>
-                            @else
-                                <i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.books_permissions_active') }}
-                            @endif
-                            <br>
-                        @endif
-
-                        @if($page->chapter && $page->chapter->restricted)
-                            @if(userCan('restrictions-manage', $page->chapter))
-                                <a href="{{ $page->chapter->getUrl('/permissions') }}"><i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.chapters_permissions_active') }}</a>
-                            @else
-                                <i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.chapters_permissions_active') }}
-                            @endif
-                            <br>
-                        @endif
-
-                        @if($page->restricted)
-                            @if(userCan('restrictions-manage', $page))
-                                <a href="{{ $page->getUrl('/permissions') }}"><i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.pages_permissions_active') }}</a>
-                            @else
-                                <i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.pages_permissions_active') }}
-                            @endif
-                            <br>
-                        @endif
-                    </div>
+            @if($book->restricted)
+                @if(userCan('restrictions-manage', $book))
+                    <a href="{{ $book->getUrl('/permissions') }}"><i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.books_permissions_active') }}</a>
+                @else
+                    <i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.books_permissions_active') }}
                 @endif
+                <br>
+            @endif
 
+            @if($page->chapter && $page->chapter->restricted)
+                @if(userCan('restrictions-manage', $page->chapter))
+                    <a href="{{ $page->chapter->getUrl('/permissions') }}"><i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.chapters_permissions_active') }}</a>
+                @else
+                    <i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.chapters_permissions_active') }}
+                @endif
+                <br>
+            @endif
 
-
-                @include('pages/sidebar-tree-list', ['book' => $book, 'sidebarTree' => $sidebarTree, 'pageNav' => $pageNav])
-            </div>
-
+            @if($page->restricted)
+                @if(userCan('restrictions-manage', $page))
+                    <a href="{{ $page->getUrl('/permissions') }}"><i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.pages_permissions_active') }}</a>
+                @else
+                    <i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.pages_permissions_active') }}
+                @endif
+                <br>
+            @endif
         </div>
+    @endif
+
+    @include('pages/sidebar-tree-list', ['book' => $book, 'sidebarTree' => $sidebarTree, 'pageNav' => $pageNav])
+@stop
+
+@section('body')
+    <div class="page-content" ng-non-bindable>
+
+        <div class="pointer-container" id="pointer">
+            <div class="pointer anim" >
+                <span class="icon text-primary"><i class="zmdi zmdi-link"></i></span>
+                <input readonly="readonly" type="text" id="pointer-url" placeholder="url">
+                <button class="button icon" data-clipboard-target="#pointer-url" type="button" title="{{ trans('entities.pages_copy_link') }}"><i class="zmdi zmdi-copy"></i></button>
+            </div>
+        </div>
+
+        @include('pages/page-display')
+
+        <hr>
+
+        @include('partials.entity-meta', ['entity' => $page])
+
+    </div>
+    <div class="container small">
+        @include('comments/comments', ['pageId' => $page->id])
     </div>
 @stop
 
diff --git a/resources/views/pages/sidebar-tree-list.blade.php b/resources/views/pages/sidebar-tree-list.blade.php
index 90737740c..902a6def2 100644
--- a/resources/views/pages/sidebar-tree-list.blade.php
+++ b/resources/views/pages/sidebar-tree-list.blade.php
@@ -2,73 +2,86 @@
 <div class="book-tree" ng-non-bindable>
 
     @if(isset($page) && $page->tags->count() > 0)
-        <div class="tag-display">
-            <h6 class="text-muted">{{ trans('entities.page_tags') }}</h6>
-            <table>
-                <tbody>
-                @foreach($page->tags as $tag)
-                    <tr class="tag">
-                        <td @if(!$tag->value) colspan="2" @endif><a href="{{ baseUrl('/search?term=%5B' . urlencode($tag->name) .'%5D') }}">{{ $tag->name }}</a></td>
-                        @if($tag->value) <td class="tag-value"><a href="{{ baseUrl('/search?term=%5B' . urlencode($tag->name) .'%3D' . urlencode($tag->value) . '%5D') }}">{{$tag->value}}</a></td> @endif
-                    </tr>
-                @endforeach
-                </tbody>
-            </table>
+        <div class="card tag-display">
+            <h3><i class="zmdi zmdi-tag"></i> {{ trans('entities.page_tags') }}</h3>
+            <div class="body">
+                <table>
+                    <tbody>
+                    @foreach($page->tags as $tag)
+                        <tr class="tag">
+                            <td @if(!$tag->value) colspan="2" @endif><a href="{{ baseUrl('/search?term=%5B' . urlencode($tag->name) .'%5D') }}">{{ $tag->name }}</a></td>
+                            @if($tag->value) <td class="tag-value"><a href="{{ baseUrl('/search?term=%5B' . urlencode($tag->name) .'%3D' . urlencode($tag->value) . '%5D') }}">{{$tag->value}}</a></td> @endif
+                        </tr>
+                    @endforeach
+                    </tbody>
+                </table>
+            </div>
         </div>
     @endif
 
     @if (isset($page) && $page->attachments->count() > 0)
-        <h6 class="text-muted">{{ trans('entities.pages_attachments') }}</h6>
-        @foreach($page->attachments as $attachment)
-            <div class="attachment">
-                <a href="{{ $attachment->getUrl() }}" @if($attachment->external) target="_blank" @endif><i class="zmdi zmdi-{{ $attachment->external ? 'open-in-new' : 'file' }}"></i>{{ $attachment->name }}</a>
+        <div class="card">
+            <h3><i class="zmdi zmdi-attachment-alt"></i> {{ trans('entities.pages_attachments') }}</h3>
+            <div class="body">
+                @foreach($page->attachments as $attachment)
+                    <div class="attachment">
+                        <a href="{{ $attachment->getUrl() }}" @if($attachment->external) target="_blank" @endif><i class="zmdi zmdi-{{ $attachment->external ? 'open-in-new' : 'file' }}"></i>{{ $attachment->name }}</a>
+                    </div>
+                @endforeach
             </div>
-        @endforeach
-    @endif
-
-    @if (isset($pageNav) && count($pageNav))
-        <h6 class="text-muted">{{ trans('entities.pages_navigation') }}</h6>
-        <div class="sidebar-page-nav menu">
-            @foreach($pageNav as $navItem)
-                <li class="page-nav-item h{{ $navItem['level'] }}">
-                    <a href="{{ $navItem['link'] }}">{{ $navItem['text'] }}</a>
-                </li>
-            @endforeach
         </div>
     @endif
 
-    <h6 class="text-muted">{{ trans('entities.books_navigation') }}</h6>
-    <ul class="sidebar-page-list menu">
+    @if (isset($pageNav) && count($pageNav))
+        <div class="card">
+            <h3><i class="zmdi zmdi-compass"></i> {{ trans('entities.pages_navigation') }}</h3>
+            <div class="body">
+                <div class="sidebar-page-nav menu">
+                    @foreach($pageNav as $navItem)
+                        <li class="page-nav-item h{{ $navItem['level'] }}">
+                            <a href="{{ $navItem['link'] }}">{{ $navItem['text'] }}</a>
+                        </li>
+                    @endforeach
+                </div>
+            </div>
+        </div>
+    @endif
 
-        @if (userCan('view', $book))
-            <li class="book-header"><a href="{{ $book->getUrl() }}" class="book {{ $current->matches($book)? 'selected' : '' }}"><i class="zmdi zmdi-book"></i>{{$book->name}}</a></li>
-        @endif
+    <div class="card">
+        <h3><i class="zmdi zmdi-book"></i> {{ trans('entities.books_navigation') }}</h3>
+        <div class="body">
+            <ul class="sidebar-page-list menu">
 
-        @foreach($sidebarTree as $bookChild)
-            <li class="list-item-{{ $bookChild->getClassName() }} {{ $bookChild->getClassName() }} {{ $bookChild->isA('page') && $bookChild->draft ? 'draft' : '' }}">
-                <a href="{{ $bookChild->getUrl() }}" class="{{ $bookChild->getClassName() }} {{ $current->matches($bookChild)? 'selected' : '' }}">
-                    @if($bookChild->isA('chapter'))<i class="zmdi zmdi-collection-bookmark"></i>@else <i class="zmdi zmdi-file-text"></i>@endif{{ $bookChild->name }}
-                </a>
-
-                @if($bookChild->isA('chapter') && count($bookChild->pages) > 0)
-                    <p chapter-toggle class="text-muted @if($bookChild->matchesOrContains($current)) open @endif">
-                        <i class="zmdi zmdi-caret-right"></i> <i class="zmdi zmdi-file-text"></i> <span>{{ trans('entities.x_pages', ['count' => $bookChild->pages->count()]) }}</span>
-                    </p>
-                    <ul class="menu sub-menu inset-list @if($bookChild->matchesOrContains($current)) open @endif">
-                        @foreach($bookChild->pages as $childPage)
-                            <li class="list-item-page {{ $childPage->isA('page') && $childPage->draft ? 'draft' : '' }}">
-                                <a href="{{ $childPage->getUrl() }}" class="page {{ $current->matches($childPage)? 'selected' : '' }}">
-                                    <i class="zmdi zmdi-file-text"></i> {{ $childPage->name }}
-                                </a>
-                            </li>
-                        @endforeach
-                    </ul>
+                @if (userCan('view', $book))
+                    <li class="book-header"><a href="{{ $book->getUrl() }}" class="book {{ $current->matches($book)? 'selected' : '' }}"><i class="zmdi zmdi-book"></i>{{$book->name}}</a></li>
                 @endif
 
+                @foreach($sidebarTree as $bookChild)
+                    <li class="list-item-{{ $bookChild->getClassName() }} {{ $bookChild->getClassName() }} {{ $bookChild->isA('page') && $bookChild->draft ? 'draft' : '' }}">
+                        <a href="{{ $bookChild->getUrl() }}" class="{{ $bookChild->getClassName() }} {{ $current->matches($bookChild)? 'selected' : '' }}">
+                            @if($bookChild->isA('chapter'))<i class="zmdi zmdi-collection-bookmark"></i>@else <i class="zmdi zmdi-file-text"></i>@endif{{ $bookChild->name }}
+                        </a>
 
-            </li>
-        @endforeach
+                        @if($bookChild->isA('chapter') && count($bookChild->pages) > 0)
+                            <p chapter-toggle class="text-muted @if($bookChild->matchesOrContains($current)) open @endif">
+                                <i class="zmdi zmdi-caret-right"></i> <i class="zmdi zmdi-file-text"></i> <span>{{ trans('entities.x_pages', ['count' => $bookChild->pages->count()]) }}</span>
+                            </p>
+                            <ul class="menu sub-menu inset-list @if($bookChild->matchesOrContains($current)) open @endif">
+                                @foreach($bookChild->pages as $childPage)
+                                    <li class="list-item-page {{ $childPage->isA('page') && $childPage->draft ? 'draft' : '' }}">
+                                        <a href="{{ $childPage->getUrl() }}" class="page {{ $current->matches($childPage)? 'selected' : '' }}">
+                                            <i class="zmdi zmdi-file-text"></i> {{ $childPage->name }}
+                                        </a>
+                                    </li>
+                                @endforeach
+                            </ul>
+                        @endif
 
 
-    </ul>
+                    </li>
+                @endforeach
+            </ul>
+        </div>
+    </div>
+
 </div>
diff --git a/resources/views/sidebar-layout.blade.php b/resources/views/sidebar-layout.blade.php
new file mode 100644
index 000000000..78e053690
--- /dev/null
+++ b/resources/views/sidebar-layout.blade.php
@@ -0,0 +1,30 @@
+@extends('base')
+
+@section('content')
+
+    <div class="faded-small toolbar">
+        <div class="container fluid">
+            <div class="row">
+                @yield('toolbar')
+            </div>
+        </div>
+    </div>
+
+
+    <div class="flex-fill flex">
+
+        <div class="sidebar flex print-hidden">
+            <div class="scroll-body">
+                @yield('sidebar')
+            </div>
+        </div>
+
+        <div class="content flex">
+            <div class="scroll-body">
+                @yield('body')
+            </div>
+        </div>
+    </div>
+
+
+@stop

From 3da8c01c1f8fbb3e2928151f5ba598321020a70d Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sun, 20 Aug 2017 13:57:25 +0100
Subject: [PATCH 2/8] Rolled out new design further

---
 app/Http/Controllers/BookController.php  |   9 +-
 app/Http/Controllers/HomeController.php  |   6 +-
 resources/assets/sass/_header.scss       |   4 +
 resources/assets/sass/_html.scss         |   3 +
 resources/assets/sass/_lists.scss        |   5 +
 resources/lang/en/common.php             |   3 +-
 resources/views/books/index.blade.php    |  93 +++++-----
 resources/views/books/show.blade.php     | 226 ++++++++++++-----------
 resources/views/chapters/show.blade.php  | 218 +++++++++++-----------
 resources/views/home.blade.php           |  80 ++++----
 resources/views/pages/show.blade.php     |  82 ++++----
 resources/views/sidebar-layout.blade.php |  16 +-
 resources/views/simple-layout.blade.php  |  27 +++
 13 files changed, 411 insertions(+), 361 deletions(-)
 create mode 100644 resources/views/simple-layout.blade.php

diff --git a/app/Http/Controllers/BookController.php b/app/Http/Controllers/BookController.php
index 8996ae64a..6283ac8d1 100644
--- a/app/Http/Controllers/BookController.php
+++ b/app/Http/Controllers/BookController.php
@@ -36,7 +36,7 @@ class BookController extends Controller
      */
     public function index()
     {
-        $books = $this->entityRepo->getAllPaginated('book', 10);
+        $books = $this->entityRepo->getAllPaginated('book', 20);
         $recents = $this->signedIn ? $this->entityRepo->getRecentlyViewed('book', 4, 0) : false;
         $popular = $this->entityRepo->getPopular('book', 4, 0);
         $this->setPageTitle('Books');
@@ -84,7 +84,12 @@ class BookController extends Controller
         $bookChildren = $this->entityRepo->getBookChildren($book);
         Views::add($book);
         $this->setPageTitle($book->getShortName());
-        return view('books/show', ['book' => $book, 'current' => $book, 'bookChildren' => $bookChildren]);
+        return view('books/show', [
+            'book' => $book,
+            'current' => $book,
+            'bookChildren' => $bookChildren,
+            'activity' => Activity::entityActivity($book, 20, 0)
+        ]);
     }
 
     /**
diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php
index 7f60d7009..ad3b41655 100644
--- a/app/Http/Controllers/HomeController.php
+++ b/app/Http/Controllers/HomeController.php
@@ -29,13 +29,11 @@ class HomeController extends Controller
         $activity = Activity::latest(10);
         $draftPages = $this->signedIn ? $this->entityRepo->getUserDraftPages(6) : [];
         $recentFactor = count($draftPages) > 0 ? 0.5 : 1;
-        $recents = $this->signedIn ? Views::getUserRecentlyViewed(12*$recentFactor, 0) : $this->entityRepo->getRecentlyCreated('book', 10*$recentFactor);
-        $recentlyCreatedPages = $this->entityRepo->getRecentlyCreated('page', 5);
-        $recentlyUpdatedPages = $this->entityRepo->getRecentlyUpdated('page', 5);
+        $recents = $this->signedIn ? Views::getUserRecentlyViewed(12*$recentFactor, 0) : $this->entityRepo->getRecentlyCreated('book', 12*$recentFactor);
+        $recentlyUpdatedPages = $this->entityRepo->getRecentlyUpdated('page', 12);
         return view('home', [
             'activity' => $activity,
             'recents' => $recents,
-            'recentlyCreatedPages' => $recentlyCreatedPages,
             'recentlyUpdatedPages' => $recentlyUpdatedPages,
             'draftPages' => $draftPages
         ]);
diff --git a/resources/assets/sass/_header.scss b/resources/assets/sass/_header.scss
index 49bd74b07..3e92ce828 100644
--- a/resources/assets/sass/_header.scss
+++ b/resources/assets/sass/_header.scss
@@ -171,6 +171,10 @@ header .search-box {
   background-color: $primary-faded;
 }
 
+.toolbar-container {
+  background-color: #FFF;
+}
+
 .breadcrumbs .text-button, .action-buttons .text-button {
   display: inline-block;
   padding: $-s;
diff --git a/resources/assets/sass/_html.scss b/resources/assets/sass/_html.scss
index 27ca04eb7..9e47f4387 100644
--- a/resources/assets/sass/_html.scss
+++ b/resources/assets/sass/_html.scss
@@ -16,6 +16,9 @@ body {
   line-height: 1.6;
   color: #616161;
   -webkit-font-smoothing: antialiased;
+  &.shaded {
+    background-color: #F2F2F2;
+  }
 }
 
 button {
diff --git a/resources/assets/sass/_lists.scss b/resources/assets/sass/_lists.scss
index 61b2aa858..0cb58432c 100644
--- a/resources/assets/sass/_lists.scss
+++ b/resources/assets/sass/_lists.scss
@@ -310,6 +310,11 @@ ul.pagination {
   }
 }
 
+.card .entity-list-item {
+  padding-left: $-m;
+  padding-right: $-m;
+}
+
 .entity-list.compact {
   font-size: 0.6em;
   h4, a {
diff --git a/resources/lang/en/common.php b/resources/lang/en/common.php
index e1d74c95e..06b980970 100644
--- a/resources/lang/en/common.php
+++ b/resources/lang/en/common.php
@@ -10,6 +10,7 @@ return [
     'save' => 'Save',
     'continue' => 'Continue',
     'select' => 'Select',
+    'more' => 'More',
 
     /**
      * Form Labels
@@ -35,7 +36,6 @@ return [
     'remove' => 'Remove',
     'add' => 'Add',
 
-
     /**
      * Misc
      */
@@ -44,6 +44,7 @@ return [
     'no_items' => 'No items available',
     'back_to_top' => 'Back to top',
     'toggle_details' => 'Toggle Details',
+    'details' => 'Details',
 
     /**
      * Header
diff --git a/resources/views/books/index.blade.php b/resources/views/books/index.blade.php
index c090a127e..3c05f32a5 100644
--- a/resources/views/books/index.blade.php
+++ b/resources/views/books/index.blade.php
@@ -1,59 +1,50 @@
-@extends('base')
+@extends('sidebar-layout')
 
-@section('content')
-
-    <div class="faded-small toolbar">
-        <div class="container">
-            <div class="row">
-                <div class="col-xs-1"></div>
-                <div class="col-xs-11 faded">
-                    <div class="action-buttons">
-                        @if($currentUser->can('book-create-all'))
-                            <a href="{{ baseUrl("/books/create") }}" class="text-pos text-button"><i class="zmdi zmdi-plus"></i>{{ trans('entities.books_create') }}</a>
-                        @endif
-                    </div>
-                </div>
-            </div>
+@section('toolbar')
+    <div class="col-xs-1"></div>
+    <div class="col-xs-11 faded">
+        <div class="action-buttons">
+            @if($currentUser->can('book-create-all'))
+                <a href="{{ baseUrl("/books/create") }}" class="text-pos text-button"><i class="zmdi zmdi-plus"></i>{{ trans('entities.books_create') }}</a>
+            @endif
         </div>
     </div>
+@stop
 
-
-    <div class="container" ng-non-bindable>
-        <div class="row">
-            <div class="col-sm-7">
-                <h1>{{ trans('entities.books') }}</h1>
-                @if(count($books) > 0)
-                    @foreach($books as $book)
-                        @include('books/list-item', ['book' => $book])
-                        <hr>
-                    @endforeach
-                    {!! $books->render() !!}
-                @else
-                    <p class="text-muted">{{ trans('entities.books_empty') }}</p>
-                    @if(userCan('books-create-all'))
-                        <a href="{{ baseUrl("/books/create") }}" class="text-pos"><i class="zmdi zmdi-edit"></i>{{ trans('entities.create_one_now') }}</a>
-                    @endif
-                @endif
-            </div>
-            <div class="col-sm-4 col-sm-offset-1">
-                <div id="recents">
-                    @if($recents)
-                        <div class="margin-top">&nbsp;</div>
-                        <h3>{{ trans('entities.recently_viewed') }}</h3>
-                        @include('partials/entity-list', ['entities' => $recents])
-                    @endif
-                </div>
-                <div class="margin-top large">&nbsp;</div>
-                <div id="popular">
-                    <h3>{{ trans('entities.books_popular') }}</h3>
-                    @if(count($popular) > 0)
-                        @include('partials/entity-list', ['entities' => $popular])
-                    @else
-                        <p class="text-muted">{{ trans('entities.books_popular_empty') }}</p>
-                    @endif
-                </div>
-            </div>
+@section('sidebar')
+    @if($recents)
+        <div id="recents" class="card">
+            <h3><i class="zmdi zmdi-eye"></i> {{ trans('entities.recently_viewed') }}</h3>
+            @include('partials/entity-list', ['entities' => $recents, 'style' => 'compact'])
         </div>
+    @endif
+
+    <div id="popular" class="card">
+        <h3><i class="zmdi zmdi-fire"></i> {{ trans('entities.books_popular') }}</h3>
+        @if(count($popular) > 0)
+            @include('partials/entity-list', ['entities' => $popular, 'style' => 'compact'])
+        @else
+            <div class="body text-muted">{{ trans('entities.books_popular_empty') }}</div>
+        @endif
+    </div>
+@stop
+
+@section('body')
+
+    <div class="container small" ng-non-bindable>
+        <h1>{{ trans('entities.books') }}</h1>
+        @if(count($books) > 0)
+            @foreach($books as $book)
+                @include('books/list-item', ['book' => $book])
+                <hr>
+            @endforeach
+            {!! $books->render() !!}
+        @else
+            <p class="text-muted">{{ trans('entities.books_empty') }}</p>
+            @if(userCan('books-create-all'))
+                <a href="{{ baseUrl("/books/create") }}" class="text-pos"><i class="zmdi zmdi-edit"></i>{{ trans('entities.create_one_now') }}</a>
+            @endif
+        @endif
     </div>
 
 @stop
\ No newline at end of file
diff --git a/resources/views/books/show.blade.php b/resources/views/books/show.blade.php
index 97942ee67..28cd08928 100644
--- a/resources/views/books/show.blade.php
+++ b/resources/views/books/show.blade.php
@@ -1,128 +1,138 @@
-@extends('base')
+@extends('sidebar-layout')
 
-@section('content')
-
-    <div class="faded-small toolbar">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-6 col-xs-1  faded">
-                    @include('books._breadcrumbs', ['book' => $book])
-                </div>
-                <div class="col-sm-6 col-xs-11">
-                    <div class="action-buttons faded">
-                        <span dropdown class="dropdown-container">
-                            <div dropdown-toggle class="text-button text-primary"><i class="zmdi zmdi-open-in-new"></i>{{ trans('entities.export') }}</div>
-                            <ul class="wide">
-                                <li><a href="{{ $book->getUrl('/export/html') }}" target="_blank">{{ trans('entities.export_html') }} <span class="text-muted float right">.html</span></a></li>
-                                <li><a href="{{ $book->getUrl('/export/pdf') }}" target="_blank">{{ trans('entities.export_pdf') }} <span class="text-muted float right">.pdf</span></a></li>
-                                <li><a href="{{ $book->getUrl('/export/plaintext') }}" target="_blank">{{ trans('entities.export_text') }} <span class="text-muted float right">.txt</span></a></li>
-                            </ul>
-                        </span>
-                        @if(userCan('page-create', $book))
-                            <a href="{{ $book->getUrl('/page/create') }}" class="text-pos text-button"><i class="zmdi zmdi-plus"></i>{{ trans('entities.pages_new') }}</a>
-                        @endif
-                        @if(userCan('chapter-create', $book))
-                            <a href="{{ $book->getUrl('/chapter/create') }}" class="text-pos text-button"><i class="zmdi zmdi-plus"></i>{{ trans('entities.chapters_new') }}</a>
-                        @endif
+@section('toolbar')
+    <div class="col-sm-6 col-xs-1  faded">
+        @include('books._breadcrumbs', ['book' => $book])
+    </div>
+    <div class="col-sm-6 col-xs-11">
+        <div class="action-buttons faded">
+            <span dropdown class="dropdown-container">
+                <div dropdown-toggle class="text-button text-primary"><i class="zmdi zmdi-open-in-new"></i>{{ trans('entities.export') }}</div>
+                <ul class="wide">
+                    <li><a href="{{ $book->getUrl('/export/html') }}" target="_blank">{{ trans('entities.export_html') }} <span class="text-muted float right">.html</span></a></li>
+                    <li><a href="{{ $book->getUrl('/export/pdf') }}" target="_blank">{{ trans('entities.export_pdf') }} <span class="text-muted float right">.pdf</span></a></li>
+                    <li><a href="{{ $book->getUrl('/export/plaintext') }}" target="_blank">{{ trans('entities.export_text') }} <span class="text-muted float right">.txt</span></a></li>
+                </ul>
+            </span>
+            @if(userCan('page-create', $book))
+                <a href="{{ $book->getUrl('/page/create') }}" class="text-pos text-button"><i class="zmdi zmdi-plus"></i>{{ trans('entities.pages_new') }}</a>
+            @endif
+            @if(userCan('chapter-create', $book))
+                <a href="{{ $book->getUrl('/chapter/create') }}" class="text-pos text-button"><i class="zmdi zmdi-plus"></i>{{ trans('entities.chapters_new') }}</a>
+            @endif
+            @if(userCan('book-update', $book) || userCan('restrictions-manage', $book) || userCan('book-delete', $book))
+                <div dropdown class="dropdown-container">
+                    <a dropdown-toggle class="text-primary text-button"><i class="zmdi zmdi-more-vert"></i>{{ trans('common.more') }}</a>
+                    <ul>
                         @if(userCan('book-update', $book))
-                            <a href="{{$book->getEditUrl()}}" class="text-primary text-button"><i class="zmdi zmdi-edit"></i>{{ trans('common.edit') }}</a>
+                            <li><a href="{{$book->getEditUrl()}}" class="text-primary"><i class="zmdi zmdi-edit"></i>{{ trans('common.edit') }}</a></li>
+                            <li><a href="{{ $book->getUrl('/sort') }}" class="text-primary"><i class="zmdi zmdi-sort"></i>{{ trans('common.sort') }}</a></li>
                         @endif
-                        @if(userCan('book-update', $book) || userCan('restrictions-manage', $book) || userCan('book-delete', $book))
-                            <div dropdown class="dropdown-container">
-                                <a dropdown-toggle class="text-primary text-button"><i class="zmdi zmdi-more-vert"></i></a>
-                                <ul>
-                                    @if(userCan('book-update', $book))
-                                        <li><a href="{{ $book->getUrl('/sort') }}" class="text-primary"><i class="zmdi zmdi-sort"></i>{{ trans('common.sort') }}</a></li>
-                                    @endif
-                                    @if(userCan('restrictions-manage', $book))
-                                        <li><a href="{{ $book->getUrl('/permissions') }}" class="text-primary"><i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.permissions') }}</a></li>
-                                    @endif
-                                    @if(userCan('book-delete', $book))
-                                        <li><a href="{{ $book->getUrl('/delete') }}" class="text-neg"><i class="zmdi zmdi-delete"></i>{{ trans('common.delete') }}</a></li>
-                                    @endif
-                                </ul>
-                            </div>
+                        @if(userCan('restrictions-manage', $book))
+                            <li><a href="{{ $book->getUrl('/permissions') }}" class="text-primary"><i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.permissions') }}</a></li>
                         @endif
-                    </div>
+                        @if(userCan('book-delete', $book))
+                            <li><a href="{{ $book->getUrl('/delete') }}" class="text-neg"><i class="zmdi zmdi-delete"></i>{{ trans('common.delete') }}</a></li>
+                        @endif
+                    </ul>
                 </div>
-            </div>
+            @endif
+        </div>
+    </div>
+@stop
+
+@section('sidebar')
+
+    <div class="card">
+        <div class="body">
+            <form v-on:submit.prevent="searchBook" class="search-box">
+                <input v-model="searchTerm" v-on:change="checkSearchForm()" type="text" name="term" placeholder="{{ trans('entities.books_search_this') }}">
+                <button type="submit"><i class="zmdi zmdi-search"></i></button>
+                <button v-if="searching" v-cloak class="text-neg" v-on:click="clearSearch()" type="button"><i class="zmdi zmdi-close"></i></button>
+            </form>
         </div>
     </div>
 
-
-    <div ng-non-bindable class="container" id="entity-dashboard" entity-id="{{ $book->id }}" entity-type="book">
-        <div class="row">
-            <div class="col-md-7">
-
-                <h1>{{$book->name}}</h1>
-                <div class="book-content" v-show="!searching">
-                    <p class="text-muted" v-pre>{!! nl2br(e($book->description)) !!}</p>
-
-                    <div class="page-list" v-pre>
-                        <hr>
-                        @if(count($bookChildren) > 0)
-                            @foreach($bookChildren as $childElement)
-                                @if($childElement->isA('chapter'))
-                                    @include('chapters/list-item', ['chapter' => $childElement])
-                                @else
-                                    @include('pages/list-item', ['page' => $childElement])
-                                @endif
-                                <hr>
-                            @endforeach
-                        @else
-                            <p class="text-muted">{{ trans('entities.books_empty_contents') }}</p>
-                            <p>
-                                @if(userCan('page-create', $book))
-                                <a href="{{ $book->getUrl('/page/create') }}" class="text-page"><i class="zmdi zmdi-file-text"></i>{{ trans('entities.books_empty_create_page') }}</a>
-                                @endif
-                                @if(userCan('page-create', $book) && userCan('chapter-create', $book))
-                                &nbsp;&nbsp;<em class="text-muted">-{{ trans('entities.books_empty_or') }}-</em>&nbsp;&nbsp;&nbsp;
-                                @endif
-                                @if(userCan('chapter-create', $book))
-                                <a href="{{ $book->getUrl('/chapter/create') }}" class="text-chapter"><i class="zmdi zmdi-collection-bookmark"></i>{{ trans('entities.books_empty_add_chapter') }}</a>
-                                @endif
-                            </p>
-                            <hr>
-                        @endif
-                        @include('partials.entity-meta', ['entity' => $book])
-                    </div>
-                </div>
-                <div class="search-results" v-cloak v-show="searching">
-                    <h3 class="text-muted">{{ trans('entities.search_results') }} <a v-if="searching" v-on:click="clearSearch()" class="text-small"><i class="zmdi zmdi-close"></i>{{ trans('entities.search_clear') }}</a></h3>
-                    <div v-if="!searchResults">
-                        @include('partials/loading-icon')
-                    </div>
-                    <div v-html="searchResults"></div>
-                </div>
-
-
+    @if($book->restricted)
+        <div class="card">
+            <h3><i class="zmdi zmdi-key"></i> {{ trans('entities.permissions') }}</h3>
+            <div class="body">
+                <p class="text-muted">
+                    @if(userCan('restrictions-manage', $book))
+                        <a href="{{ $book->getUrl('/permissions') }}"><i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.books_permissions_active') }}</a>
+                    @else
+                        <i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.books_permissions_active') }}
+                    @endif
+                </p>
             </div>
+        </div>
+    @endif
 
-            <div class="col-md-4 col-md-offset-1">
-                <div class="margin-top large"></div>
+    @if(count($activity) > 0)
+        <div class="activity card">
+            <h3><i class="zmdi zmdi-time"></i> {{ trans('entities.recent_activity') }}</h3>
+            <div class="body">
+                @include('partials/activity-list', ['activity' => $activity])
+            </div>
+        </div>
+    @endif
 
-                @if($book->restricted)
-                    <p class="text-muted">
-                        @if(userCan('restrictions-manage', $book))
-                            <a href="{{ $book->getUrl('/permissions') }}"><i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.books_permissions_active') }}</a>
+    <div class="card">
+        <h3><i class="zmdi zmdi-info-outline"></i> {{ trans('common.details') }}</h3>
+        <div class="body">
+            @include('partials.entity-meta', ['entity' => $book])
+        </div>
+    </div>
+@stop
+
+@section('container-attrs')
+    id="entity-dashboard"
+    entity-id="{{ $book->id }}"
+    entity-type="book"
+@stop
+
+@section('body')
+
+    <div ng-non-bindable class="container small">
+        <h1>{{$book->name}}</h1>
+        <div class="book-content" v-show="!searching">
+            <p class="text-muted" v-pre>{!! nl2br(e($book->description)) !!}</p>
+
+            <div class="page-list" v-pre>
+                <hr>
+                @if(count($bookChildren) > 0)
+                    @foreach($bookChildren as $childElement)
+                        @if($childElement->isA('chapter'))
+                            @include('chapters/list-item', ['chapter' => $childElement])
                         @else
-                            <i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.books_permissions_active') }}
+                            @include('pages/list-item', ['page' => $childElement])
+                        @endif
+                        <hr>
+                    @endforeach
+                @else
+                    <p class="text-muted">{{ trans('entities.books_empty_contents') }}</p>
+                    <p>
+                        @if(userCan('page-create', $book))
+                        <a href="{{ $book->getUrl('/page/create') }}" class="text-page"><i class="zmdi zmdi-file-text"></i>{{ trans('entities.books_empty_create_page') }}</a>
+                        @endif
+                        @if(userCan('page-create', $book) && userCan('chapter-create', $book))
+                        &nbsp;&nbsp;<em class="text-muted">-{{ trans('entities.books_empty_or') }}-</em>&nbsp;&nbsp;&nbsp;
+                        @endif
+                        @if(userCan('chapter-create', $book))
+                        <a href="{{ $book->getUrl('/chapter/create') }}" class="text-chapter"><i class="zmdi zmdi-collection-bookmark"></i>{{ trans('entities.books_empty_add_chapter') }}</a>
                         @endif
                     </p>
+                    <hr>
                 @endif
-
-                <form v-on:submit.prevent="searchBook" class="search-box">
-                    <input v-model="searchTerm" v-on:change="checkSearchForm()" type="text" name="term" placeholder="{{ trans('entities.books_search_this') }}">
-                    <button type="submit"><i class="zmdi zmdi-search"></i></button>
-                    <button v-if="searching" v-cloak class="text-neg" v-on:click="clearSearch()" type="button"><i class="zmdi zmdi-close"></i></button>
-                </form>
-
-                <div class="activity">
-                    <h3>{{ trans('entities.recent_activity') }}</h3>
-                    @include('partials/activity-list', ['activity' => Activity::entityActivity($book, 20, 0)])
-                </div>
             </div>
         </div>
+        <div class="search-results" v-cloak v-show="searching">
+            <h3 class="text-muted">{{ trans('entities.search_results') }} <a v-if="searching" v-on:click="clearSearch()" class="text-small"><i class="zmdi zmdi-close"></i>{{ trans('entities.search_clear') }}</a></h3>
+            <div v-if="!searchResults">
+                @include('partials/loading-icon')
+            </div>
+            <div v-html="searchResults"></div>
+        </div>
     </div>
 
 @stop
diff --git a/resources/views/chapters/show.blade.php b/resources/views/chapters/show.blade.php
index 62a7eaa74..701084280 100644
--- a/resources/views/chapters/show.blade.php
+++ b/resources/views/chapters/show.blade.php
@@ -1,15 +1,11 @@
-@extends('base')
+@extends('sidebar-layout')
 
-@section('content')
-
-    <div class="faded-small toolbar">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-6 col-xs-3 faded" ng-non-bindable>
-                    @include('chapters._breadcrumbs', ['chapter' => $chapter])
-                </div>
-                <div class="col-sm-6 col-xs-9 faded">
-                    <div class="action-buttons">
+@section('toolbar')
+    <div class="col-sm-6 col-xs-3 faded" ng-non-bindable>
+        @include('chapters._breadcrumbs', ['chapter' => $chapter])
+    </div>
+    <div class="col-sm-6 col-xs-9 faded">
+        <div class="action-buttons">
                         <span dropdown class="dropdown-container">
                             <div dropdown-toggle class="text-button text-primary"><i class="zmdi zmdi-open-in-new"></i>{{ trans('entities.export') }}</div>
                             <ul class="wide">
@@ -18,116 +14,126 @@
                                 <li><a href="{{ $chapter->getUrl('/export/plaintext') }}" target="_blank">{{ trans('entities.export_text') }} <span class="text-muted float right">.txt</span></a></li>
                             </ul>
                         </span>
-                        @if(userCan('page-create', $chapter))
-                            <a href="{{ $chapter->getUrl('/create-page') }}" class="text-pos text-button"><i class="zmdi zmdi-plus"></i>{{ trans('entities.pages_new') }}</a>
-                        @endif
+            @if(userCan('page-create', $chapter))
+                <a href="{{ $chapter->getUrl('/create-page') }}" class="text-pos text-button"><i class="zmdi zmdi-plus"></i>{{ trans('entities.pages_new') }}</a>
+            @endif
+            @if(userCan('chapter-update', $chapter))
+                <a href="{{ $chapter->getUrl('/edit') }}" class="text-primary text-button"><i class="zmdi zmdi-edit"></i>{{ trans('common.edit') }}</a>
+            @endif
+            @if(userCan('chapter-update', $chapter) || userCan('restrictions-manage', $chapter) || userCan('chapter-delete', $chapter))
+                <div dropdown class="dropdown-container">
+                    <a dropdown-toggle class="text-primary text-button"><i class="zmdi zmdi-more-vert"></i> {{ trans('common.more') }}</a>
+                    <ul>
                         @if(userCan('chapter-update', $chapter))
-                            <a href="{{ $chapter->getUrl('/edit') }}" class="text-primary text-button"><i class="zmdi zmdi-edit"></i>{{ trans('common.edit') }}</a>
+                            <li><a href="{{ $chapter->getUrl('/move') }}" class="text-primary"><i class="zmdi zmdi-folder"></i>{{ trans('common.move') }}</a></li>
                         @endif
-                        @if(userCan('chapter-update', $chapter) || userCan('restrictions-manage', $chapter) || userCan('chapter-delete', $chapter))
-                            <div dropdown class="dropdown-container">
-                                <a dropdown-toggle class="text-primary text-button"><i class="zmdi zmdi-more-vert"></i></a>
-                                <ul>
-                                    @if(userCan('chapter-update', $chapter))
-                                        <li><a href="{{ $chapter->getUrl('/move') }}" class="text-primary"><i class="zmdi zmdi-folder"></i>{{ trans('common.move') }}</a></li>
-                                    @endif
-                                    @if(userCan('restrictions-manage', $chapter))
-                                        <li><a href="{{ $chapter->getUrl('/permissions') }}" class="text-primary"><i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.permissions') }}</a></li>
-                                    @endif
-                                    @if(userCan('chapter-delete', $chapter))
-                                        <li><a href="{{ $chapter->getUrl('/delete') }}" class="text-neg"><i class="zmdi zmdi-delete"></i>{{ trans('common.delete') }}</a></li>
-                                    @endif
-                                </ul>
-                            </div>
+                        @if(userCan('restrictions-manage', $chapter))
+                            <li><a href="{{ $chapter->getUrl('/permissions') }}" class="text-primary"><i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.permissions') }}</a></li>
                         @endif
-                    </div>
+                        @if(userCan('chapter-delete', $chapter))
+                            <li><a href="{{ $chapter->getUrl('/delete') }}" class="text-neg"><i class="zmdi zmdi-delete"></i>{{ trans('common.delete') }}</a></li>
+                        @endif
+                    </ul>
                 </div>
-            </div>
+            @endif
+        </div>
+    </div>
+@stop
+
+@section('container-attrs')
+    id="entity-dashboard"
+    entity-id="{{ $chapter->id }}"
+    entity-type="chapter"
+@stop
+
+@section('sidebar')
+    <div class="card">
+        <div class="body">
+            <form @submit.prevent="searchBook" class="search-box">
+                <input v-model="searchTerm" @change="checkSearchForm()" type="text" name="term" placeholder="{{ trans('entities.chapters_search_this') }}">
+                <button type="submit"><i class="zmdi zmdi-search"></i></button>
+                <button v-if="searching" v-cloak class="text-neg" @click="clearSearch()" type="button"><i class="zmdi zmdi-close"></i></button>
+            </form>
         </div>
     </div>
 
-
-    <div class="container" id="entity-dashboard" ng-non-bindable entity-id="{{ $chapter->id }}" entity-type="chapter">
-        <div class="row">
-            <div class="col-md-7">
-                <h1>{{ $chapter->name }}</h1>
-                <div class="chapter-content" v-show="!searching">
-                    <p class="text-muted">{!! nl2br(e($chapter->description)) !!}</p>
-
-                    @if(count($pages) > 0)
-                        <div class="page-list">
-                            <hr>
-                            @foreach($pages as $page)
-                                @include('pages/list-item', ['page' => $page])
-                                <hr>
-                            @endforeach
-                        </div>
-                    @else
-                        <hr>
-                        <p class="text-muted">{{ trans('entities.chapters_empty') }}</p>
-                        <p>
-                            @if(userCan('page-create', $chapter))
-                                <a href="{{ $chapter->getUrl('/create-page') }}" class="text-page"><i class="zmdi zmdi-file-text"></i>{{ trans('entities.books_empty_create_page') }}</a>
-                            @endif
-                            @if(userCan('page-create', $chapter) && userCan('book-update', $book))
-                                &nbsp;&nbsp;<em class="text-muted">-{{ trans('entities.books_empty_or') }}-</em>&nbsp;&nbsp;&nbsp;
-                            @endif
-                            @if(userCan('book-update', $book))
-                                <a href="{{ $book->getUrl('/sort') }}" class="text-book"><i class="zmdi zmdi-book"></i>{{ trans('entities.books_empty_sort_current_book') }}</a>
-                            @endif
-                        </p>
-                        <hr>
-                    @endif
-
-                    @include('partials.entity-meta', ['entity' => $chapter])
-                </div>
-
-                <div class="search-results" v-cloak v-show="searching">
-                    <h3 class="text-muted">{{ trans('entities.search_results') }} <a v-if="searching" v-on:click="clearSearch()" class="text-small"><i class="zmdi zmdi-close"></i>{{ trans('entities.search_clear') }}</a></h3>
-                    <div v-if="!searchResults">
-                        @include('partials/loading-icon')
-                    </div>
-                    <div v-html="searchResults"></div>
-                </div>
-            </div>
-            <div class="col-md-4 col-md-offset-1">
-                <div class="margin-top large"></div>
-                @if($book->restricted || $chapter->restricted)
-                    <div class="text-muted">
-
-                        @if($book->restricted)
-                            <p class="text-muted">
-                                @if(userCan('restrictions-manage', $book))
-                                    <a href="{{ $book->getUrl('/permissions') }}"><i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.books_permissions_active') }}</a>
-                                @else
-                                    <i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.books_permissions_active') }}
-                                @endif
-                            </p>
+    @if($book->restricted || $chapter->restricted)
+        <div class="card">
+            <h3><i class="zmdi zmdi-key"></i> {{ trans('entities.permissions') }}</h3>
+            <div class="body">
+                @if($book->restricted)
+                    <p class="text-muted">
+                        @if(userCan('restrictions-manage', $book))
+                            <a href="{{ $book->getUrl('/permissions') }}"><i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.books_permissions_active') }}</a>
+                        @else
+                            <i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.books_permissions_active') }}
                         @endif
-
-                        @if($chapter->restricted)
-                            @if(userCan('restrictions-manage', $chapter))
-                                <a href="{{ $chapter->getUrl('/permissions') }}"><i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.chapters_permissions_active') }}</a>
-                            @else
-                                <i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.chapters_permissions_active') }}
-                            @endif
-                        @endif
-                    </div>
+                    </p>
                 @endif
 
-                <form v-on:submit.prevent="searchBook" class="search-box">
-                    <input v-model="searchTerm" v-on:change="checkSearchForm()" type="text" name="term" placeholder="{{ trans('entities.chapters_search_this') }}">
-                    <button type="submit"><i class="zmdi zmdi-search"></i></button>
-                    <button v-if="searching" v-cloak class="text-neg" v-on:click="clearSearch()" type="button"><i class="zmdi zmdi-close"></i></button>
-                </form>
-
-                @include('pages/sidebar-tree-list', ['book' => $book, 'sidebarTree' => $sidebarTree])
-
+                @if($chapter->restricted)
+                    <p class="text-muted">
+                        @if(userCan('restrictions-manage', $chapter))
+                            <a href="{{ $chapter->getUrl('/permissions') }}"><i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.chapters_permissions_active') }}</a>
+                        @else
+                            <i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.chapters_permissions_active') }}
+                        @endif
+                    </p>
+                @endif
             </div>
         </div>
+    @endif
+
+    <div class="card">
+        <h3><i class="zmdi zmdi-info-outline"></i> {{ trans('common.details') }}</h3>
+        <div class="body">
+            @include('partials.entity-meta', ['entity' => $chapter])
+        </div>
     </div>
 
+    @include('pages/sidebar-tree-list', ['book' => $book, 'sidebarTree' => $sidebarTree])
+@stop
 
+@section('body')
 
+    <div class="container small"  ng-non-bindable >
+        <h1>{{ $chapter->name }}</h1>
+        <div class="chapter-content" v-show="!searching">
+            <p class="text-muted">{!! nl2br(e($chapter->description)) !!}</p>
+
+            @if(count($pages) > 0)
+                <div class="page-list">
+                    <hr>
+                    @foreach($pages as $page)
+                        @include('pages/list-item', ['page' => $page])
+                        <hr>
+                    @endforeach
+                </div>
+            @else
+                <hr>
+                <p class="text-muted">{{ trans('entities.chapters_empty') }}</p>
+                <p>
+                    @if(userCan('page-create', $chapter))
+                        <a href="{{ $chapter->getUrl('/create-page') }}" class="text-page"><i class="zmdi zmdi-file-text"></i>{{ trans('entities.books_empty_create_page') }}</a>
+                    @endif
+                    @if(userCan('page-create', $chapter) && userCan('book-update', $book))
+                        &nbsp;&nbsp;<em class="text-muted">-{{ trans('entities.books_empty_or') }}-</em>&nbsp;&nbsp;&nbsp;
+                    @endif
+                    @if(userCan('book-update', $book))
+                        <a href="{{ $book->getUrl('/sort') }}" class="text-book"><i class="zmdi zmdi-book"></i>{{ trans('entities.books_empty_sort_current_book') }}</a>
+                    @endif
+                </p>
+                <hr>
+            @endif
+        </div>
+
+        <div class="search-results" v-cloak v-show="searching">
+            <h3 class="text-muted">{{ trans('entities.search_results') }} <a v-if="searching" @click="clearSearch()" class="text-small"><i class="zmdi zmdi-close"></i>{{ trans('entities.search_clear') }}</a></h3>
+            <div v-if="!searchResults">
+                @include('partials/loading-icon')
+            </div>
+            <div v-html="searchResults"></div>
+        </div>
+    </div>
 
 @stop
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index 87c84ec1e..6cd450a82 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -1,64 +1,56 @@
-@extends('base')
+@extends('simple-layout')
 
-@section('content')
-
-    <div class="faded-small toolbar">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-6 faded">
-                    <div class="action-buttons text-left">
-                        <a expand-toggle=".entity-list.compact .entity-item-snippet" class="text-primary text-button"><i class="zmdi zmdi-wrap-text"></i>{{ trans('common.toggle_details') }}</a>
-                    </div>
-                </div>
-            </div>
+@section('toolbar')
+    <div class="col-sm-6 faded">
+        <div class="action-buttons text-left">
+            <a expand-toggle=".entity-list.compact .entity-item-snippet" class="text-primary text-button"><i class="zmdi zmdi-wrap-text"></i>{{ trans('common.toggle_details') }}</a>
         </div>
     </div>
+@stop
+
+@section('body')
 
     <div class="container" ng-non-bindable>
         <div class="row">
 
             <div class="col-sm-4">
-                <div id="recent-drafts">
-                    @if(count($draftPages) > 0)
-                        <h4>{{ trans('entities.my_recent_drafts') }}</h4>
+                @if(count($draftPages) > 0)
+                    <div id="recent-drafts" class="card">
+                        <h3>{{ trans('entities.my_recent_drafts') }}</h3>
                         @include('partials/entity-list', ['entities' => $draftPages, 'style' => 'compact'])
-                    @endif
-                </div>
-                @if($signedIn)
-                    <h4>{{ trans('entities.my_recently_viewed') }}</h4>
-                @else
-                    <h4>{{ trans('entities.books_recent') }}</h4>
+                    </div>
                 @endif
-                @include('partials/entity-list', [
-                'entities' => $recents,
-                'style' => 'compact',
-                'emptyText' => $signedIn ? trans('entities.no_pages_viewed') : trans('entities.books_empty')
-                ])
+
+                <div class="card">
+                    <h3>{{ trans('entities.' . ($signedIn ? 'my_recently_viewed' : 'books_recent')) }}</h3>
+                    @include('partials/entity-list', [
+                        'entities' => $recents,
+                        'style' => 'compact',
+                        'emptyText' => $signedIn ? trans('entities.no_pages_viewed') : trans('entities.books_empty')
+                        ])
+                </div>
             </div>
 
             <div class="col-sm-4">
-                <h4><a class="no-color" href="{{ baseUrl("/pages/recently-created") }}">{{ trans('entities.recently_created_pages') }}</a></h4>
-                <div id="recently-created-pages">
-                    @include('partials/entity-list', [
-                    'entities' => $recentlyCreatedPages,
-                    'style' => 'compact',
-                    'emptyText' => trans('entities.no_pages_recently_created')
-                    ])
-                </div>
-
-                <h4><a class="no-color" href="{{ baseUrl("/pages/recently-updated") }}">{{ trans('entities.recently_updated_pages') }}</a></h4>
-                <div id="recently-updated-pages">
-                    @include('partials/entity-list', [
-                    'entities' => $recentlyUpdatedPages,
-                    'style' => 'compact',
-                    'emptyText' => trans('entities.no_pages_recently_updated')
-                    ])
+                <div class="card">
+                    <h3><a class="no-color" href="{{ baseUrl("/pages/recently-updated") }}">{{ trans('entities.recently_updated_pages') }}</a></h3>
+                    <div id="recently-updated-pages">
+                        @include('partials/entity-list', [
+                        'entities' => $recentlyUpdatedPages,
+                        'style' => 'compact',
+                        'emptyText' => trans('entities.no_pages_recently_updated')
+                        ])
+                    </div>
                 </div>
             </div>
 
             <div class="col-sm-4" id="recent-activity">
-                <h4>{{ trans('entities.recent_activity') }}</h4>
-                @include('partials/activity-list', ['activity' => $activity])
+                <div class="card">
+                    <h3>{{ trans('entities.recent_activity') }}</h3>
+                    <div class="body">
+                        @include('partials/activity-list', ['activity' => $activity])
+                    </div>
+                </div>
             </div>
 
         </div>
diff --git a/resources/views/pages/show.blade.php b/resources/views/pages/show.blade.php
index 6b06b4611..bd2580a66 100644
--- a/resources/views/pages/show.blade.php
+++ b/resources/views/pages/show.blade.php
@@ -6,14 +6,14 @@
     </div>
     <div class="col-sm-4 col-xs-7 faded">
         <div class="action-buttons">
-                    <span dropdown class="dropdown-container">
-                        <div dropdown-toggle class="text-button text-primary"><i class="zmdi zmdi-open-in-new"></i>{{ trans('entities.export') }}</div>
-                        <ul class="wide">
-                            <li><a href="{{ $page->getUrl('/export/html') }}" target="_blank">{{ trans('entities.export_html') }} <span class="text-muted float right">.html</span></a></li>
-                            <li><a href="{{ $page->getUrl('/export/pdf') }}" target="_blank">{{ trans('entities.export_pdf') }} <span class="text-muted float right">.pdf</span></a></li>
-                            <li><a href="{{ $page->getUrl('/export/plaintext') }}" target="_blank">{{ trans('entities.export_text') }} <span class="text-muted float right">.txt</span></a></li>
-                        </ul>
-                    </span>
+            <span dropdown class="dropdown-container">
+                <div dropdown-toggle class="text-button text-primary"><i class="zmdi zmdi-open-in-new"></i>{{ trans('entities.export') }}</div>
+                <ul class="wide">
+                    <li><a href="{{ $page->getUrl('/export/html') }}" target="_blank">{{ trans('entities.export_html') }} <span class="text-muted float right">.html</span></a></li>
+                    <li><a href="{{ $page->getUrl('/export/pdf') }}" target="_blank">{{ trans('entities.export_pdf') }} <span class="text-muted float right">.pdf</span></a></li>
+                    <li><a href="{{ $page->getUrl('/export/plaintext') }}" target="_blank">{{ trans('entities.export_text') }} <span class="text-muted float right">.txt</span></a></li>
+                </ul>
+            </span>
             @if(userCan('page-update', $page))
                 <a href="{{ $page->getUrl('/edit') }}" class="text-primary text-button" ><i class="zmdi zmdi-edit"></i>{{ trans('common.edit') }}</a>
             @endif
@@ -41,38 +41,50 @@
 
 @section('sidebar')
     @if($book->restricted || ($page->chapter && $page->chapter->restricted) || $page->restricted)
-        <div class="text-muted">
+        <div class="card">
+            <h3><i class="zmdi zmdi-key"></i> {{ trans('entities.permissions') }}</h3>
+            <div class="body">
+                <div class="text-muted">
 
-            @if($book->restricted)
-                @if(userCan('restrictions-manage', $book))
-                    <a href="{{ $book->getUrl('/permissions') }}"><i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.books_permissions_active') }}</a>
-                @else
-                    <i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.books_permissions_active') }}
-                @endif
-                <br>
-            @endif
+                    @if($book->restricted)
+                        @if(userCan('restrictions-manage', $book))
+                            <a href="{{ $book->getUrl('/permissions') }}"><i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.books_permissions_active') }}</a>
+                        @else
+                            <i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.books_permissions_active') }}
+                        @endif
+                        <br>
+                    @endif
 
-            @if($page->chapter && $page->chapter->restricted)
-                @if(userCan('restrictions-manage', $page->chapter))
-                    <a href="{{ $page->chapter->getUrl('/permissions') }}"><i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.chapters_permissions_active') }}</a>
-                @else
-                    <i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.chapters_permissions_active') }}
-                @endif
-                <br>
-            @endif
+                    @if($page->chapter && $page->chapter->restricted)
+                        @if(userCan('restrictions-manage', $page->chapter))
+                            <a href="{{ $page->chapter->getUrl('/permissions') }}"><i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.chapters_permissions_active') }}</a>
+                        @else
+                            <i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.chapters_permissions_active') }}
+                        @endif
+                        <br>
+                    @endif
 
-            @if($page->restricted)
-                @if(userCan('restrictions-manage', $page))
-                    <a href="{{ $page->getUrl('/permissions') }}"><i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.pages_permissions_active') }}</a>
-                @else
-                    <i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.pages_permissions_active') }}
-                @endif
-                <br>
-            @endif
+                    @if($page->restricted)
+                        @if(userCan('restrictions-manage', $page))
+                            <a href="{{ $page->getUrl('/permissions') }}"><i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.pages_permissions_active') }}</a>
+                        @else
+                            <i class="zmdi zmdi-lock-outline"></i>{{ trans('entities.pages_permissions_active') }}
+                        @endif
+                        <br>
+                    @endif
+                </div>
+            </div>
         </div>
     @endif
 
     @include('pages/sidebar-tree-list', ['book' => $book, 'sidebarTree' => $sidebarTree, 'pageNav' => $pageNav])
+
+    <div class="card">
+        <h3><i class="zmdi zmdi-info-outline"></i> {{ trans('common.details') }}</h3>
+        <div class="body">
+            @include('partials.entity-meta', ['entity' => $book])
+        </div>
+    </div>
 @stop
 
 @section('body')
@@ -88,10 +100,6 @@
 
         @include('pages/page-display')
 
-        <hr>
-
-        @include('partials.entity-meta', ['entity' => $page])
-
     </div>
     <div class="container small">
         @include('comments/comments', ['pageId' => $page->id])
diff --git a/resources/views/sidebar-layout.blade.php b/resources/views/sidebar-layout.blade.php
index 78e053690..55701b8ba 100644
--- a/resources/views/sidebar-layout.blade.php
+++ b/resources/views/sidebar-layout.blade.php
@@ -2,16 +2,18 @@
 
 @section('content')
 
-    <div class="faded-small toolbar">
-        <div class="container fluid">
-            <div class="row">
-                @yield('toolbar')
+    <div class="toolbar-container">
+        <div class="faded-small toolbar">
+            <div class="container fluid">
+                <div class="row">
+                    @yield('toolbar')
+                </div>
             </div>
         </div>
     </div>
 
 
-    <div class="flex-fill flex">
+    <div class="flex-fill flex" @yield('container-attrs') >
 
         <div class="sidebar flex print-hidden">
             <div class="scroll-body">
@@ -20,9 +22,7 @@
         </div>
 
         <div class="content flex">
-            <div class="scroll-body">
-                @yield('body')
-            </div>
+            @yield('body')
         </div>
     </div>
 
diff --git a/resources/views/simple-layout.blade.php b/resources/views/simple-layout.blade.php
new file mode 100644
index 000000000..eeb4129e0
--- /dev/null
+++ b/resources/views/simple-layout.blade.php
@@ -0,0 +1,27 @@
+@extends('base')
+
+@section('body-class', 'shaded')
+
+@section('content')
+
+    <div class="toolbar-container">
+        <div class="faded-small toolbar">
+            <div class="container fluid">
+                <div class="row">
+                    @yield('toolbar')
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <div class="flex-fill flex">
+        <div class="content flex">
+            <div class="scroll-body">
+                @yield('body')
+            </div>
+        </div>
+    </div>
+
+
+@stop

From 8fcbe44d3ed8f1e12bae50a104a91bc9feb00e92 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sat, 26 Aug 2017 13:24:55 +0100
Subject: [PATCH 3/8] Updated styles for auth and books views.

Also added sourcemaps to gulp sass build
---
 app/Http/Controllers/BookController.php       |  8 +-
 gulpfile.js                                   |  8 +-
 package.json                                  |  1 +
 resources/assets/sass/_blocks.scss            |  8 +-
 resources/assets/sass/_buttons.scss           | 37 +++++++--
 resources/assets/sass/_forms.scss             | 29 ++-----
 resources/assets/sass/_html.scss              |  3 +
 resources/assets/sass/_lists.scss             | 12 +--
 resources/assets/sass/_text.scss              |  2 +-
 resources/assets/sass/styles.scss             |  9 +--
 resources/lang/en/entities.php                |  4 +-
 resources/views/auth/login.blade.php          | 48 +++++------
 resources/views/auth/register.blade.php       | 61 +++++++-------
 resources/views/books/create.blade.php        | 29 +++++--
 resources/views/books/delete.blade.php        | 42 +++++-----
 resources/views/books/edit.blade.php          | 33 ++++----
 resources/views/books/form.blade.php          |  4 +-
 resources/views/books/index.blade.php         |  9 +++
 resources/views/books/restrictions.blade.php  | 27 +++----
 resources/views/books/show.blade.php          | 43 +++++-----
 resources/views/books/sort.blade.php          | 79 ++++++++++---------
 .../views/form/restriction-form.blade.php     |  6 +-
 resources/views/home.blade.php                | 12 ++-
 resources/views/public.blade.php              |  6 +-
 24 files changed, 291 insertions(+), 229 deletions(-)

diff --git a/app/Http/Controllers/BookController.php b/app/Http/Controllers/BookController.php
index 6283ac8d1..5342ece6b 100644
--- a/app/Http/Controllers/BookController.php
+++ b/app/Http/Controllers/BookController.php
@@ -39,8 +39,14 @@ class BookController extends Controller
         $books = $this->entityRepo->getAllPaginated('book', 20);
         $recents = $this->signedIn ? $this->entityRepo->getRecentlyViewed('book', 4, 0) : false;
         $popular = $this->entityRepo->getPopular('book', 4, 0);
+        $new = $this->entityRepo->getRecentlyCreated('book', 4, 0);
         $this->setPageTitle('Books');
-        return view('books/index', ['books' => $books, 'recents' => $recents, 'popular' => $popular]);
+        return view('books/index', [
+            'books' => $books,
+            'recents' => $recents,
+            'popular' => $popular,
+            'new' => $new
+        ]);
     }
 
     /**
diff --git a/gulpfile.js b/gulpfile.js
index f851dd7d6..c9f3f7956 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -3,16 +3,20 @@
 const argv = require('yargs').argv;
 const gulp = require('gulp'),
     plumber = require('gulp-plumber');
+
 const autoprefixer = require('gulp-autoprefixer');
-const uglify = require('gulp-uglify');
 const minifycss = require('gulp-clean-css');
 const sass = require('gulp-sass');
+const sourcemaps = require('gulp-sourcemaps');
+
 const browserify = require("browserify");
 const source = require('vinyl-source-stream');
 const buffer = require('vinyl-buffer');
 const babelify = require("babelify");
 const watchify = require("watchify");
 const envify = require("envify");
+const uglify = require('gulp-uglify');
+
 const gutil = require("gulp-util");
 const liveReload = require('gulp-livereload');
 
@@ -21,6 +25,7 @@ let isProduction = argv.production || process.env.NODE_ENV === 'production';
 
 gulp.task('styles', () => {
     let chain = gulp.src(['resources/assets/sass/**/*.scss'])
+        .pipe(sourcemaps.init())
         .pipe(plumber({
             errorHandler: function (error) {
                 console.log(error.message);
@@ -29,6 +34,7 @@ gulp.task('styles', () => {
         .pipe(sass())
         .pipe(autoprefixer('last 2 versions'));
     if (isProduction) chain = chain.pipe(minifycss());
+    chain = chain.pipe(sourcemaps.write());
     return chain.pipe(gulp.dest('public/css/')).pipe(liveReload());
 });
 
diff --git a/package.json b/package.json
index f447ec786..ed8338abb 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "clipboard": "^1.7.1",
     "codemirror": "^5.26.0",
     "dropzone": "^4.0.1",
+    "gulp-sourcemaps": "^2.6.1",
     "gulp-util": "^3.0.8",
     "markdown-it": "^8.3.1",
     "markdown-it-task-lists": "^2.0.0",
diff --git a/resources/assets/sass/_blocks.scss b/resources/assets/sass/_blocks.scss
index 3eb60152d..c5b850507 100644
--- a/resources/assets/sass/_blocks.scss
+++ b/resources/assets/sass/_blocks.scss
@@ -195,7 +195,13 @@
     font-weight: 400;
     text-transform: uppercase;
   }
-  .body {
+  .body, p.empty-text {
     padding: $-m;
   }
+}
+
+.well {
+  background-color: #F8F8F8;
+  padding: $-m;
+  border: 1px solid #DDD;
 }
\ No newline at end of file
diff --git a/resources/assets/sass/_buttons.scss b/resources/assets/sass/_buttons.scss
index 202eb935b..c07e6a37a 100644
--- a/resources/assets/sass/_buttons.scss
+++ b/resources/assets/sass/_buttons.scss
@@ -2,9 +2,10 @@
 @mixin generate-button-colors($textColor, $backgroundColor) {
   background-color: $backgroundColor;
   color: $textColor;
+  text-transform: uppercase;
   &:hover {
     background-color: lighten($backgroundColor, 8%);
-    box-shadow: $bs-med;
+    //box-shadow: $bs-med;
     text-decoration: none;
     color: $textColor;
   }
@@ -26,16 +27,16 @@ $button-border-radius: 2px;
   text-decoration: none;
   font-size: $fs-m;
   line-height: 1.4em;
-  padding: $-xs $-m;
+  padding: $-xs*1.3 $-m;
   margin: $-xs $-xs $-xs 0;
   display: inline-block;
   border: none;
-  font-weight: 500;
+  font-weight: 400;
   outline: 0;
   border-radius: $button-border-radius;
   cursor: pointer;
   transition: all ease-in-out 120ms;
-  box-shadow: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.21);
+  box-shadow: 0;
   @include generate-button-colors(#EEE, $primary);
 }
 
@@ -51,13 +52,39 @@ $button-border-radius: 2px;
     @include generate-button-colors(#EEE, $secondary);
   }
   &.muted {
-    @include generate-button-colors(#EEE, #888);
+    @include generate-button-colors(#EEE, #AAA);
   }
   &.muted-light {
     @include generate-button-colors(#666, #e4e4e4);
   }
 }
 
+.button.outline {
+  background-color: transparent;
+  color: #888;
+  border: 1px solid #DDD;
+  &:hover, &:focus, &:active {
+    box-shadow: none;
+    background-color: #EEE;
+  }
+  &.page {
+    border-color: $color-page;
+    color: $color-page;
+    &:hover, &:focus, &:active {
+      background-color: $color-page;
+      color: #FFF;
+    }
+  }
+  &.chapter {
+    border-color: $color-chapter;
+    color: $color-chapter;
+    &:hover, &:focus, &:active {
+      background-color: $color-chapter;
+      color: #FFF;
+    }
+  }
+}
+
 .text-button {
   @extend .link;
   background-color: transparent;
diff --git a/resources/assets/sass/_forms.scss b/resources/assets/sass/_forms.scss
index d372359cc..94752f26e 100644
--- a/resources/assets/sass/_forms.scss
+++ b/resources/assets/sass/_forms.scss
@@ -2,14 +2,13 @@
 .input-base {
   background-color: #FFF;
   border-radius: 3px;
-  border: 1px solid #CCC;
+  border: 1px solid #D4D4D4;
   display: inline-block;
   font-size: $fs-s;
-  padding: $-xs;
-  color: #222;
+  padding: $-xs*1.5;
+  color: #666;
   width: 250px;
   max-width: 100%;
-  //-webkit-appearance:none;
   &.neg, &.invalid {
     border: 1px solid $negative;
   }
@@ -84,8 +83,9 @@ label {
   display: block;
   line-height: 1.4em;
   font-size: 0.94em;
-  font-weight: 500;
-  color: #666;
+  font-weight: 400;
+  color: #999;
+  text-transform: uppercase;
   padding-bottom: 2px;
   margin-bottom: 0.2em;
   &.inline {
@@ -186,28 +186,15 @@ input:checked + .toggle-switch {
 }
 
 .inline-input-style {
-  border: 2px dotted #BBB;
   display: block;
   width: 100%;
-  padding: $-xs $-s;
-}
-
-.title-input .input {
-  width: 100%;
-}
-
-.title-input label, .description-input label{
-  margin-top: $-m;
-  color: #666;
+  padding: $-s;
 }
 
 .title-input input[type="text"] {
-  @extend h1;
   @extend .inline-input-style;
   margin-top: 0;
-  padding-right: 0;
-  width: 100%;
-  color: #444;
+  font-size: 2em;
 }
 
 .title-input.page-title {
diff --git a/resources/assets/sass/_html.scss b/resources/assets/sass/_html.scss
index 9e47f4387..65f05a71d 100644
--- a/resources/assets/sass/_html.scss
+++ b/resources/assets/sass/_html.scss
@@ -9,6 +9,9 @@ html {
   &.flexbox {
     overflow-y: hidden;
   }
+  &.shaded {
+    background-color: #F2F2F2;
+  }
 }
 
 body {
diff --git a/resources/assets/sass/_lists.scss b/resources/assets/sass/_lists.scss
index 0cb58432c..5d607ba16 100644
--- a/resources/assets/sass/_lists.scss
+++ b/resources/assets/sass/_lists.scss
@@ -239,6 +239,9 @@
   .left + .right {
     margin-left: 30px + $-s;
   }
+  &:last-of-type {
+    border-bottom: 0;
+  }
 }
 
 ul.pagination {
@@ -291,9 +294,6 @@ ul.pagination {
   h4 {
     margin: 0;
   }
-  p {
-    margin: $-xs 0 0 0;
-  }
   hr {
     margin: 0;
   }
@@ -310,7 +310,7 @@ ul.pagination {
   }
 }
 
-.card .entity-list-item {
+.card .entity-list-item, .card .activity-list-item {
   padding-left: $-m;
   padding-right: $-m;
 }
@@ -323,9 +323,11 @@ ul.pagination {
   .entity-item-snippet {
     display: none;
   }
-  p {
+  .entity-list-item p {
     font-size: $fs-m * 0.8;
     padding-top: $-xs;
+  }
+  p {
     margin: 0;
   }
   > p.empty-text {
diff --git a/resources/assets/sass/_text.scss b/resources/assets/sass/_text.scss
index d38a5c515..2911a88c6 100644
--- a/resources/assets/sass/_text.scss
+++ b/resources/assets/sass/_text.scss
@@ -2,7 +2,7 @@
  * Fonts
  */
 
-body, button, input, select, label {
+body, button, input, select, label, textarea {
   font-family: $text;
 }
 .Codemirror, pre, #markdown-editor-input, .editor-toolbar, .code-base {
diff --git a/resources/assets/sass/styles.scss b/resources/assets/sass/styles.scss
index b912bf7ee..3a6f9e062 100644
--- a/resources/assets/sass/styles.scss
+++ b/resources/assets/sass/styles.scss
@@ -217,22 +217,15 @@ $btt-size: 40px;
 }
 
 .center-box {
-  margin: $-xl auto 0 auto;
-  padding: $-m $-xxl $-xl $-xxl;
+  margin: $-xxl auto 0 auto;
   width: 420px;
   max-width: 100%;
   display: inline-block;
   text-align: left;
   vertical-align: top;
-  //border: 1px solid #DDD;
   input {
     width: 100%;
   }
-  &.login {
-    background-color: #EEE;
-    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
-    border: 1px solid #DDD;
-  }
 }
 
 
diff --git a/resources/lang/en/entities.php b/resources/lang/en/entities.php
index 43053df10..5b76559ea 100644
--- a/resources/lang/en/entities.php
+++ b/resources/lang/en/entities.php
@@ -73,11 +73,13 @@ return [
     'books_empty' => 'No books have been created',
     'books_popular' => 'Popular Books',
     'books_recent' => 'Recent Books',
+    'books_new' => 'New Books',
     'books_popular_empty' => 'The most popular books will appear here.',
+    'books_new_empty' => 'The most recently created books will appear here.',
     'books_create' => 'Create New Book',
     'books_delete' => 'Delete Book',
     'books_delete_named' => 'Delete Book :bookName',
-    'books_delete_explain' => 'This will delete the book with the name \':bookName\', All pages and chapters will be removed.',
+    'books_delete_explain' => 'This will delete the book with the name \':bookName\'. All pages and chapters will be removed.',
     'books_delete_confirmation' => 'Are you sure you want to delete this book?',
     'books_edit' => 'Edit Book',
     'books_edit_named' => 'Edit Book :bookName',
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 706747b8b..dda733645 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -9,36 +9,38 @@
 @section('content')
 
     <div class="text-center">
-        <div class="center-box">
-            <h1>{{ title_case(trans('auth.log_in')) }}</h1>
+        <div class="card center-box">
+            <h3><i class="zmdi zmdi-sign-in"></i> {{ title_case(trans('auth.log_in')) }}</h3>
 
-            <form action="{{ baseUrl("/login") }}" method="POST" id="login-form">
-                {!! csrf_field() !!}
+            <div class="body">
+                <form action="{{ baseUrl("/login") }}" method="POST" id="login-form">
+                    {!! csrf_field() !!}
 
 
-                @include('auth/forms/login/' . $authMethod)
+                    @include('auth/forms/login/' . $authMethod)
 
-                <div class="form-group">
-                    <label for="remember" class="inline">{{ trans('auth.remember_me') }}</label>
-                    <input type="checkbox" id="remember" name="remember"  class="toggle-switch-checkbox">
-                    <label for="remember" class="toggle-switch"></label>
-                </div>
+                    <div class="form-group">
+                        <label for="remember" class="inline">{{ trans('auth.remember_me') }}</label>
+                        <input type="checkbox" id="remember" name="remember"  class="toggle-switch-checkbox">
+                        <label for="remember" class="toggle-switch"></label>
+                    </div>
 
 
-                <div class="from-group">
-                    <button class="button block pos" tabindex="3"><i class="zmdi zmdi-sign-in"></i> {{ title_case(trans('auth.log_in')) }}</button>
-                </div>
-            </form>
+                    <div class="from-group">
+                        <button class="button block pos" tabindex="3"><i class="zmdi zmdi-sign-in"></i> {{ title_case(trans('auth.log_in')) }}</button>
+                    </div>
+                </form>
 
-            @if(count($socialDrivers) > 0)
-                <hr class="margin-top">
-                @foreach($socialDrivers as $driver => $name)
-                    <a id="social-login-{{$driver}}" class="button block muted-light svg text-left" href="{{ baseUrl("/login/service/" . $driver) }}">
-                        @icon($driver)
-                        {{ trans('auth.log_in_with', ['socialDriver' => $name]) }}
-                    </a>
-                @endforeach
-            @endif
+                @if(count($socialDrivers) > 0)
+                    <hr class="margin-top">
+                    @foreach($socialDrivers as $driver => $name)
+                        <a id="social-login-{{$driver}}" class="button block muted-light svg text-left" href="{{ baseUrl("/login/service/" . $driver) }}">
+                            @icon($driver)
+                            {{ trans('auth.log_in_with', ['socialDriver' => $name]) }}
+                        </a>
+                    @endforeach
+                @endif
+            </div>
         </div>
     </div>
 
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
index d5db4afa8..7b319d30c 100644
--- a/resources/views/auth/register.blade.php
+++ b/resources/views/auth/register.blade.php
@@ -7,41 +7,42 @@
 @section('content')
 
     <div class="text-center">
-        <div class="center-box">
-            <h1>{{ title_case(trans('auth.sign_up')) }}</h1>
+        <div class="card center-box">
+            <h3><i class="zmdi zmdi-account-add"></i> {{ title_case(trans('auth.sign_up')) }}</h3>
+            <div class="body">
+                <form action="{{ baseUrl("/register") }}" method="POST">
+                    {!! csrf_field() !!}
 
-            <form action="{{ baseUrl("/register") }}" method="POST">
-                {!! csrf_field() !!}
+                    <div class="form-group">
+                        <label for="email">{{ trans('auth.name') }}</label>
+                        @include('form/text', ['name' => 'name'])
+                    </div>
 
-                <div class="form-group">
-                    <label for="email">{{ trans('auth.name') }}</label>
-                    @include('form/text', ['name' => 'name'])
-                </div>
+                    <div class="form-group">
+                        <label for="email">{{ trans('auth.email') }}</label>
+                        @include('form/text', ['name' => 'email'])
+                    </div>
 
-                <div class="form-group">
-                    <label for="email">{{ trans('auth.email') }}</label>
-                    @include('form/text', ['name' => 'email'])
-                </div>
+                    <div class="form-group">
+                        <label for="password">{{ trans('auth.password') }}</label>
+                        @include('form/password', ['name' => 'password', 'placeholder' => trans('auth.password_hint')])
+                    </div>
 
-                <div class="form-group">
-                    <label for="password">{{ trans('auth.password') }}</label>
-                    @include('form/password', ['name' => 'password', 'placeholder' => trans('auth.password_hint')])
-                </div>
+                    <div class="from-group">
+                        <button class="button block pos">{{ trans('auth.create_account') }}</button>
+                    </div>
+                </form>
 
-                <div class="from-group">
-                    <button class="button block pos">{{ trans('auth.create_account') }}</button>
-                </div>
-            </form>
-
-            @if(count($socialDrivers) > 0)
-                <hr class="margin-top">
-                @foreach($socialDrivers as $driver => $name)
-                    <a id="social-register-{{$driver}}" class="button block muted-light svg text-left" href="{{ baseUrl("/register/service/" . $driver) }}">
-                        @icon($driver)
-                        {{ trans('auth.sign_up_with', ['socialDriver' => $name]) }}
-                    </a>
-                @endforeach
-            @endif
+                @if(count($socialDrivers) > 0)
+                    <hr class="margin-top">
+                    @foreach($socialDrivers as $driver => $name)
+                        <a id="social-register-{{$driver}}" class="button block muted-light svg text-left" href="{{ baseUrl("/register/service/" . $driver) }}">
+                            @icon($driver)
+                            {{ trans('auth.sign_up_with', ['socialDriver' => $name]) }}
+                        </a>
+                    @endforeach
+                @endif
+            </div>
         </div>
     </div>
 
diff --git a/resources/views/books/create.blade.php b/resources/views/books/create.blade.php
index 2c629e699..385e6b9d7 100644
--- a/resources/views/books/create.blade.php
+++ b/resources/views/books/create.blade.php
@@ -1,12 +1,27 @@
-@extends('base')
+@extends('simple-layout')
 
-@section('content')
+@section('toolbar')
+    <div class="col-sm-8 faded">
+        <div class="breadcrumbs">
+            <a href="{{ baseUrl('/books') }}" class="text-button"><i class="zmdi zmdi-book"></i>{{ trans('entities.books') }}</a>
+            <span class="sep">&raquo;</span>
+            <a href="{{ baseUrl('/books/create') }}" class="text-button"><i class="zmdi zmdi-plus"></i>{{ trans('entities.books_create') }}</a>
+        </div>
+    </div>
+@stop
 
-<div class="container small" ng-non-bindable>
-    <h1>{{ trans('entities.books_create') }}</h1>
-    <form action="{{ baseUrl("/books") }}" method="POST">
-        @include('books/form')
-    </form>
+@section('body')
+
+<div ng-non-bindable class="container small">
+    <p>&nbsp;</p>
+    <div class="card">
+        <h3><i class="zmdi zmdi-plus"></i> {{ trans('entities.books_create') }}</h3>
+        <div class="body">
+            <form action="{{ baseUrl("/books") }}" method="POST">
+                @include('books/form')
+            </form>
+        </div>
+    </div>
 </div>
 
 @stop
\ No newline at end of file
diff --git a/resources/views/books/delete.blade.php b/resources/views/books/delete.blade.php
index 0b1e67d4a..9bcb1cfc6 100644
--- a/resources/views/books/delete.blade.php
+++ b/resources/views/books/delete.blade.php
@@ -1,28 +1,30 @@
-@extends('base')
+@extends('simple-layout')
 
-@section('content')
-
-    <div class="faded-small toolbar">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-12 faded">
-                    @include('books._breadcrumbs', ['book' => $book])
-                </div>
-            </div>
-        </div>
+@section('toolbar')
+    <div class="col-sm-12 faded">
+        @include('books._breadcrumbs', ['book' => $book])
     </div>
+@stop
+
+@section('body')
 
     <div class="container small" ng-non-bindable>
-        <h1>{{ trans('entities.books_delete') }}</h1>
-        <p>{{ trans('entities.books_delete_explain', ['bookName' => $book->name]) }}</p>
-        <p class="text-neg">{{ trans('entities.books_delete_confirmation') }}</p>
+        <p>&nbsp;</p>
+        <div class="card">
+            <h3><i class="zmdi zmdi-delete"></i> {{ trans('entities.books_delete') }}</h3>
+            <div class="body">
+                <p>{{ trans('entities.books_delete_explain', ['bookName' => $book->name]) }}</p>
+                <p class="text-neg">{{ trans('entities.books_delete_confirmation') }}</p>
+
+                <form action="{{$book->getUrl()}}" method="POST">
+                    {!! csrf_field() !!}
+                    <input type="hidden" name="_method" value="DELETE">
+                    <a href="{{$book->getUrl()}}" class="button outline">{{ trans('common.cancel') }}</a>
+                    <button type="submit" class="button neg">{{ trans('common.confirm') }}</button>
+                </form>
+            </div>
+        </div>
 
-        <form action="{{$book->getUrl()}}" method="POST">
-            {!! csrf_field() !!}
-            <input type="hidden" name="_method" value="DELETE">
-            <a href="{{$book->getUrl()}}" class="button">{{ trans('common.cancel') }}</a>
-            <button type="submit" class="button neg">{{ trans('common.confirm') }}</button>
-        </form>
     </div>
 
 @stop
\ No newline at end of file
diff --git a/resources/views/books/edit.blade.php b/resources/views/books/edit.blade.php
index 2419b68da..9d9c54fec 100644
--- a/resources/views/books/edit.blade.php
+++ b/resources/views/books/edit.blade.php
@@ -1,23 +1,24 @@
-@extends('base')
+@extends('simple-layout')
 
-@section('content')
+@section('toolbar')
+    <div class="col-sm-12 faded">
+        @include('books._breadcrumbs', ['book' => $book])
+    </div>
+@stop
 
-    <div class="faded-small toolbar">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-12 faded">
-                    @include('books._breadcrumbs', ['book' => $book])
-                </div>
+@section('body')
+
+    <div class="container small" ng-non-bindable>
+        <p>&nbsp;</p>
+        <div class="card">
+            <h3><i class="zmdi zmdi-edit"></i> {{ trans('entities.books_edit') }}</h3>
+            <div class="body">
+                <form action="{{ $book->getUrl() }}" method="POST">
+                    <input type="hidden" name="_method" value="PUT">
+                    @include('books/form', ['model' => $book])
+                </form>
             </div>
         </div>
     </div>
 
-    <div class="container small" ng-non-bindable>
-        <h1>{{ trans('entities.books_edit') }}</h1>
-        <form action="{{ $book->getUrl() }}" method="POST">
-            <input type="hidden" name="_method" value="PUT">
-            @include('books/form', ['model' => $book])
-        </form>
-    </div>
-
 @stop
\ No newline at end of file
diff --git a/resources/views/books/form.blade.php b/resources/views/books/form.blade.php
index b1484d129..84a30e7e9 100644
--- a/resources/views/books/form.blade.php
+++ b/resources/views/books/form.blade.php
@@ -10,7 +10,7 @@
     @include('form/textarea', ['name' => 'description'])
 </div>
 
-<div class="form-group">
-    <a href="{{ isset($book) ? $book->getUrl() : baseUrl('/books') }}" class="button muted">{{ trans('common.cancel') }}</a>
+<div class="form-group text-right">
+    <a href="{{ isset($book) ? $book->getUrl() : baseUrl('/books') }}" class="button outline">{{ trans('common.cancel') }}</a>
     <button type="submit" class="button pos">{{ trans('entities.books_save') }}</button>
 </div>
\ No newline at end of file
diff --git a/resources/views/books/index.blade.php b/resources/views/books/index.blade.php
index 3c05f32a5..c22b4591f 100644
--- a/resources/views/books/index.blade.php
+++ b/resources/views/books/index.blade.php
@@ -27,6 +27,15 @@
             <div class="body text-muted">{{ trans('entities.books_popular_empty') }}</div>
         @endif
     </div>
+
+    <div id="new" class="card">
+        <h3><i class="zmdi zmdi-star-circle"></i> {{ trans('entities.books_new') }}</h3>
+        @if(count($popular) > 0)
+            @include('partials/entity-list', ['entities' => $new, 'style' => 'compact'])
+        @else
+            <div class="body text-muted">{{ trans('entities.books_new_empty') }}</div>
+        @endif
+    </div>
 @stop
 
 @section('body')
diff --git a/resources/views/books/restrictions.blade.php b/resources/views/books/restrictions.blade.php
index f558fdfce..f87625a67 100644
--- a/resources/views/books/restrictions.blade.php
+++ b/resources/views/books/restrictions.blade.php
@@ -1,21 +1,20 @@
-@extends('base')
+@extends('simple-layout')
 
-@section('content')
+@section('toolbar')
+    <div class="col-sm-12 faded">
+        @include('books._breadcrumbs', ['book' => $book])
+    </div>
+@stop
 
-    <div class="faded-small toolbar">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-12 faded">
-                    @include('books._breadcrumbs', ['book' => $book])
-                </div>
+@section('body')
+
+    <div class="container" ng-non-bindable>
+        <div class="card">
+            <h3>{{ trans('entities.books_permissions') }}</h3>
+            <div class="body">
+                @include('form/restriction-form', ['model' => $book])
             </div>
         </div>
     </div>
 
-
-    <div class="container" ng-non-bindable>
-        <h1>{{ trans('entities.books_permissions') }}</h1>
-        @include('form/restriction-form', ['model' => $book])
-    </div>
-
 @stop
diff --git a/resources/views/books/show.blade.php b/resources/views/books/show.blade.php
index 28cd08928..956dbaf16 100644
--- a/resources/views/books/show.blade.php
+++ b/resources/views/books/show.blade.php
@@ -71,9 +71,7 @@
     @if(count($activity) > 0)
         <div class="activity card">
             <h3><i class="zmdi zmdi-time"></i> {{ trans('entities.recent_activity') }}</h3>
-            <div class="body">
-                @include('partials/activity-list', ['activity' => $activity])
-            </div>
+            @include('partials/activity-list', ['activity' => $activity])
         </div>
     @endif
 
@@ -97,34 +95,33 @@
         <h1>{{$book->name}}</h1>
         <div class="book-content" v-show="!searching">
             <p class="text-muted" v-pre>{!! nl2br(e($book->description)) !!}</p>
-
+            @if(count($bookChildren) > 0)
             <div class="page-list" v-pre>
                 <hr>
-                @if(count($bookChildren) > 0)
-                    @foreach($bookChildren as $childElement)
-                        @if($childElement->isA('chapter'))
-                            @include('chapters/list-item', ['chapter' => $childElement])
-                        @else
-                            @include('pages/list-item', ['page' => $childElement])
-                        @endif
-                        <hr>
-                    @endforeach
-                @else
-                    <p class="text-muted">{{ trans('entities.books_empty_contents') }}</p>
-                    <p>
+                @foreach($bookChildren as $childElement)
+                    @if($childElement->isA('chapter'))
+                        @include('chapters/list-item', ['chapter' => $childElement])
+                    @else
+                        @include('pages/list-item', ['page' => $childElement])
+                    @endif
+                    <hr>
+                @endforeach
+            </div>
+            @else
+                <div class="well">
+                    <p class="text-muted italic">{{ trans('entities.books_empty_contents') }}</p>
                         @if(userCan('page-create', $book))
-                        <a href="{{ $book->getUrl('/page/create') }}" class="text-page"><i class="zmdi zmdi-file-text"></i>{{ trans('entities.books_empty_create_page') }}</a>
+                            <a href="{{ $book->getUrl('/page/create') }}" class="button outline page"><i class="zmdi zmdi-file-text"></i>{{ trans('entities.books_empty_create_page') }}</a>
                         @endif
                         @if(userCan('page-create', $book) && userCan('chapter-create', $book))
-                        &nbsp;&nbsp;<em class="text-muted">-{{ trans('entities.books_empty_or') }}-</em>&nbsp;&nbsp;&nbsp;
+                            &nbsp;&nbsp;<em class="text-muted">-{{ trans('entities.books_empty_or') }}-</em>&nbsp;&nbsp;&nbsp;
                         @endif
                         @if(userCan('chapter-create', $book))
-                        <a href="{{ $book->getUrl('/chapter/create') }}" class="text-chapter"><i class="zmdi zmdi-collection-bookmark"></i>{{ trans('entities.books_empty_add_chapter') }}</a>
+                            <a href="{{ $book->getUrl('/chapter/create') }}" class="button outline chapter"><i class="zmdi zmdi-collection-bookmark"></i>{{ trans('entities.books_empty_add_chapter') }}</a>
                         @endif
-                    </p>
-                    <hr>
-                @endif
-            </div>
+                </div>
+            @endif
+
         </div>
         <div class="search-results" v-cloak v-show="searching">
             <h3 class="text-muted">{{ trans('entities.search_results') }} <a v-if="searching" v-on:click="clearSearch()" class="text-small"><i class="zmdi zmdi-close"></i>{{ trans('entities.search_clear') }}</a></h3>
diff --git a/resources/views/books/sort.blade.php b/resources/views/books/sort.blade.php
index d96f502f1..ebabb90ce 100644
--- a/resources/views/books/sort.blade.php
+++ b/resources/views/books/sort.blade.php
@@ -1,56 +1,59 @@
-@extends('base')
+@extends('simple-layout')
 
 @section('head')
     <script src="{{ baseUrl("/libs/jquery-sortable/jquery-sortable.min.js") }}"></script>
 @stop
 
-@section('content')
-
-    <div class="faded-small toolbar">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-12 faded">
-                    @include('books._breadcrumbs', ['book' => $book])
-                </div>
-            </div>
-        </div>
+@section('toolbar')
+    <div class="col-sm-12 faded">
+        @include('books._breadcrumbs', ['book' => $book])
     </div>
+@stop
+
+@section('body')
 
     <div class="container" ng-non-bindable>
-        <h1>{{ trans('entities.books_sort') }}</h1>
+
         <div class="row">
-            <div class="col-md-8" id="sort-boxes">
-
-                @include('books/sort-box', ['book' => $book, 'bookChildren' => $bookChildren])
-
-            </div>
-
-            @if(count($books) > 1)
-                <div class="col-md-4">
-                    <h3>{{ trans('entities.books_sort_show_other') }}</h3>
-                    <div id="additional-books">
-                    @foreach($books as $otherBook)
-                        @if($otherBook->id !== $book->id)
-                        <div>
-                            <a href="{{ $otherBook->getUrl('/sort-item') }}" class="text-book"><i class="zmdi zmdi-book"></i>{{ $otherBook->name }}</a>
+            <div class="col-md-8">
+                <div class="card">
+                    <h3><i class="zmdi zmdi-sort"></i> {{ trans('entities.books_sort') }}</h3>
+                    <div class="body">
+                        <div id="sort-boxes">
+                            @include('books/sort-box', ['book' => $book, 'bookChildren' => $bookChildren])
                         </div>
-                        @endif
-                    @endforeach
+
+                        <form action="{{ $book->getUrl('/sort') }}" method="POST">
+                            {!! csrf_field() !!}
+                            <input type="hidden" name="_method" value="PUT">
+                            <input type="hidden" id="sort-tree-input" name="sort-tree">
+                            <div class="list">
+                                <a href="{{ $book->getUrl() }}" class="button outline">{{ trans('common.cancel') }}</a>
+                                <button class="button pos" type="submit">{{ trans('entities.books_sort_save') }}</button>
+                            </div>
+                        </form>
                     </div>
                 </div>
+            </div>
+            @if(count($books) > 1)
+            <div class="col-md-4">
+                <div class="card">
+                    <h3><i class="zmdi zmdi-book"></i> {{ trans('entities.books_sort_show_other') }}</h3>
+                    <div class="body" id="additional-books">
+                        @foreach($books as $otherBook)
+                            @if($otherBook->id !== $book->id)
+                                <div>
+                                    <a href="{{ $otherBook->getUrl('/sort-item') }}" class="text-book"><i class="zmdi zmdi-book"></i>{{ $otherBook->name }}</a>
+                                </div>
+                            @endif
+                        @endforeach
+                    </div>
+                </div>
+            </div>
             @endif
-
         </div>
 
-        <form action="{{ $book->getUrl('/sort') }}" method="POST">
-            {!! csrf_field() !!}
-            <input type="hidden" name="_method" value="PUT">
-            <input type="hidden" id="sort-tree-input" name="sort-tree">
-            <div class="list">
-                <a href="{{ $book->getUrl() }}" class="button muted">{{ trans('common.cancel') }}</a>
-                <button class="button pos" type="submit">{{ trans('entities.books_sort_save') }}</button>
-            </div>
-        </form>
+
 
     </div>
 
diff --git a/resources/views/form/restriction-form.blade.php b/resources/views/form/restriction-form.blade.php
index 7a1605197..c32fe005a 100644
--- a/resources/views/form/restriction-form.blade.php
+++ b/resources/views/form/restriction-form.blade.php
@@ -27,6 +27,8 @@
         @endforeach
     </table>
 
-    <a href="{{ $model->getUrl() }}" class="button muted">{{ trans('common.cancel') }}</a>
-    <button type="submit" class="button pos">{{ trans('entities.permissions_save') }}</button>
+    <div class="text-right">
+        <a href="{{ $model->getUrl() }}" class="button outline">{{ trans('common.cancel') }}</a>
+        <button type="submit" class="button pos">{{ trans('entities.permissions_save') }}</button>
+    </div>
 </form>
\ No newline at end of file
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index 6cd450a82..28be91414 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -16,13 +16,13 @@
             <div class="col-sm-4">
                 @if(count($draftPages) > 0)
                     <div id="recent-drafts" class="card">
-                        <h3>{{ trans('entities.my_recent_drafts') }}</h3>
+                        <h3><i class="zmdi zmdi-edit"></i> {{ trans('entities.my_recent_drafts') }}</h3>
                         @include('partials/entity-list', ['entities' => $draftPages, 'style' => 'compact'])
                     </div>
                 @endif
 
                 <div class="card">
-                    <h3>{{ trans('entities.' . ($signedIn ? 'my_recently_viewed' : 'books_recent')) }}</h3>
+                    <h3><i class="zmdi zmdi-{{ $signedIn ? 'eye' : 'star-circle' }}"></i> {{ trans('entities.' . ($signedIn ? 'my_recently_viewed' : 'books_recent')) }}</h3>
                     @include('partials/entity-list', [
                         'entities' => $recents,
                         'style' => 'compact',
@@ -33,7 +33,7 @@
 
             <div class="col-sm-4">
                 <div class="card">
-                    <h3><a class="no-color" href="{{ baseUrl("/pages/recently-updated") }}">{{ trans('entities.recently_updated_pages') }}</a></h3>
+                    <h3><i class="zmdi zmdi-file"></i> <a class="no-color" href="{{ baseUrl("/pages/recently-updated") }}">{{ trans('entities.recently_updated_pages') }}</a></h3>
                     <div id="recently-updated-pages">
                         @include('partials/entity-list', [
                         'entities' => $recentlyUpdatedPages,
@@ -46,10 +46,8 @@
 
             <div class="col-sm-4" id="recent-activity">
                 <div class="card">
-                    <h3>{{ trans('entities.recent_activity') }}</h3>
-                    <div class="body">
-                        @include('partials/activity-list', ['activity' => $activity])
-                    </div>
+                    <h3><i class="zmdi zmdi-time"></i> {{ trans('entities.recent_activity') }}</h3>
+                    @include('partials/activity-list', ['activity' => $activity])
                 </div>
             </div>
 
diff --git a/resources/views/public.blade.php b/resources/views/public.blade.php
index ea2069b86..87d4f1c88 100644
--- a/resources/views/public.blade.php
+++ b/resources/views/public.blade.php
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html class="shaded">
 <head>
     <title>{{ setting('app-name') }}</title>
 
@@ -23,12 +23,12 @@
         {!! setting('app-custom-head') !!}
     @endif
 </head>
-<body class="@yield('body-class')" ng-app="bookStack">
+<body class="@yield('body-class')">
 
 @include('partials.notifications')
 
 <header id="header">
-    <div class="container">
+    <div class="container fluid">
         <div class="row">
             <div class="col-sm-6">
 

From 5187d3fa7870548022a017fc65309c71e9a12b68 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sat, 26 Aug 2017 14:36:48 +0100
Subject: [PATCH 4/8] Updated chapter views with new design

---
 resources/assets/sass/_buttons.scss           | 10 +++++
 resources/lang/en/entities.php                |  3 +-
 resources/views/books/restrictions.blade.php  |  3 +-
 resources/views/chapters/create.blade.php     | 26 ++++++++---
 resources/views/chapters/delete.blade.php     | 44 ++++++++++---------
 resources/views/chapters/edit.blade.php       | 25 ++++++++---
 resources/views/chapters/form.blade.php       |  4 +-
 resources/views/chapters/move.blade.php       | 43 ++++++++++--------
 .../views/chapters/restrictions.blade.php     | 27 ++++++------
 resources/views/chapters/show.blade.php       | 28 ++++++------
 10 files changed, 128 insertions(+), 85 deletions(-)

diff --git a/resources/assets/sass/_buttons.scss b/resources/assets/sass/_buttons.scss
index c07e6a37a..f9c6d9b9a 100644
--- a/resources/assets/sass/_buttons.scss
+++ b/resources/assets/sass/_buttons.scss
@@ -3,6 +3,8 @@
   background-color: $backgroundColor;
   color: $textColor;
   text-transform: uppercase;
+  border: 1px solid $backgroundColor;
+  vertical-align: top;
   &:hover {
     background-color: lighten($backgroundColor, 8%);
     //box-shadow: $bs-med;
@@ -83,6 +85,14 @@ $button-border-radius: 2px;
       color: #FFF;
     }
   }
+  &.book {
+    border-color: $color-book;
+    color: $color-book;
+    &:hover, &:focus, &:active {
+      background-color: $color-book;
+      color: #FFF;
+    }
+  }
 }
 
 .text-button {
diff --git a/resources/lang/en/entities.php b/resources/lang/en/entities.php
index 5b76559ea..76555fee4 100644
--- a/resources/lang/en/entities.php
+++ b/resources/lang/en/entities.php
@@ -110,8 +110,7 @@ return [
     'chapters_create' => 'Create New Chapter',
     'chapters_delete' => 'Delete Chapter',
     'chapters_delete_named' => 'Delete Chapter :chapterName',
-    'chapters_delete_explain' => 'This will delete the chapter with the name \':chapterName\', All pages will be removed
-        and added directly to the parent book.',
+    'chapters_delete_explain' => 'This will delete the chapter with the name \':chapterName\'. All pages will be removed and added directly to the parent book.',
     'chapters_delete_confirm' => 'Are you sure you want to delete this chapter?',
     'chapters_edit' => 'Edit Chapter',
     'chapters_edit_named' => 'Edit Chapter :chapterName',
diff --git a/resources/views/books/restrictions.blade.php b/resources/views/books/restrictions.blade.php
index f87625a67..5c7604c86 100644
--- a/resources/views/books/restrictions.blade.php
+++ b/resources/views/books/restrictions.blade.php
@@ -9,8 +9,9 @@
 @section('body')
 
     <div class="container" ng-non-bindable>
+        <p>&nbsp;</p>
         <div class="card">
-            <h3>{{ trans('entities.books_permissions') }}</h3>
+            <h3><i class="zmdi zmdi-lock-outline"></i> {{ trans('entities.books_permissions') }}</h3>
             <div class="body">
                 @include('form/restriction-form', ['model' => $book])
             </div>
diff --git a/resources/views/chapters/create.blade.php b/resources/views/chapters/create.blade.php
index afdbfa99d..8b2e2f667 100644
--- a/resources/views/chapters/create.blade.php
+++ b/resources/views/chapters/create.blade.php
@@ -1,12 +1,26 @@
-@extends('base')
+@extends('simple-layout')
 
-@section('content')
+@section('toolbar')
+    <div class="col-sm-12 faded">
+        <div class="breadcrumbs">
+            <a href="{{$book->getUrl()}}" class="text-book text-button"><i class="zmdi zmdi-book"></i>{{ $book->getShortName() }}</a>
+            <span class="sep">&raquo;</span>
+            <a href="{{ baseUrl('/books/chapter/create') }}" class="text-button"><i class="zmdi zmdi-plus"></i>{{ trans('entities.chapters_create') }}</a>
+        </div>
+    </div>
+@stop
+
+@section('body')
 
     <div class="container small" ng-non-bindable>
-        <h1>{{ trans('entities.chapters_create') }}</h1>
-        <form action="{{ $book->getUrl('/chapter/create') }}" method="POST">
-            @include('chapters/form')
-        </form>
+        <div class="card">
+            <h3><i class="zmdi zmdi-plus"></i> {{ trans('entities.chapters_create') }}</h3>
+            <div class="body">
+                <form action="{{ $book->getUrl('/chapter/create') }}" method="POST">
+                    @include('chapters/form')
+                </form>
+            </div>
+        </div>
     </div>
 
 @stop
\ No newline at end of file
diff --git a/resources/views/chapters/delete.blade.php b/resources/views/chapters/delete.blade.php
index bacb8dca3..3ea64044a 100644
--- a/resources/views/chapters/delete.blade.php
+++ b/resources/views/chapters/delete.blade.php
@@ -1,28 +1,30 @@
-@extends('base')
+@extends('simple-layout')
 
-@section('content')
+@section('toolbar')
+    <div class="col-sm-12 faded">
+        @include('chapters._breadcrumbs', ['chapter' => $chapter])
+    </div>
+@stop
 
-    <div class="faded-small toolbar">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-12 faded">
-                    @include('chapters._breadcrumbs', ['chapter' => $chapter])
-                </div>
+@section('body')
+
+    <div class="container small" ng-non-bindable>
+        <p>&nbsp;</p>
+        <div class="card">
+            <h3><i class="zmdi zmdi-delete"></i> {{ trans('entities.chapters_delete') }}</h3>
+
+            <div class="body">
+                <p>{{ trans('entities.chapters_delete_explain', ['chapterName' => $chapter->name]) }}</p>
+                <p class="text-neg">{{ trans('entities.chapters_delete_confirm') }}</p>
+
+                <form action="{{ $chapter->getUrl() }}" method="POST">
+                    {!! csrf_field() !!}
+                    <input type="hidden" name="_method" value="DELETE">
+                    <a href="{{ $chapter->getUrl() }}" class="button outline">{{ trans('common.cancel') }}</a>
+                    <button type="submit" class="button neg">{{ trans('common.confirm') }}</button>
+                </form>
             </div>
         </div>
     </div>
 
-    <div class="container small" ng-non-bindable>
-        <h1>{{ trans('entities.chapters_delete') }}</h1>
-        <p>{{ trans('entities.chapters_delete_explain', ['chapterName' => $chapter->name]) }}</p>
-        <p class="text-neg">{{ trans('entities.chapters_delete_confirm') }}</p>
-
-        <form action="{{ $chapter->getUrl() }}" method="POST">
-            {!! csrf_field() !!}
-            <input type="hidden" name="_method" value="DELETE">
-            <a href="{{ $chapter->getUrl() }}" class="button primary">{{ trans('common.cancel') }}</a>
-            <button type="submit" class="button neg">{{ trans('common.confirm') }}</button>
-        </form>
-    </div>
-
 @stop
\ No newline at end of file
diff --git a/resources/views/chapters/edit.blade.php b/resources/views/chapters/edit.blade.php
index 272543e67..b97be6831 100644
--- a/resources/views/chapters/edit.blade.php
+++ b/resources/views/chapters/edit.blade.php
@@ -1,13 +1,24 @@
-@extends('base')
+@extends('simple-layout')
 
-@section('content')
+@section('toolbar')
+    <div class="col-sm-12 faded">
+        @include('chapters._breadcrumbs', ['chapter' => $chapter])
+    </div>
+@stop
+
+@section('body')
 
     <div class="container small" ng-non-bindable>
-        <h1>{{ trans('entities.chapters_edit') }}</h1>
-        <form action="{{  $chapter->getUrl() }}" method="POST">
-            <input type="hidden" name="_method" value="PUT">
-            @include('chapters/form', ['model' => $chapter])
-        </form>
+        <p>&nbsp;</p>
+        <div class="card">
+            <h3><i class="zmdi zmdi-edit"></i> {{ trans('entities.chapters_edit') }}</h3>
+            <div class="body">
+                <form action="{{  $chapter->getUrl() }}" method="POST">
+                    <input type="hidden" name="_method" value="PUT">
+                    @include('chapters/form', ['model' => $chapter])
+                </form>
+            </div>
+        </div>
     </div>
 
 @stop
\ No newline at end of file
diff --git a/resources/views/chapters/form.blade.php b/resources/views/chapters/form.blade.php
index 54722a58a..9e3b8e472 100644
--- a/resources/views/chapters/form.blade.php
+++ b/resources/views/chapters/form.blade.php
@@ -11,7 +11,7 @@
     @include('form/textarea', ['name' => 'description'])
 </div>
 
-<div class="form-group">
-    <a href="{{ back()->getTargetUrl() }}" class="button muted">{{ trans('common.cancel') }}</a>
+<div class="form-group text-right">
+    <a href="{{ back()->getTargetUrl() }}" class="button outline">{{ trans('common.cancel') }}</a>
     <button type="submit" class="button pos">{{ trans('entities.chapters_save') }}</button>
 </div>
diff --git a/resources/views/chapters/move.blade.php b/resources/views/chapters/move.blade.php
index 9e6ddb521..a656c4fae 100644
--- a/resources/views/chapters/move.blade.php
+++ b/resources/views/chapters/move.blade.php
@@ -1,29 +1,34 @@
-@extends('base')
+@extends('simple-layout')
 
-@section('content')
-
-    <div class="faded-small toolbar">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-12 faded">
-                    @include('chapters._breadcrumbs', ['chapter' => $chapter])
-                </div>
-            </div>
-        </div>
+@section('toolbar')
+    <div class="col-sm-12 faded">
+        @include('chapters._breadcrumbs', ['chapter' => $chapter])
     </div>
+@stop
+
+@section('body')
 
     <div class="container">
-        <h1>{{ trans('entities.chapters_move') }}</h1>
 
-        <form action="{{ $chapter->getUrl('/move') }}" method="POST">
-            {!! csrf_field() !!}
-            <input type="hidden" name="_method" value="PUT">
+        <div class="card">
+            <h3><i class="zmdi zmdi-folder"></i> {{ trans('entities.chapters_move') }}</h3>
+            <div class="body">
+                <form action="{{ $chapter->getUrl('/move') }}" method="POST">
+                    {!! csrf_field() !!}
+                    <input type="hidden" name="_method" value="PUT">
+
+                    @include('components.entity-selector', ['name' => 'entity_selection', 'selectorSize' => 'large', 'entityTypes' => 'book'])
+
+                    <div class="form-group text-right">
+                        <a href="{{ $chapter->getUrl() }}" class="button outline">{{ trans('common.cancel') }}</a>
+                        <button type="submit" class="button pos">{{ trans('entities.chapters_move') }}</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
 
-            @include('components.entity-selector', ['name' => 'entity_selection', 'selectorSize' => 'large', 'entityTypes' => 'book'])
 
-            <a href="{{ $chapter->getUrl() }}" class="button muted">{{ trans('common.cancel') }}</a>
-            <button type="submit" class="button pos">{{ trans('entities.chapters_move') }}</button>
-        </form>
     </div>
 
 @stop
diff --git a/resources/views/chapters/restrictions.blade.php b/resources/views/chapters/restrictions.blade.php
index 7b908ee15..c2981c68a 100644
--- a/resources/views/chapters/restrictions.blade.php
+++ b/resources/views/chapters/restrictions.blade.php
@@ -1,20 +1,21 @@
-@extends('base')
+@extends('simple-layout')
 
-@section('content')
+@section('toolbar')
+    <div class="col-sm-12 faded">
+        @include('chapters._breadcrumbs', ['chapter' => $chapter])
+    </div>
+@stop
 
-    <div class="faded-small toolbar">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-12 faded">
-                    @include('chapters._breadcrumbs', ['chapter' => $chapter])
-                </div>
+@section('body')
+
+    <div class="container" ng-non-bindable>
+        <p>&nbsp;</p>
+        <div class="card">
+            <h3><i class="zmdi zmdi-lock-outline"></i> {{ trans('entities.chapters_permissions') }}</h3>
+            <div class="body">
+                @include('form/restriction-form', ['model' => $chapter])
             </div>
         </div>
     </div>
 
-    <div class="container" ng-non-bindable>
-        <h1>{{ trans('entities.chapters_permissions') }}</h1>
-        @include('form/restriction-form', ['model' => $chapter])
-    </div>
-
 @stop
diff --git a/resources/views/chapters/show.blade.php b/resources/views/chapters/show.blade.php
index 701084280..ac2dbfffd 100644
--- a/resources/views/chapters/show.blade.php
+++ b/resources/views/chapters/show.blade.php
@@ -110,20 +110,20 @@
                     @endforeach
                 </div>
             @else
-                <hr>
-                <p class="text-muted">{{ trans('entities.chapters_empty') }}</p>
-                <p>
-                    @if(userCan('page-create', $chapter))
-                        <a href="{{ $chapter->getUrl('/create-page') }}" class="text-page"><i class="zmdi zmdi-file-text"></i>{{ trans('entities.books_empty_create_page') }}</a>
-                    @endif
-                    @if(userCan('page-create', $chapter) && userCan('book-update', $book))
-                        &nbsp;&nbsp;<em class="text-muted">-{{ trans('entities.books_empty_or') }}-</em>&nbsp;&nbsp;&nbsp;
-                    @endif
-                    @if(userCan('book-update', $book))
-                        <a href="{{ $book->getUrl('/sort') }}" class="text-book"><i class="zmdi zmdi-book"></i>{{ trans('entities.books_empty_sort_current_book') }}</a>
-                    @endif
-                </p>
-                <hr>
+                <div class="well">
+                    <p class="text-muted italic">{{ trans('entities.chapters_empty') }}</p>
+                    <p>
+                        @if(userCan('page-create', $chapter))
+                            <a href="{{ $chapter->getUrl('/create-page') }}" class="button outline page"><i class="zmdi zmdi-file-text"></i>{{ trans('entities.books_empty_create_page') }}</a>
+                        @endif
+                        @if(userCan('page-create', $chapter) && userCan('book-update', $book))
+                            &nbsp;&nbsp;<em class="text-muted">-{{ trans('entities.books_empty_or') }}-</em>&nbsp;&nbsp; &nbsp;
+                        @endif
+                        @if(userCan('book-update', $book))
+                            <a href="{{ $book->getUrl('/sort') }}" class="button outline book"><i class="zmdi zmdi-book"></i>{{ trans('entities.books_empty_sort_current_book') }}</a>
+                        @endif
+                    </p>
+                </div>
             @endif
         </div>
 

From 2f8b8c580d9cc2468ba0a299a20f1259aad4f4bb Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sat, 26 Aug 2017 14:41:46 +0100
Subject: [PATCH 5/8] Resolved current failing tests

---
 resources/views/pages/show.blade.php | 2 +-
 tests/Entity/EntityTest.php          | 7 -------
 2 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/resources/views/pages/show.blade.php b/resources/views/pages/show.blade.php
index bd2580a66..121f6f38e 100644
--- a/resources/views/pages/show.blade.php
+++ b/resources/views/pages/show.blade.php
@@ -82,7 +82,7 @@
     <div class="card">
         <h3><i class="zmdi zmdi-info-outline"></i> {{ trans('common.details') }}</h3>
         <div class="body">
-            @include('partials.entity-meta', ['entity' => $book])
+            @include('partials.entity-meta', ['entity' => $page])
         </div>
     </div>
 @stop
diff --git a/tests/Entity/EntityTest.php b/tests/Entity/EntityTest.php
index ef5ea3aee..07f1926c5 100644
--- a/tests/Entity/EntityTest.php
+++ b/tests/Entity/EntityTest.php
@@ -257,11 +257,4 @@ class EntityTest extends BrowserKitTest
             ->seeInElement('#recently-updated-pages', $page->name);
     }
 
-    public function test_recently_created_pages_on_home()
-    {
-        $entityChain = $this->createEntityChainBelongingToUser($this->getEditor());
-        $this->asAdmin()->visit('/')
-            ->seeInElement('#recently-created-pages', $entityChain['page']->name);
-    }
-
 }

From b60d2190ac95f33cc56c8ce9930e761a0b283c1d Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sat, 26 Aug 2017 14:53:23 +0100
Subject: [PATCH 6/8] Updated error views for redesign

---
 resources/views/errors/404.blade.php | 32 ++++++++++++++++++----------
 resources/views/errors/500.blade.php |  9 ++++++--
 resources/views/errors/503.blade.php | 10 ++++++---
 3 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/resources/views/errors/404.blade.php b/resources/views/errors/404.blade.php
index a0e34e83d..f6ef850af 100644
--- a/resources/views/errors/404.blade.php
+++ b/resources/views/errors/404.blade.php
@@ -1,30 +1,40 @@
-@extends('base')
+@extends('simple-layout')
 
 @section('content')
 
 
 <div class="container">
 
+    <p>&nbsp;</p>
 
-    <h1>{{ $message or trans('errors.404_page_not_found') }}</h1>
-    <p>{{ trans('errors.sorry_page_not_found') }}</p>
-    <p><a href="{{ baseUrl('/') }}" class="button">{{ trans('errors.return_home') }}</a></p>
+    <div class="card">
+        <h3><i class="zmdi zmdi-alert-octagon"></i> {{ $message or trans('errors.404_page_not_found') }}</h3>
+        <div class="body">
+            <h5>{{ trans('errors.sorry_page_not_found') }}</h5>
+            <p><a href="{{ baseUrl('/') }}" class="button outline">{{ trans('errors.return_home') }}</a></p>
+        </div>
+    </div>
 
     @if (setting('app-public') || !user()->isDefault())
-        <hr>
 
         <div class="row">
             <div class="col-md-4">
-                <h3 class="text-muted">{{ trans('entities.pages_popular') }}</h3>
-                @include('partials.entity-list', ['entities' => Views::getPopular(10, 0, [\BookStack\Page::class]), 'style' => 'compact'])
+                <div class="card">
+                    <h3 class="text-muted"><i class="zmdi zmdi-file-text"></i> {{ trans('entities.pages_popular') }}</h3>
+                    @include('partials.entity-list', ['entities' => Views::getPopular(10, 0, [\BookStack\Page::class]), 'style' => 'compact'])
+                </div>
             </div>
             <div class="col-md-4">
-                <h3 class="text-muted">{{ trans('entities.books_popular') }}</h3>
-                @include('partials.entity-list', ['entities' => Views::getPopular(10, 0, [\BookStack\Book::class]), 'style' => 'compact'])
+                <div class="card">
+                    <h3 class="text-muted"><i class="zmdi zmdi-book"></i> {{ trans('entities.books_popular') }}</h3>
+                    @include('partials.entity-list', ['entities' => Views::getPopular(10, 0, [\BookStack\Book::class]), 'style' => 'compact'])
+                </div>
             </div>
             <div class="col-md-4">
-                <h3 class="text-muted">{{ trans('entities.chapters_popular') }}</h3>
-                @include('partials.entity-list', ['entities' => Views::getPopular(10, 0, [\BookStack\Chapter::class]), 'style' => 'compact'])
+                <div class="card">
+                    <h3 class="text-muted"><i class="zmdi zmdi-collection-bookmark"></i> {{ trans('entities.chapters_popular') }}</h3>
+                    @include('partials.entity-list', ['entities' => Views::getPopular(10, 0, [\BookStack\Chapter::class]), 'style' => 'compact'])
+                </div>
             </div>
         </div>
     @endif
diff --git a/resources/views/errors/500.blade.php b/resources/views/errors/500.blade.php
index 6dd96cdcc..71fb78a35 100644
--- a/resources/views/errors/500.blade.php
+++ b/resources/views/errors/500.blade.php
@@ -3,8 +3,13 @@
 @section('content')
 
     <div class="container">
-        <h1 class="text-muted">{{ trans('errors.error_occurred') }}</h1>
-        <p>{{ $message }}</p>
+        <div class="card">
+            <h3 class="text-muted">{{ trans('errors.error_occurred') }}</h3>
+            <div class="body">
+                <h5>{{ $message }}</h5>
+                <p><a href="{{ baseUrl('/') }}" class="button outline">{{ trans('errors.return_home') }}</a></p>
+            </div>
+        </div>
     </div>
 
 @stop
\ No newline at end of file
diff --git a/resources/views/errors/503.blade.php b/resources/views/errors/503.blade.php
index 1ea39a7b8..98670df8a 100644
--- a/resources/views/errors/503.blade.php
+++ b/resources/views/errors/503.blade.php
@@ -2,9 +2,13 @@
 
 @section('content')
 
-    <div class="container">
-        <h1 class="text-muted">{{ trans('errors.app_down', ['appName' => setting('app-name')]) }}</h1>
-        <p>{{ trans('errors.back_soon') }}</p>
+    <div class="container small">
+        <div class="card">
+            <div class="body">
+                <h4 class="text-muted"><i class="zmdi zmdi-alert-octagon"></i> {{ trans('errors.app_down', ['appName' => setting('app-name')]) }}</h4>
+                <p>{{ trans('errors.back_soon') }}</p>
+            </div>
+        </div>
     </div>
 
 @stop
\ No newline at end of file

From 36f524a354ee95753c449e608e245279ae6a5041 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sat, 26 Aug 2017 15:41:33 +0100
Subject: [PATCH 7/8] Updated page view styles to align with 2017 update

---
 app/Http/Controllers/PageController.php       |   2 +
 app/PageRevision.php                          |  12 ++
 resources/assets/js/pages/page-show.js        |  16 +--
 resources/assets/sass/_blocks.scss            |  17 +++
 resources/assets/sass/_lists.scss             |  17 ---
 resources/lang/en/entities.php                |   1 +
 resources/views/chapters/show.blade.php       |   2 +-
 resources/views/pages/delete.blade.php        |  43 +++----
 .../views/pages/detailed-listing.blade.php    |  21 ++--
 resources/views/pages/edit.blade.php          |   2 -
 resources/views/pages/form.blade.php          |   2 +-
 resources/views/pages/move.blade.php          |  46 ++++----
 resources/views/pages/restrictions.blade.php  |  27 +++--
 resources/views/pages/revision.blade.php      |  14 ++-
 resources/views/pages/revisions.blade.php     | 110 +++++++++---------
 resources/views/pages/show.blade.php          |  50 +++++++-
 .../views/pages/sidebar-tree-list.blade.php   |  87 --------------
 resources/views/partials/book-tree.blade.php  |  36 ++++++
 .../views/partials/entity-meta.blade.php      |   7 +-
 resources/views/sidebar-layout.blade.php      |   2 +-
 20 files changed, 268 insertions(+), 246 deletions(-)
 create mode 100644 resources/views/partials/book-tree.blade.php

diff --git a/app/Http/Controllers/PageController.php b/app/Http/Controllers/PageController.php
index 9a8525c23..573907e56 100644
--- a/app/Http/Controllers/PageController.php
+++ b/app/Http/Controllers/PageController.php
@@ -380,6 +380,7 @@ class PageController extends Controller
         return view('pages/revision', [
             'page' => $page,
             'book' => $page->book,
+            'revision' => $revision
         ]);
     }
 
@@ -409,6 +410,7 @@ class PageController extends Controller
             'page' => $page,
             'book' => $page->book,
             'diff' => $diff,
+            'revision' => $revision
         ]);
     }
 
diff --git a/app/PageRevision.php b/app/PageRevision.php
index ff469f0ed..0a9764729 100644
--- a/app/PageRevision.php
+++ b/app/PageRevision.php
@@ -47,4 +47,16 @@ class PageRevision extends Model
         return null;
     }
 
+    /**
+     * Allows checking of the exact class, Used to check entity type.
+     * Included here to align with entities in similar use cases.
+     * (Yup, Bit of an awkward hack)
+     * @param $type
+     * @return bool
+     */
+    public static function isA($type)
+    {
+        return $type === 'revision';
+    }
+
 }
diff --git a/resources/assets/js/pages/page-show.js b/resources/assets/js/pages/page-show.js
index 7754840af..832ec4b36 100644
--- a/resources/assets/js/pages/page-show.js
+++ b/resources/assets/js/pages/page-show.js
@@ -106,25 +106,25 @@ let setupPageShow = window.setupPageShow = function (pageId) {
         goToText(event.target.getAttribute('href').substr(1));
     });
 
-    // Make the book-tree sidebar stick in view on scroll
+    // Make the sidebar stick in view on scroll
     let $window = $(window);
-    let $bookTree = $(".book-tree");
-    let $bookTreeParent = $bookTree.parent();
+    let $sidebar = $("#sidebar .scroll-body");
+    let $bookTreeParent = $sidebar.parent();
     // Check the page is scrollable and the content is taller than the tree
-    let pageScrollable = ($(document).height() > $window.height()) && ($bookTree.height() < $('.page-content').height());
+    let pageScrollable = ($(document).height() > $window.height()) && ($sidebar.height() < $('.page-content').height());
     // Get current tree's width and header height
     let headerHeight = $("#header").height() + $(".toolbar").height();
     let isFixed = $window.scrollTop() > headerHeight;
     // Function to fix the tree as a sidebar
     function stickTree() {
-        $bookTree.width($bookTreeParent.width() + 15);
-        $bookTree.addClass("fixed");
+        $sidebar.width($bookTreeParent.width() + 15);
+        $sidebar.addClass("fixed");
         isFixed = true;
     }
     // Function to un-fix the tree back into position
     function unstickTree() {
-        $bookTree.css('width', 'auto');
-        $bookTree.removeClass("fixed");
+        $sidebar.css('width', 'auto');
+        $sidebar.removeClass("fixed");
         isFixed = false;
     }
     // Checks if the tree stickiness state should change
diff --git a/resources/assets/sass/_blocks.scss b/resources/assets/sass/_blocks.scss
index c5b850507..c804b9aa8 100644
--- a/resources/assets/sass/_blocks.scss
+++ b/resources/assets/sass/_blocks.scss
@@ -204,4 +204,21 @@
   background-color: #F8F8F8;
   padding: $-m;
   border: 1px solid #DDD;
+}
+
+#sidebar .scroll-body {
+  &.fixed {
+    z-index: 5;
+    position: fixed;
+    top: 0;
+    padding-right: $-m;
+    width: 30%;
+    left: 0;
+    height: 100%;
+    overflow-y: scroll;
+    -ms-overflow-style: none;
+    //background-color: $primary-faded;
+    border-left: 1px solid #DDD;
+    &::-webkit-scrollbar { width: 0 !important }
+  }
 }
\ No newline at end of file
diff --git a/resources/assets/sass/_lists.scss b/resources/assets/sass/_lists.scss
index 5d607ba16..2dd4732f2 100644
--- a/resources/assets/sass/_lists.scss
+++ b/resources/assets/sass/_lists.scss
@@ -86,25 +86,8 @@
 
 // Sidebar list
 .book-tree {
-  position: relative;
-  right: 0;
-  top: 0;
   transition: ease-in-out 240ms;
   transition-property: right, border;
-  &.fixed {
-    z-index: 5;
-    position: fixed;
-    top: 0;
-    padding-right: $-l + 5px;
-    width: 30%;
-    left: 0;
-    height: 100%;
-    overflow-y: scroll;
-    -ms-overflow-style: none;
-    //background-color: $primary-faded;
-    border-left: 1px solid #DDD;
-    &::-webkit-scrollbar { width: 0 !important }
-  }
 }
 .book-tree h4 {
   padding: $-m $-s 0 $-s;
diff --git a/resources/lang/en/entities.php b/resources/lang/en/entities.php
index 76555fee4..b8be379cd 100644
--- a/resources/lang/en/entities.php
+++ b/resources/lang/en/entities.php
@@ -165,6 +165,7 @@ return [
     'pages_move_success' => 'Page moved to ":parentName"',
     'pages_permissions' => 'Page Permissions',
     'pages_permissions_success' => 'Page permissions updated',
+    'pages_revision' => 'Revision',
     'pages_revisions' => 'Page Revisions',
     'pages_revisions_named' => 'Page Revisions for :pageName',
     'pages_revision_named' => 'Page Revision for :pageName',
diff --git a/resources/views/chapters/show.blade.php b/resources/views/chapters/show.blade.php
index ac2dbfffd..e5a044aa7 100644
--- a/resources/views/chapters/show.blade.php
+++ b/resources/views/chapters/show.blade.php
@@ -91,7 +91,7 @@
         </div>
     </div>
 
-    @include('pages/sidebar-tree-list', ['book' => $book, 'sidebarTree' => $sidebarTree])
+    @include('partials/book-tree', ['book' => $book, 'sidebarTree' => $sidebarTree])
 @stop
 
 @section('body')
diff --git a/resources/views/pages/delete.blade.php b/resources/views/pages/delete.blade.php
index f94a614fb..47906a1f6 100644
--- a/resources/views/pages/delete.blade.php
+++ b/resources/views/pages/delete.blade.php
@@ -1,27 +1,30 @@
-@extends('base')
+@extends('simple-layout')
 
-@section('content')
+@section('toolbar')
+    <div class="col-sm-12 faded">
+        @include('pages._breadcrumbs', ['page' => $page])
+    </div>
+@stop
 
-    <div class="faded-small toolbar">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-12 faded">
-                    @include('pages._breadcrumbs', ['page' => $page])
-                </div>
+@section('body')
+
+    <div class="container small" ng-non-bindable>
+        <p>&nbsp;</p>
+        <div class="card">
+            <h3><i class="zmdi zmdi-delete"></i> {{ $page->draft ? trans('entities.pages_delete_draft') : trans('entities.pages_delete') }}</h3>
+            <div class="body">
+                <p class="text-neg">{{ $page->draft ? trans('entities.pages_delete_draft_confirm'): trans('entities.pages_delete_confirm') }}</p>
+
+                <form action="{{ $page->getUrl() }}" method="POST">
+                    {!! csrf_field() !!}
+                    <input type="hidden" name="_method" value="DELETE">
+                    <div class="form-group">
+                        <a href="{{ $page->getUrl() }}" class="button outline">{{ trans('common.cancel') }}</a>
+                        <button type="submit" class="button neg">{{ trans('common.confirm') }}</button>
+                    </div>
+                </form>
             </div>
         </div>
     </div>
 
-    <div class="container small" ng-non-bindable>
-        <h1>{{ $page->draft ? trans('entities.pages_delete_draft') : trans('entities.pages_delete') }}</h1>
-        <p class="text-neg">{{ $page->draft ? trans('entities.pages_delete_draft_confirm'): trans('entities.pages_delete_confirm') }}</p>
-
-        <form action="{{ $page->getUrl() }}" method="POST">
-            {!! csrf_field() !!}
-            <input type="hidden" name="_method" value="DELETE">
-            <a href="{{ $page->getUrl() }}" class="button primary">{{ trans('common.cancel') }}</a>
-            <button type="submit" class="button neg">{{ trans('common.confirm') }}</button>
-        </form>
-    </div>
-
 @stop
\ No newline at end of file
diff --git a/resources/views/pages/detailed-listing.blade.php b/resources/views/pages/detailed-listing.blade.php
index 85b77fae1..b4991d79d 100644
--- a/resources/views/pages/detailed-listing.blade.php
+++ b/resources/views/pages/detailed-listing.blade.php
@@ -1,18 +1,15 @@
-@extends('base')
+@extends('simple-layout')
 
-@section('content')
-
-    <div class="container">
-        <div class="row">
-
-            <div class="col-sm-7">
-                <h1>{{ $title }}</h1>
-                @include('partials/entity-list', ['entities' => $pages, 'style' => 'detailed'])
+@section('body')
+    <div class="container small">
+        <p>&nbsp;</p>
+        <div class="card">
+            <h3>{{ $title }}</h3>
+            @include('partials/entity-list', ['entities' => $pages, 'style' => 'detailed'])
+            <div class="body text-center">
                 {!! $pages->links() !!}
             </div>
-
-            <div class="col-sm-4 col-sm-offset-1"></div>
-
         </div>
+
     </div>
 @stop
\ No newline at end of file
diff --git a/resources/views/pages/edit.blade.php b/resources/views/pages/edit.blade.php
index 6de47aaf1..79a4878fe 100644
--- a/resources/views/pages/edit.blade.php
+++ b/resources/views/pages/edit.blade.php
@@ -16,8 +16,6 @@
             @include('pages/form', ['model' => $page])
             @include('pages/form-toolbox')
         </form>
-
-
     </div>
     
     @include('components.image-manager', ['imageType' => 'gallery', 'uploaded_to' => $page->id])
diff --git a/resources/views/pages/form.blade.php b/resources/views/pages/form.blade.php
index b73b67ef7..ffc1c3fa6 100644
--- a/resources/views/pages/form.blade.php
+++ b/resources/views/pages/form.blade.php
@@ -5,7 +5,7 @@
 
     {{--Header Bar--}}
     <div class="faded-small toolbar">
-        <div class="container">
+        <div class="container fluid">
             <div class="row">
                 <div class="col-sm-4 faded">
                     <div class="action-buttons text-left">
diff --git a/resources/views/pages/move.blade.php b/resources/views/pages/move.blade.php
index a9b6d69d7..8f934a30e 100644
--- a/resources/views/pages/move.blade.php
+++ b/resources/views/pages/move.blade.php
@@ -1,29 +1,31 @@
-@extends('base')
+@extends('simple-layout')
 
-@section('content')
+@section('toolbar')
+    <div class="col-sm-12 faded">
+        @include('pages._breadcrumbs', ['page' => $page])
+    </div>
+@stop
 
-    <div class="faded-small toolbar">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-12 faded">
-                    @include('pages._breadcrumbs', ['page' => $page])
-                </div>
+@section('body')
+
+    <div class="container">
+        <p>&nbsp;</p>
+        <div class="card">
+            <h3><i class="zmdi zmdi-folder"></i> {{ trans('entities.pages_move') }}</h3>
+            <div class="body">
+                <form action="{{ $page->getUrl('/move') }}" method="POST">
+                    {!! csrf_field() !!}
+                    <input type="hidden" name="_method" value="PUT">
+
+                    @include('components.entity-selector', ['name' => 'entity_selection', 'selectorSize' => 'large', 'entityTypes' => 'book,chapter'])
+
+                    <div class="form-group text-right">
+                        <a href="{{ $page->getUrl() }}" class="button outline">{{ trans('common.cancel') }}</a>
+                        <button type="submit" class="button pos">{{ trans('entities.pages_move') }}</button>
+                    </div>
+                </form>
             </div>
         </div>
     </div>
 
-    <div class="container">
-        <h1>{{ trans('entities.pages_move') }}</h1>
-
-        <form action="{{ $page->getUrl('/move') }}" method="POST">
-            {!! csrf_field() !!}
-            <input type="hidden" name="_method" value="PUT">
-
-            @include('components.entity-selector', ['name' => 'entity_selection', 'selectorSize' => 'large', 'entityTypes' => 'book,chapter'])
-
-            <a href="{{ $page->getUrl() }}" class="button muted">{{ trans('common.cancel') }}</a>
-            <button type="submit" class="button pos">{{ trans('entities.pages_move') }}</button>
-        </form>
-    </div>
-
 @stop
diff --git a/resources/views/pages/restrictions.blade.php b/resources/views/pages/restrictions.blade.php
index cfef2ed21..8f0e5353d 100644
--- a/resources/views/pages/restrictions.blade.php
+++ b/resources/views/pages/restrictions.blade.php
@@ -1,20 +1,19 @@
-@extends('base')
+@extends('simple-layout')
 
-@section('content')
+@section('toolbar')
+    <div class="col-sm-12 faded">
+        @include('pages._breadcrumbs', ['page' => $page])
+    </div>
+@stop
 
-    <div class="faded-small toolbar">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-12 faded">
-                    @include('pages._breadcrumbs', ['page' => $page])
-                </div>
+@section('body')
+    <div class="container" ng-non-bindable>
+        <p>&nbsp;</p>
+        <div class="card">
+            <h3><i class="zmdi zmdi-lock-outline"></i> {{ trans('entities.pages_permissions') }}</h3>
+            <div class="body">
+                @include('form.restriction-form', ['model' => $page])
             </div>
         </div>
     </div>
-
-    <div class="container" ng-non-bindable>
-        <h1>{{ trans('entities.pages_permissions') }}</h1>
-        @include('form.restriction-form', ['model' => $page])
-    </div>
-
 @stop
diff --git a/resources/views/pages/revision.blade.php b/resources/views/pages/revision.blade.php
index a4b5fb4b5..ca74e4afa 100644
--- a/resources/views/pages/revision.blade.php
+++ b/resources/views/pages/revision.blade.php
@@ -1,12 +1,20 @@
-@extends('base')
+@extends('sidebar-layout')
 
-@section('content')
+@section('sidebar')
+    <div class="card">
+        <h3><i class="zmdi zmdi-info-outline"></i> {{ trans('common.details') }}</h3>
+        <div class="body">
+            @include('partials.entity-meta', ['entity' => $revision])
+        </div>
+    </div>
+@stop
 
+@section('body')
 
     <div class="container" ng-non-bindable>
         <div class="row">
             <div class="col-md-9">
-                <div class="page-content anim fadeIn">
+                <div class="page-content">
                     @include('pages.page-display')
                 </div>
             </div>
diff --git a/resources/views/pages/revisions.blade.php b/resources/views/pages/revisions.blade.php
index bdc8460ef..ed3aa4832 100644
--- a/resources/views/pages/revisions.blade.php
+++ b/resources/views/pages/revisions.blade.php
@@ -1,62 +1,62 @@
-@extends('base')
+@extends('simple-layout')
 
-@section('content')
+@section('toolbar')
+    <div class="col-sm-12 faded">
+        @include('pages._breadcrumbs', ['page' => $page])
+    </div>
+@stop
 
-    <div class="faded-small toolbar">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-12 faded">
-                    @include('pages._breadcrumbs', ['page' => $page])
-                </div>
+@section('body')
+    <div class="container" ng-non-bindable>
+        <p>&nbsp;</p>
+
+        <div class="card">
+            <h3><i class="zmdi zmdi-replay"></i> {{ trans('entities.pages_revisions') }}</h3>
+            <div class="body">
+                @if(count($page->revisions) > 0)
+
+                    <table class="table">
+                        <tr>
+                            <th width="3%">{{ trans('entities.pages_revisions_number') }}</th>
+                            <th width="23%">{{ trans('entities.pages_name') }}</th>
+                            <th colspan="2" width="8%">{{ trans('entities.pages_revisions_created_by') }}</th>
+                            <th width="15%">{{ trans('entities.pages_revisions_date') }}</th>
+                            <th width="25%">{{ trans('entities.pages_revisions_changelog') }}</th>
+                            <th width="20%">{{ trans('common.actions') }}</th>
+                        </tr>
+                        @foreach($page->revisions as $index => $revision)
+                            <tr>
+                                <td>{{ $revision->revision_number == 0 ? '' : $revision->revision_number }}</td>
+                                <td>{{ $revision->name }}</td>
+                                <td style="line-height: 0;">
+                                    @if($revision->createdBy)
+                                        <img class="avatar" src="{{ $revision->createdBy->getAvatar(30) }}" alt="{{ $revision->createdBy->name }}">
+                                    @endif
+                                </td>
+                                <td> @if($revision->createdBy) {{ $revision->createdBy->name }} @else {{ trans('common.deleted_user') }} @endif</td>
+                                <td><small>{{ $revision->created_at->format('jS F, Y H:i:s') }} <br> ({{ $revision->created_at->diffForHumans() }})</small></td>
+                                <td>{{ $revision->summary }}</td>
+                                <td>
+                                    <a href="{{ $revision->getUrl('changes') }}" target="_blank">{{ trans('entities.pages_revisions_changes') }}</a>
+                                    <span class="text-muted">&nbsp;|&nbsp;</span>
+
+                                    @if ($index === 0)
+                                        <a target="_blank" href="{{ $page->getUrl() }}"><i>{{ trans('entities.pages_revisions_current') }}</i></a>
+                                    @else
+                                        <a href="{{ $revision->getUrl() }}" target="_blank">{{ trans('entities.pages_revisions_preview') }}</a>
+                                        <span class="text-muted">&nbsp;|&nbsp;</span>
+                                        <a href="{{ $revision->getUrl('restore') }}">{{ trans('entities.pages_revisions_restore') }}</a>
+                                    @endif
+                                </td>
+                            </tr>
+                        @endforeach
+                    </table>
+
+                @else
+                    <p>{{ trans('entities.pages_revisions_none') }}</p>
+                @endif
             </div>
         </div>
-    </div>
-
-    <div class="container" ng-non-bindable>
-        <h1>{{ trans('entities.pages_revisions') }}</h1>
-
-        @if(count($page->revisions) > 0)
-
-            <table class="table">
-                <tr>
-                    <th width="3%">{{ trans('entities.pages_revisions_number') }}</th>
-                    <th width="23%">{{ trans('entities.pages_name') }}</th>
-                    <th colspan="2" width="8%">{{ trans('entities.pages_revisions_created_by') }}</th>
-                    <th width="15%">{{ trans('entities.pages_revisions_date') }}</th>
-                    <th width="25%">{{ trans('entities.pages_revisions_changelog') }}</th>
-                    <th width="20%">{{ trans('common.actions') }}</th>
-                </tr>
-                @foreach($page->revisions as $index => $revision)
-                    <tr>
-                        <td>{{ $revision->revision_number == 0 ? '' : $revision->revision_number }}</td>
-                        <td>{{ $revision->name }}</td>
-                        <td style="line-height: 0;">
-                            @if($revision->createdBy)
-                                <img class="avatar" src="{{ $revision->createdBy->getAvatar(30) }}" alt="{{ $revision->createdBy->name }}">
-                            @endif
-                        </td>
-                        <td> @if($revision->createdBy) {{ $revision->createdBy->name }} @else {{ trans('common.deleted_user') }} @endif</td>
-                        <td><small>{{ $revision->created_at->format('jS F, Y H:i:s') }} <br> ({{ $revision->created_at->diffForHumans() }})</small></td>
-                        <td>{{ $revision->summary }}</td>
-                        <td>
-                            <a href="{{ $revision->getUrl('changes') }}" target="_blank">{{ trans('entities.pages_revisions_changes') }}</a>
-                            <span class="text-muted">&nbsp;|&nbsp;</span>
-
-                            @if ($index === 0)
-                                <a target="_blank" href="{{ $page->getUrl() }}"><i>{{ trans('entities.pages_revisions_current') }}</i></a>
-                            @else
-                                <a href="{{ $revision->getUrl() }}" target="_blank">{{ trans('entities.pages_revisions_preview') }}</a>
-                                <span class="text-muted">&nbsp;|&nbsp;</span>
-                                <a href="{{ $revision->getUrl('restore') }}">{{ trans('entities.pages_revisions_restore') }}</a>
-                            @endif
-                        </td>
-                    </tr>
-                @endforeach
-            </table>
-
-        @else
-            <p>{{ trans('entities.pages_revisions_none') }}</p>
-        @endif
 
     </div>
 
diff --git a/resources/views/pages/show.blade.php b/resources/views/pages/show.blade.php
index 121f6f38e..07ecdfdfc 100644
--- a/resources/views/pages/show.blade.php
+++ b/resources/views/pages/show.blade.php
@@ -19,7 +19,7 @@
             @endif
             @if(userCan('page-update', $page) || userCan('restrictions-manage', $page) || userCan('page-delete', $page))
                 <div dropdown class="dropdown-container">
-                    <a dropdown-toggle class="text-primary text-button"><i class="zmdi zmdi-more-vert"></i></a>
+                    <a dropdown-toggle class="text-primary text-button"><i class="zmdi zmdi-more-vert"></i> {{ trans('common.more') }}</a>
                     <ul>
                         @if(userCan('page-update', $page))
                             <li><a href="{{ $page->getUrl('/move') }}" class="text-primary" ><i class="zmdi zmdi-folder"></i>{{ trans('common.move') }}</a></li>
@@ -77,7 +77,53 @@
         </div>
     @endif
 
-    @include('pages/sidebar-tree-list', ['book' => $book, 'sidebarTree' => $sidebarTree, 'pageNav' => $pageNav])
+    @if($page->tags->count() > 0)
+        <div class="card tag-display">
+            <h3><i class="zmdi zmdi-tag"></i> {{ trans('entities.page_tags') }}</h3>
+            <div class="body">
+                <table>
+                    <tbody>
+                    @foreach($page->tags as $tag)
+                        <tr class="tag">
+                            <td @if(!$tag->value) colspan="2" @endif><a href="{{ baseUrl('/search?term=%5B' . urlencode($tag->name) .'%5D') }}">{{ $tag->name }}</a></td>
+                            @if($tag->value) <td class="tag-value"><a href="{{ baseUrl('/search?term=%5B' . urlencode($tag->name) .'%3D' . urlencode($tag->value) . '%5D') }}">{{$tag->value}}</a></td> @endif
+                        </tr>
+                    @endforeach
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    @endif
+
+    @if ($page->attachments->count() > 0)
+        <div class="card">
+            <h3><i class="zmdi zmdi-attachment-alt"></i> {{ trans('entities.pages_attachments') }}</h3>
+            <div class="body">
+                @foreach($page->attachments as $attachment)
+                    <div class="attachment">
+                        <a href="{{ $attachment->getUrl() }}" @if($attachment->external) target="_blank" @endif><i class="zmdi zmdi-{{ $attachment->external ? 'open-in-new' : 'file' }}"></i>{{ $attachment->name }}</a>
+                    </div>
+                @endforeach
+            </div>
+        </div>
+    @endif
+
+    @if (isset($pageNav) && count($pageNav))
+        <div class="card">
+            <h3><i class="zmdi zmdi-compass"></i> {{ trans('entities.pages_navigation') }}</h3>
+            <div class="body">
+                <div class="sidebar-page-nav menu">
+                    @foreach($pageNav as $navItem)
+                        <li class="page-nav-item h{{ $navItem['level'] }}">
+                            <a href="{{ $navItem['link'] }}">{{ $navItem['text'] }}</a>
+                        </li>
+                    @endforeach
+                </div>
+            </div>
+        </div>
+    @endif
+
+    @include('partials/book-tree', ['book' => $book, 'sidebarTree' => $sidebarTree])
 
     <div class="card">
         <h3><i class="zmdi zmdi-info-outline"></i> {{ trans('common.details') }}</h3>
diff --git a/resources/views/pages/sidebar-tree-list.blade.php b/resources/views/pages/sidebar-tree-list.blade.php
index 902a6def2..e69de29bb 100644
--- a/resources/views/pages/sidebar-tree-list.blade.php
+++ b/resources/views/pages/sidebar-tree-list.blade.php
@@ -1,87 +0,0 @@
-
-<div class="book-tree" ng-non-bindable>
-
-    @if(isset($page) && $page->tags->count() > 0)
-        <div class="card tag-display">
-            <h3><i class="zmdi zmdi-tag"></i> {{ trans('entities.page_tags') }}</h3>
-            <div class="body">
-                <table>
-                    <tbody>
-                    @foreach($page->tags as $tag)
-                        <tr class="tag">
-                            <td @if(!$tag->value) colspan="2" @endif><a href="{{ baseUrl('/search?term=%5B' . urlencode($tag->name) .'%5D') }}">{{ $tag->name }}</a></td>
-                            @if($tag->value) <td class="tag-value"><a href="{{ baseUrl('/search?term=%5B' . urlencode($tag->name) .'%3D' . urlencode($tag->value) . '%5D') }}">{{$tag->value}}</a></td> @endif
-                        </tr>
-                    @endforeach
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    @endif
-
-    @if (isset($page) && $page->attachments->count() > 0)
-        <div class="card">
-            <h3><i class="zmdi zmdi-attachment-alt"></i> {{ trans('entities.pages_attachments') }}</h3>
-            <div class="body">
-                @foreach($page->attachments as $attachment)
-                    <div class="attachment">
-                        <a href="{{ $attachment->getUrl() }}" @if($attachment->external) target="_blank" @endif><i class="zmdi zmdi-{{ $attachment->external ? 'open-in-new' : 'file' }}"></i>{{ $attachment->name }}</a>
-                    </div>
-                @endforeach
-            </div>
-        </div>
-    @endif
-
-    @if (isset($pageNav) && count($pageNav))
-        <div class="card">
-            <h3><i class="zmdi zmdi-compass"></i> {{ trans('entities.pages_navigation') }}</h3>
-            <div class="body">
-                <div class="sidebar-page-nav menu">
-                    @foreach($pageNav as $navItem)
-                        <li class="page-nav-item h{{ $navItem['level'] }}">
-                            <a href="{{ $navItem['link'] }}">{{ $navItem['text'] }}</a>
-                        </li>
-                    @endforeach
-                </div>
-            </div>
-        </div>
-    @endif
-
-    <div class="card">
-        <h3><i class="zmdi zmdi-book"></i> {{ trans('entities.books_navigation') }}</h3>
-        <div class="body">
-            <ul class="sidebar-page-list menu">
-
-                @if (userCan('view', $book))
-                    <li class="book-header"><a href="{{ $book->getUrl() }}" class="book {{ $current->matches($book)? 'selected' : '' }}"><i class="zmdi zmdi-book"></i>{{$book->name}}</a></li>
-                @endif
-
-                @foreach($sidebarTree as $bookChild)
-                    <li class="list-item-{{ $bookChild->getClassName() }} {{ $bookChild->getClassName() }} {{ $bookChild->isA('page') && $bookChild->draft ? 'draft' : '' }}">
-                        <a href="{{ $bookChild->getUrl() }}" class="{{ $bookChild->getClassName() }} {{ $current->matches($bookChild)? 'selected' : '' }}">
-                            @if($bookChild->isA('chapter'))<i class="zmdi zmdi-collection-bookmark"></i>@else <i class="zmdi zmdi-file-text"></i>@endif{{ $bookChild->name }}
-                        </a>
-
-                        @if($bookChild->isA('chapter') && count($bookChild->pages) > 0)
-                            <p chapter-toggle class="text-muted @if($bookChild->matchesOrContains($current)) open @endif">
-                                <i class="zmdi zmdi-caret-right"></i> <i class="zmdi zmdi-file-text"></i> <span>{{ trans('entities.x_pages', ['count' => $bookChild->pages->count()]) }}</span>
-                            </p>
-                            <ul class="menu sub-menu inset-list @if($bookChild->matchesOrContains($current)) open @endif">
-                                @foreach($bookChild->pages as $childPage)
-                                    <li class="list-item-page {{ $childPage->isA('page') && $childPage->draft ? 'draft' : '' }}">
-                                        <a href="{{ $childPage->getUrl() }}" class="page {{ $current->matches($childPage)? 'selected' : '' }}">
-                                            <i class="zmdi zmdi-file-text"></i> {{ $childPage->name }}
-                                        </a>
-                                    </li>
-                                @endforeach
-                            </ul>
-                        @endif
-
-
-                    </li>
-                @endforeach
-            </ul>
-        </div>
-    </div>
-
-</div>
diff --git a/resources/views/partials/book-tree.blade.php b/resources/views/partials/book-tree.blade.php
new file mode 100644
index 000000000..80f7262ca
--- /dev/null
+++ b/resources/views/partials/book-tree.blade.php
@@ -0,0 +1,36 @@
+<div class="card book-tree" ng-non-bindable>
+    <h3><i class="zmdi zmdi-book"></i> {{ trans('entities.books_navigation') }}</h3>
+    <div class="body">
+        <ul class="sidebar-page-list menu">
+
+            @if (userCan('view', $book))
+                <li class="book-header"><a href="{{ $book->getUrl() }}" class="book {{ $current->matches($book)? 'selected' : '' }}"><i class="zmdi zmdi-book"></i>{{$book->name}}</a></li>
+            @endif
+
+            @foreach($sidebarTree as $bookChild)
+                <li class="list-item-{{ $bookChild->getClassName() }} {{ $bookChild->getClassName() }} {{ $bookChild->isA('page') && $bookChild->draft ? 'draft' : '' }}">
+                    <a href="{{ $bookChild->getUrl() }}" class="{{ $bookChild->getClassName() }} {{ $current->matches($bookChild)? 'selected' : '' }}">
+                        @if($bookChild->isA('chapter'))<i class="zmdi zmdi-collection-bookmark"></i>@else <i class="zmdi zmdi-file-text"></i>@endif{{ $bookChild->name }}
+                    </a>
+
+                    @if($bookChild->isA('chapter') && count($bookChild->pages) > 0)
+                        <p chapter-toggle class="text-muted @if($bookChild->matchesOrContains($current)) open @endif">
+                            <i class="zmdi zmdi-caret-right"></i> <i class="zmdi zmdi-file-text"></i> <span>{{ trans('entities.x_pages', ['count' => $bookChild->pages->count()]) }}</span>
+                        </p>
+                        <ul class="menu sub-menu inset-list @if($bookChild->matchesOrContains($current)) open @endif">
+                            @foreach($bookChild->pages as $childPage)
+                                <li class="list-item-page {{ $childPage->isA('page') && $childPage->draft ? 'draft' : '' }}">
+                                    <a href="{{ $childPage->getUrl() }}" class="page {{ $current->matches($childPage)? 'selected' : '' }}">
+                                        <i class="zmdi zmdi-file-text"></i> {{ $childPage->name }}
+                                    </a>
+                                </li>
+                            @endforeach
+                        </ul>
+                    @endif
+
+
+                </li>
+            @endforeach
+        </ul>
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/partials/entity-meta.blade.php b/resources/views/partials/entity-meta.blade.php
index 0442ce50c..49671ba50 100644
--- a/resources/views/partials/entity-meta.blade.php
+++ b/resources/views/partials/entity-meta.blade.php
@@ -1,4 +1,9 @@
 <p class="text-muted small">
+    @if($entity->isA('revision'))
+        {{ trans('entities.pages_revision') }}
+        {{ trans('entities.pages_revisions_number') }}{{ $entity->revision_number == 0 ? '' : $entity->revision_number }}
+        <br>
+    @endif
     @if ($entity->isA('page')) {{ trans('entities.meta_revision', ['revisionCount' => $entity->revision_count]) }} <br> @endif
     @if ($entity->createdBy)
         {!! trans('entities.meta_created_name', [
@@ -14,7 +19,7 @@
                 'timeLength' => '<span title="' . $entity->updated_at->toDayDateTimeString() .'">' . $entity->updated_at->diffForHumans() .'</span>',
                 'user' => "<a href='{$entity->updatedBy->getProfileUrl()}'>".htmlentities($entity->updatedBy->name). "</a>"
             ]) !!}
-    @else
+    @elseif (!$entity->isA('revision'))
         <span title="{{ $entity->updated_at->toDayDateTimeString() }}">{{ trans('entities.meta_updated', ['timeLength' => $entity->updated_at->diffForHumans()]) }}</span>
     @endif
 </p>
\ No newline at end of file
diff --git a/resources/views/sidebar-layout.blade.php b/resources/views/sidebar-layout.blade.php
index 55701b8ba..0880f881d 100644
--- a/resources/views/sidebar-layout.blade.php
+++ b/resources/views/sidebar-layout.blade.php
@@ -15,7 +15,7 @@
 
     <div class="flex-fill flex" @yield('container-attrs') >
 
-        <div class="sidebar flex print-hidden">
+        <div class="sidebar flex print-hidden" id="sidebar">
             <div class="scroll-body">
                 @yield('sidebar')
             </div>

From 4cb4c9e56814d22c33a5955561ee6c05d1e2efbc Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sat, 26 Aug 2017 17:17:04 +0100
Subject: [PATCH 8/8] Updated remaining views to 2017 design update.

Also fixed issue with duplicate confirmation email.
---
 .../Controllers/Auth/RegisterController.php   |   1 -
 app/Services/SearchService.php                |   2 +-
 resources/assets/sass/_forms.scss             |   4 +-
 resources/assets/sass/_text.scss              |   6 -
 .../views/auth/register-confirm.blade.php     |   8 +-
 .../views/auth/user-unconfirmed.blade.php     |  48 ++-
 .../views/partials/activity-list.blade.php    |   2 +-
 resources/views/search/all.blade.php          | 377 +++++++++---------
 resources/views/settings/index.blade.php      | 223 ++++++-----
 resources/views/settings/navbar.blade.php     |  26 +-
 .../views/settings/roles/create.blade.php     |  20 +-
 .../views/settings/roles/delete.blade.php     |  58 +--
 resources/views/settings/roles/edit.blade.php |  29 +-
 resources/views/settings/roles/form.blade.php | 322 +++++++--------
 .../views/settings/roles/index.blade.php      |  51 +--
 resources/views/users/create.blade.php        |  39 +-
 resources/views/users/delete.blade.php        |  45 +--
 resources/views/users/edit.blade.php          | 142 +++----
 resources/views/users/index.blade.php         | 131 +++---
 resources/views/users/profile.blade.php       | 133 +++---
 20 files changed, 835 insertions(+), 832 deletions(-)

diff --git a/app/Http/Controllers/Auth/RegisterController.php b/app/Http/Controllers/Auth/RegisterController.php
index 9a23fe2a1..1ba8b97db 100644
--- a/app/Http/Controllers/Auth/RegisterController.php
+++ b/app/Http/Controllers/Auth/RegisterController.php
@@ -231,7 +231,6 @@ class RegisterController extends Controller
             return redirect('/register/confirm');
         }
 
-        $this->emailConfirmationService->sendConfirmation($user);
         session()->flash('success', trans('auth.email_confirm_resent'));
         return redirect('/register/confirm');
     }
diff --git a/app/Services/SearchService.php b/app/Services/SearchService.php
index 3d1d45c3b..bb92a1d7c 100644
--- a/app/Services/SearchService.php
+++ b/app/Services/SearchService.php
@@ -92,7 +92,7 @@ class SearchService
         return [
             'total' => $total,
             'count' => count($results),
-            'results' => $results->sortByDesc('score')
+            'results' => $results->sortByDesc('score')->values()
         ];
     }
 
diff --git a/resources/assets/sass/_forms.scss b/resources/assets/sass/_forms.scss
index 94752f26e..657bbed17 100644
--- a/resources/assets/sass/_forms.scss
+++ b/resources/assets/sass/_forms.scss
@@ -237,8 +237,8 @@ div[editor-type="markdown"] .title-input.page-title input[type="text"] {
     padding: 0;
     cursor: pointer;
     position: absolute;
-    left: 7px;
-    top: 7px;
+    left: 8px;
+    top: 9.5px;
   }
   input {
     display: block;
diff --git a/resources/assets/sass/_text.scss b/resources/assets/sass/_text.scss
index 2911a88c6..719126526 100644
--- a/resources/assets/sass/_text.scss
+++ b/resources/assets/sass/_text.scss
@@ -378,12 +378,6 @@ span.sep {
   display: block;
 }
 
-.action-header {
-  h1 {
-    margin-top: $-m;
-  }
-}
-
 /**
   * Icons
   */
diff --git a/resources/views/auth/register-confirm.blade.php b/resources/views/auth/register-confirm.blade.php
index 364df9266..5d945ef81 100644
--- a/resources/views/auth/register-confirm.blade.php
+++ b/resources/views/auth/register-confirm.blade.php
@@ -9,9 +9,11 @@
 @section('content')
 
     <div class="text-center">
-        <div class="center-box">
-            <h2>{{ trans('auth.register_thanks') }}</h2>
-            <p>{{ trans('auth.register_confirm', ['appName' => setting('app-name')]) }}</p>
+        <div class="card center-box">
+            <h3><i class="zmdi zmdi-accounts"></i> {{ trans('auth.register_thanks') }}</h3>
+            <div class="body">
+                <p>{{ trans('auth.register_confirm', ['appName' => setting('app-name')]) }}</p>
+            </div>
         </div>
     </div>
 
diff --git a/resources/views/auth/user-unconfirmed.blade.php b/resources/views/auth/user-unconfirmed.blade.php
index 13567b412..22c26d92b 100644
--- a/resources/views/auth/user-unconfirmed.blade.php
+++ b/resources/views/auth/user-unconfirmed.blade.php
@@ -2,29 +2,33 @@
 
 @section('content')
 
-    <div class="row">
-        <div class="col-md-6 col-md-offset-3">
-            <h2>{{ trans('auth.email_not_confirmed') }}</h2>
-            <p class="text-muted">{{ trans('auth.email_not_confirmed_text') }}<br>
-                {{ trans('auth.email_not_confirmed_click_link') }} <br>
-                {{ trans('auth.email_not_confirmed_resend') }}
-            </p>
-            <hr>
-            <form action="{{ baseUrl("/register/confirm/resend") }}" method="POST">
-                {!! csrf_field() !!}
-                <div class="form-group">
-                    <label for="email">{{ trans('auth.email') }}</label>
-                    @if(auth()->check())
-                        @include('form/text', ['name' => 'email', 'model' => auth()->user()])
-                    @else
-                        @include('form/text', ['name' => 'email'])
-                    @endif
-                </div>
-                <div class="form-group">
-                    <button type="submit" class="button pos">{{ trans('auth.email_not_confirmed_resend_button') }}</button>
-                </div>
-            </form>
+    <div class="container small">
+        <p>&nbsp;</p>
+        <div class="card">
+            <h3><i class="zmdi zmdi-accounts"></i> {{ trans('auth.email_not_confirmed') }}</h3>
+            <div class="body">
+                <p class="text-muted">{{ trans('auth.email_not_confirmed_text') }}<br>
+                    {{ trans('auth.email_not_confirmed_click_link') }} <br>
+                    {{ trans('auth.email_not_confirmed_resend') }}
+                </p>
+                <hr>
+                <form action="{{ baseUrl("/register/confirm/resend") }}" method="POST">
+                    {!! csrf_field() !!}
+                    <div class="form-group">
+                        <label for="email">{{ trans('auth.email') }}</label>
+                        @if(auth()->check())
+                            @include('form/text', ['name' => 'email', 'model' => auth()->user()])
+                        @else
+                            @include('form/text', ['name' => 'email'])
+                        @endif
+                    </div>
+                    <div class="form-group">
+                        <button type="submit" class="button pos">{{ trans('auth.email_not_confirmed_resend_button') }}</button>
+                    </div>
+                </form>
+            </div>
         </div>
+
     </div>
 
 @stop
diff --git a/resources/views/partials/activity-list.blade.php b/resources/views/partials/activity-list.blade.php
index 0dc38091e..45322a1e5 100644
--- a/resources/views/partials/activity-list.blade.php
+++ b/resources/views/partials/activity-list.blade.php
@@ -8,5 +8,5 @@
         @endforeach
     </div>
 @else
-    <p class="text-muted">{{ trans('common.no_activity') }}</p>
+    <p class="text-muted empty-text">{{ trans('common.no_activity') }}</p>
 @endif
\ No newline at end of file
diff --git a/resources/views/search/all.blade.php b/resources/views/search/all.blade.php
index 1029b65fa..2c967d0a9 100644
--- a/resources/views/search/all.blade.php
+++ b/resources/views/search/all.blade.php
@@ -1,213 +1,204 @@
-@extends('base')
+@extends('sidebar-layout')
 
-@section('content')
+@section('toolbar')
+    <div class="col-sm-12 faded">
+        <div class="breadcrumbs">
+            <a href="{{ baseUrl("/search?term=" . urlencode($searchTerm)) }}" class="text-button"><i class="zmdi zmdi-search"></i>{{ trans('entities.search_for_term', ['term' => $searchTerm]) }}</a>
+        </div>
+    </div>
+@stop
 
-    <input type="hidden" name="searchTerm" value="{{$searchTerm}}">
+@section('container-attrs')
+    id="search-system"
+    ng-non-bindable=""
+@stop
 
-<div id="search-system">
+@section('sidebar')
+    <div class="card">
+        <h3>{{ trans('entities.search_filters') }}</h3>
 
-    <div class="faded-small toolbar">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-12 faded">
-                    <div class="breadcrumbs">
-                        <a href="{{ baseUrl("/search?term=" . urlencode($searchTerm)) }}" class="text-button"><i class="zmdi zmdi-search"></i>{{ trans('entities.search_for_term', ['term' => $searchTerm]) }}</a>
-                    </div>
+        <div class="body">
+            <form v-on:submit="updateSearch" v-cloak class="v-cloak anim fadeIn">
+                <h6 class="text-muted">{{ trans('entities.search_content_type') }}</h6>
+                <div class="form-group">
+                    <label class="inline checkbox text-page"><input type="checkbox" v-on:change="typeChange" v-model="search.type.page" value="page">{{ trans('entities.page') }}</label>
+                    <label class="inline checkbox text-chapter"><input type="checkbox" v-on:change="typeChange" v-model="search.type.chapter" value="chapter">{{ trans('entities.chapter') }}</label>
+                    <label class="inline checkbox text-book"><input type="checkbox" v-on:change="typeChange" v-model="search.type.book" value="book">{{ trans('entities.book') }}</label>
                 </div>
-            </div>
-        </div>
-    </div>
 
-    <div class="container" ng-non-bindable id="searchSystem">
+                <h6 class="text-muted">{{ trans('entities.search_exact_matches') }}</h6>
+                <table cellpadding="0" cellspacing="0" border="0" class="no-style">
+                    <tr v-for="(term, i) in search.exactTerms">
+                        <td style="padding: 0 12px 6px 0;">
+                            <input class="exact-input outline" v-on:input="exactChange" type="text" v-model="search.exactTerms[i]"></td>
+                        <td>
+                            <button type="button" class="text-neg text-button" v-on:click="removeExact(i)">
+                                <i class="zmdi zmdi-close"></i>
+                            </button>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td colspan="2">
+                            <button type="button" class="text-button" v-on:click="addExact">
+                                <i class="zmdi zmdi-plus-circle-o"></i>{{ trans('common.add') }}
+                            </button>
+                        </td>
+                    </tr>
+                </table>
 
-        <div class="row">
+                <h6 class="text-muted">{{ trans('entities.search_tags') }}</h6>
+                <table cellpadding="0" cellspacing="0" border="0" class="no-style">
+                    <tr v-for="(term, i) in search.tagTerms">
+                        <td style="padding: 0 12px 6px 0;">
+                            <input class="tag-input outline" v-on:input="tagChange" type="text" v-model="search.tagTerms[i]"></td>
+                        <td>
+                            <button type="button" class="text-neg text-button" v-on:click="removeTag(i)">
+                                <i class="zmdi zmdi-close"></i>
+                            </button>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td colspan="2">
+                            <button type="button" class="text-button" v-on:click="addTag">
+                                <i class="zmdi zmdi-plus-circle-o"></i>{{ trans('common.add') }}
+                            </button>
+                        </td>
+                    </tr>
+                </table>
 
-            <div class="col-md-6">
-                <h1>{{ trans('entities.search_results') }}</h1>
-                <h6 class="text-muted">{{ trans_choice('entities.search_total_results_found', $totalResults, ['count' => $totalResults]) }}</h6>
-                @include('partials/entity-list', ['entities' => $entities])
-                @if ($hasNextPage)
-                    <a href="{{ $nextPageLink }}" class="button">{{ trans('entities.search_more') }}</a>
-                @endif
-            </div>
+                <h6 class="text-muted">Options</h6>
+                <label class="checkbox">
+                    <input type="checkbox" v-on:change="optionChange('viewed_by_me')"
+                           v-model="search.option.viewed_by_me" value="page">
+                    {{ trans('entities.search_viewed_by_me') }}
+                </label>
+                <label class="checkbox">
+                    <input type="checkbox" v-on:change="optionChange('not_viewed_by_me')"
+                           v-model="search.option.not_viewed_by_me" value="page">
+                    {{ trans('entities.search_not_viewed_by_me') }}
+                </label>
+                <label class="checkbox">
+                    <input type="checkbox" v-on:change="optionChange('is_restricted')"
+                           v-model="search.option.is_restricted" value="page">
+                    {{ trans('entities.search_permissions_set') }}
+                </label>
+                <label class="checkbox">
+                    <input type="checkbox" v-on:change="optionChange('created_by:me')"
+                           v-model="search.option['created_by:me']" value="page">
+                    {{ trans('entities.search_created_by_me') }}
+                </label>
+                <label class="checkbox">
+                    <input type="checkbox" v-on:change="optionChange('updated_by:me')"
+                           v-model="search.option['updated_by:me']" value="page">
+                    {{ trans('entities.search_updated_by_me') }}
+                </label>
 
-            <div class="col-md-5 col-md-offset-1">
-               <h3>{{ trans('entities.search_filters') }}</h3>
+                <h6 class="text-muted">Date Options</h6>
+                <table cellpadding="0" cellspacing="0" border="0" class="no-style form-table">
+                    <tr>
+                        <td width="200">{{ trans('entities.search_updated_after') }}</td>
+                        <td width="80">
+                            <button type="button" class="text-button" v-if="!search.dates.updated_after"
+                                    v-on:click="enableDate('updated_after')">{{ trans('entities.search_set_date') }}</button>
 
-                <form v-on:submit="updateSearch" v-cloak class="v-cloak anim fadeIn">
-                    <h6 class="text-muted">{{ trans('entities.search_content_type') }}</h6>
-                    <div class="form-group">
-                        <label class="inline checkbox text-page"><input type="checkbox" v-on:change="typeChange" v-model="search.type.page" value="page">{{ trans('entities.page') }}</label>
-                        <label class="inline checkbox text-chapter"><input type="checkbox" v-on:change="typeChange" v-model="search.type.chapter" value="chapter">{{ trans('entities.chapter') }}</label>
-                        <label class="inline checkbox text-book"><input type="checkbox" v-on:change="typeChange" v-model="search.type.book" value="book">{{ trans('entities.book') }}</label>
-                    </div>
+                        </td>
+                    </tr>
+                    <tr v-if="search.dates.updated_after">
+                        <td>
+                            <input v-if="search.dates.updated_after" class="tag-input"
+                                   v-on:input="dateChange('updated_after')" type="date" v-model="search.dates.updated_after"
+                                   pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
+                        </td>
+                        <td>
+                            <button v-if="search.dates.updated_after" type="button" class="text-neg text-button"
+                                    v-on:click="dateRemove('updated_after')">
+                                <i class="zmdi zmdi-close"></i>
+                            </button>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>{{ trans('entities.search_updated_before') }}</td>
+                        <td>
+                            <button type="button" class="text-button" v-if="!search.dates.updated_before"
+                                    v-on:click="enableDate('updated_before')">{{ trans('entities.search_set_date') }}</button>
 
-                    <h6 class="text-muted">{{ trans('entities.search_exact_matches') }}</h6>
-                    <table cellpadding="0" cellspacing="0" border="0" class="no-style">
-                        <tr v-for="(term, i) in search.exactTerms">
-                            <td style="padding: 0 12px 6px 0;">
-                                <input class="exact-input outline" v-on:input="exactChange" type="text" v-model="search.exactTerms[i]"></td>
-                            <td>
-                                <button type="button" class="text-neg text-button" v-on:click="removeExact(i)">
-                                    <i class="zmdi zmdi-close"></i>
-                                </button>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td colspan="2">
-                                <button type="button" class="text-button" v-on:click="addExact">
-                                    <i class="zmdi zmdi-plus-circle-o"></i>{{ trans('common.add') }}
-                                </button>
-                            </td>
-                        </tr>
-                    </table>
+                        </td>
+                    </tr>
+                    <tr v-if="search.dates.updated_before">
+                        <td>
+                            <input v-if="search.dates.updated_before" class="tag-input"
+                                   v-on:input="dateChange('updated_before')" type="date" v-model="search.dates.updated_before"
+                                   pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
+                        </td>
+                        <td>
+                            <button v-if="search.dates.updated_before" type="button" class="text-neg text-button"
+                                    v-on:click="dateRemove('updated_before')">
+                                <i class="zmdi zmdi-close"></i>
+                            </button>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>{{ trans('entities.search_created_after') }}</td>
+                        <td>
+                            <button type="button" class="text-button" v-if="!search.dates.created_after"
+                                    v-on:click="enableDate('created_after')">{{ trans('entities.search_set_date') }}</button>
 
-                    <h6 class="text-muted">{{ trans('entities.search_tags') }}</h6>
-                    <table cellpadding="0" cellspacing="0" border="0" class="no-style">
-                        <tr v-for="(term, i) in search.tagTerms">
-                            <td style="padding: 0 12px 6px 0;">
-                                <input class="tag-input outline" v-on:input="tagChange" type="text" v-model="search.tagTerms[i]"></td>
-                            <td>
-                                <button type="button" class="text-neg text-button" v-on:click="removeTag(i)">
-                                    <i class="zmdi zmdi-close"></i>
-                                </button>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td colspan="2">
-                                <button type="button" class="text-button" v-on:click="addTag">
-                                    <i class="zmdi zmdi-plus-circle-o"></i>{{ trans('common.add') }}
-                                </button>
-                            </td>
-                        </tr>
-                    </table>
+                        </td>
+                    </tr>
+                    <tr v-if="search.dates.created_after">
+                        <td>
+                            <input v-if="search.dates.created_after" class="tag-input"
+                                   v-on:input="dateChange('created_after')" type="date" v-model="search.dates.created_after"
+                                   pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
+                        </td>
+                        <td>
+                            <button v-if="search.dates.created_after" type="button" class="text-neg text-button"
+                                    v-on:click="dateRemove('created_after')">
+                                <i class="zmdi zmdi-close"></i>
+                            </button>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>{{ trans('entities.search_created_before') }}</td>
+                        <td>
+                            <button type="button" class="text-button" v-if="!search.dates.created_before"
+                                    v-on:click="enableDate('created_before')">{{ trans('entities.search_set_date') }}</button>
 
-                    <h6 class="text-muted">Options</h6>
-                    <label class="checkbox">
-                        <input type="checkbox" v-on:change="optionChange('viewed_by_me')"
-                               v-model="search.option.viewed_by_me" value="page">
-                        {{ trans('entities.search_viewed_by_me') }}
-                    </label>
-                    <label class="checkbox">
-                        <input type="checkbox" v-on:change="optionChange('not_viewed_by_me')"
-                               v-model="search.option.not_viewed_by_me" value="page">
-                        {{ trans('entities.search_not_viewed_by_me') }}
-                    </label>
-                    <label class="checkbox">
-                        <input type="checkbox" v-on:change="optionChange('is_restricted')"
-                               v-model="search.option.is_restricted" value="page">
-                        {{ trans('entities.search_permissions_set') }}
-                    </label>
-                    <label class="checkbox">
-                        <input type="checkbox" v-on:change="optionChange('created_by:me')"
-                               v-model="search.option['created_by:me']" value="page">
-                        {{ trans('entities.search_created_by_me') }}
-                    </label>
-                    <label class="checkbox">
-                        <input type="checkbox" v-on:change="optionChange('updated_by:me')"
-                               v-model="search.option['updated_by:me']" value="page">
-                        {{ trans('entities.search_updated_by_me') }}
-                    </label>
-
-                    <h6 class="text-muted">Date Options</h6>
-                    <table cellpadding="0" cellspacing="0" border="0" class="no-style form-table">
-                        <tr>
-                            <td width="200">{{ trans('entities.search_updated_after') }}</td>
-                            <td width="80">
-                                <button type="button" class="text-button" v-if="!search.dates.updated_after"
-                                        v-on:click="enableDate('updated_after')">{{ trans('entities.search_set_date') }}</button>
-
-                            </td>
-                        </tr>
-                        <tr v-if="search.dates.updated_after">
-                            <td>
-                                <input v-if="search.dates.updated_after" class="tag-input"
-                                       v-on:input="dateChange('updated_after')" type="date" v-model="search.dates.updated_after"
-                                       pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
-                            </td>
-                            <td>
-                                <button v-if="search.dates.updated_after" type="button" class="text-neg text-button"
-                                        v-on:click="dateRemove('updated_after')">
-                                    <i class="zmdi zmdi-close"></i>
-                                </button>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>{{ trans('entities.search_updated_before') }}</td>
-                            <td>
-                                <button type="button" class="text-button" v-if="!search.dates.updated_before"
-                                        v-on:click="enableDate('updated_before')">{{ trans('entities.search_set_date') }}</button>
-
-                            </td>
-                        </tr>
-                        <tr v-if="search.dates.updated_before">
-                            <td>
-                                <input v-if="search.dates.updated_before" class="tag-input"
-                                       v-on:input="dateChange('updated_before')" type="date" v-model="search.dates.updated_before"
-                                       pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
-                            </td>
-                            <td>
-                                <button v-if="search.dates.updated_before" type="button" class="text-neg text-button"
-                                        v-on:click="dateRemove('updated_before')">
-                                    <i class="zmdi zmdi-close"></i>
-                                </button>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>{{ trans('entities.search_created_after') }}</td>
-                            <td>
-                                <button type="button" class="text-button" v-if="!search.dates.created_after"
-                                        v-on:click="enableDate('created_after')">{{ trans('entities.search_set_date') }}</button>
-
-                            </td>
-                        </tr>
-                        <tr v-if="search.dates.created_after">
-                            <td>
-                                <input v-if="search.dates.created_after" class="tag-input"
-                                       v-on:input="dateChange('created_after')" type="date" v-model="search.dates.created_after"
-                                       pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
-                            </td>
-                            <td>
-                                <button v-if="search.dates.created_after" type="button" class="text-neg text-button"
-                                        v-on:click="dateRemove('created_after')">
-                                    <i class="zmdi zmdi-close"></i>
-                                </button>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>{{ trans('entities.search_created_before') }}</td>
-                            <td>
-                                <button type="button" class="text-button" v-if="!search.dates.created_before"
-                                        v-on:click="enableDate('created_before')">{{ trans('entities.search_set_date') }}</button>
-
-                            </td>
-                        </tr>
-                        <tr v-if="search.dates.created_before">
-                            <td>
-                                <input v-if="search.dates.created_before" class="tag-input"
-                                       v-on:input="dateChange('created_before')" type="date" v-model="search.dates.created_before"
-                                       pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
-                            </td>
-                            <td>
-                                <button v-if="search.dates.created_before" type="button" class="text-neg text-button"
-                                        v-on:click="dateRemove('created_before')">
-                                    <i class="zmdi zmdi-close"></i>
-                                </button>
-                            </td>
-                        </tr>
-                    </table>
+                        </td>
+                    </tr>
+                    <tr v-if="search.dates.created_before">
+                        <td>
+                            <input v-if="search.dates.created_before" class="tag-input"
+                                   v-on:input="dateChange('created_before')" type="date" v-model="search.dates.created_before"
+                                   pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
+                        </td>
+                        <td>
+                            <button v-if="search.dates.created_before" type="button" class="text-neg text-button"
+                                    v-on:click="dateRemove('created_before')">
+                                <i class="zmdi zmdi-close"></i>
+                            </button>
+                        </td>
+                    </tr>
+                </table>
 
 
-                    <button type="submit" class="button primary">{{ trans('entities.search_update') }}</button>
-                </form>
-
-
-            </div>
-
+                <button type="submit" class="button primary">{{ trans('entities.search_update') }}</button>
+            </form>
         </div>
 
-
     </div>
-</div>
+@stop
 
+@section('body')
+
+    <div class="container small">
+        <input type="hidden" name="searchTerm" value="{{$searchTerm}}">
+
+        <h1>{{ trans('entities.search_results') }}</h1>
+        <h6 class="text-muted">{{ trans_choice('entities.search_total_results_found', $totalResults, ['count' => $totalResults]) }}</h6>
+        @include('partials/entity-list', ['entities' => $entities])
+        @if ($hasNextPage)
+            <a href="{{ $nextPageLink }}" class="button">{{ trans('entities.search_more') }}</a>
+        @endif
+    </div>
 @stop
\ No newline at end of file
diff --git a/resources/views/settings/index.blade.php b/resources/views/settings/index.blade.php
index c736bc24e..18d8b1307 100644
--- a/resources/views/settings/index.blade.php
+++ b/resources/views/settings/index.blade.php
@@ -1,128 +1,141 @@
-@extends('base')
-
-@section('content')
+@extends('simple-layout')
 
+@section('toolbar')
     @include('settings/navbar', ['selected' => 'settings'])
+@stop
 
-<div class="container small settings-container">
+@section('body')
+<div class="container small">
 
-    <h1>{{ trans('settings.settings') }}</h1>
+    <div class="text-right text-muted container">
+        <br>
+        BookStack @if(strpos($version, 'v') !== 0) version @endif {{ $version }}
+    </div>
 
-    <form action="{{ baseUrl("/settings") }}" method="POST">
-        {!! csrf_field() !!}
+    <div class="card">
+        <h3><i class="zmdi zmdi-settings-square"></i> {{ trans('settings.app_settings') }}</h3>
+        <div class="body">
+            <form action="{{ baseUrl("/settings") }}" method="POST">
+            {!! csrf_field() !!}
+                <div class="row">
 
-        <h3>{{ trans('settings.app_settings') }}</h3>
+                    <div class="col-md-6">
+                        <div class="form-group">
+                            <label for="setting-app-name">{{ trans('settings.app_name') }}</label>
+                            <p class="small">{{ trans('settings.app_name_desc') }}</p>
+                            <input type="text" value="{{ setting('app-name', 'BookStack') }}" name="setting-app-name" id="setting-app-name">
+                        </div>
+                        <div class="form-group">
+                            <label>{{ trans('settings.app_name_header') }}</label>
+                            @include('components.toggle-switch', ['name' => 'setting-app-name-header', 'value' => setting('app-name-header')])
+                        </div>
+                        <div class="form-group">
+                            <label for="setting-app-public">{{ trans('settings.app_public_viewing') }}</label>
+                            @include('components.toggle-switch', ['name' => 'setting-app-public', 'value' => setting('app-public')])
+                        </div>
+                        <div class="form-group">
+                            <label>{{ trans('settings.app_secure_images') }}</label>
+                            <p class="small">{{ trans('settings.app_secure_images_desc') }}</p>
+                            @include('components.toggle-switch', ['name' => 'setting-app-secure-images', 'value' => setting('app-secure-images')])
+                        </div>
+                        <div class="form-group">
+                            <label for="setting-app-editor">{{ trans('settings.app_editor') }}</label>
+                            <p class="small">{{ trans('settings.app_editor_desc') }}</p>
+                            <select name="setting-app-editor" id="setting-app-editor">
+                                <option @if(setting('app-editor') === 'wysiwyg') selected @endif value="wysiwyg">WYSIWYG</option>
+                                <option @if(setting('app-editor') === 'markdown') selected @endif value="markdown">Markdown</option>
+                            </select>
+                        </div>
+                    </div>
 
-        <div class="row">
+                    <div class="col-md-6">
+                        <div class="form-group" id="logo-control">
+                            <label for="setting-app-logo">{{ trans('settings.app_logo') }}</label>
+                            <p class="small">{!! trans('settings.app_logo_desc') !!}</p>
+
+                            @include('components.image-picker', [
+                                'resizeHeight' => '43',
+                                'resizeWidth' => '200',
+                                'showRemove' => true,
+                                'defaultImage' => baseUrl('/logo.png'),
+                                'currentImage' => setting('app-logo'),
+                                'name' => 'setting-app-logo',
+                                'imageClass' => 'logo-image',
+                                'currentId' => false
+                            ])
+
+                        </div>
+                        <div class="form-group" id="color-control">
+                            <label for="setting-app-color">{{ trans('settings.app_primary_color') }}</label>
+                            <p class="small">{!! trans('settings.app_primary_color_desc') !!}</p>
+                            <input  type="text" value="{{ setting('app-color', '') }}" name="setting-app-color" id="setting-app-color" placeholder="#0288D1">
+                            <input  type="hidden" value="{{ setting('app-color-light', '') }}" name="setting-app-color-light" id="setting-app-color-light" placeholder="rgba(21, 101, 192, 0.15)">
+                        </div>
+                    </div>
+
+                </div>
 
-            <div class="col-md-6">
                 <div class="form-group">
-                    <label for="setting-app-name">{{ trans('settings.app_name') }}</label>
-                    <p class="small">{{ trans('settings.app_name_desc') }}</p>
-                    <input type="text" value="{{ setting('app-name', 'BookStack') }}" name="setting-app-name" id="setting-app-name">
+                    <label for="setting-app-custom-head">{{ trans('settings.app_custom_html') }}</label>
+                    <p class="small">{{ trans('settings.app_custom_html_desc') }}</p>
+                    <textarea name="setting-app-custom-head" id="setting-app-custom-head">{{ setting('app-custom-head', '') }}</textarea>
                 </div>
-                <div class="form-group">
-                    <label>{{ trans('settings.app_name_header') }}</label>
-                    @include('components.toggle-switch', ['name' => 'setting-app-name-header', 'value' => setting('app-name-header')])
-                </div>
-                <div class="form-group">
-                    <label for="setting-app-public">{{ trans('settings.app_public_viewing') }}</label>
-                    @include('components.toggle-switch', ['name' => 'setting-app-public', 'value' => setting('app-public')])
-                </div>
-                <div class="form-group">
-                    <label>{{ trans('settings.app_secure_images') }}</label>
-                    <p class="small">{{ trans('settings.app_secure_images_desc') }}</p>
-                    @include('components.toggle-switch', ['name' => 'setting-app-secure-images', 'value' => setting('app-secure-images')])
-                </div>
-                <div class="form-group">
-                    <label for="setting-app-editor">{{ trans('settings.app_editor') }}</label>
-                    <p class="small">{{ trans('settings.app_editor_desc') }}</p>
-                    <select name="setting-app-editor" id="setting-app-editor">
-                        <option @if(setting('app-editor') === 'wysiwyg') selected @endif value="wysiwyg">WYSIWYG</option>
-                        <option @if(setting('app-editor') === 'markdown') selected @endif value="markdown">Markdown</option>
-                    </select>
-                </div>
-            </div>
-
-            <div class="col-md-6">
-                <div class="form-group" id="logo-control">
-                    <label for="setting-app-logo">{{ trans('settings.app_logo') }}</label>
-                    <p class="small">{!! trans('settings.app_logo_desc') !!}</p>
-
-                    @include('components.image-picker', [
-                        'resizeHeight' => '43',
-                        'resizeWidth' => '200',
-                        'showRemove' => true,
-                        'defaultImage' => baseUrl('/logo.png'),
-                        'currentImage' => setting('app-logo'),
-                        'name' => 'setting-app-logo',
-                        'imageClass' => 'logo-image',
-                        'currentId' => false
-                    ])
 
+                <div class="form-group text-right">
+                    <button type="submit" class="button pos">{{ trans('settings.settings_save') }}</button>
                 </div>
-                <div class="form-group" id="color-control">
-                    <label for="setting-app-color">{{ trans('settings.app_primary_color') }}</label>
-                    <p class="small">{!! trans('settings.app_primary_color_desc') !!}</p>
-                    <input  type="text" value="{{ setting('app-color', '') }}" name="setting-app-color" id="setting-app-color" placeholder="#0288D1">
-                    <input  type="hidden" value="{{ setting('app-color-light', '') }}" name="setting-app-color-light" id="setting-app-color-light" placeholder="rgba(21, 101, 192, 0.15)">
-                </div>
-            </div>
-
+            </form>
         </div>
+    </div>
 
-        <div class="form-group">
-            <label for="setting-app-custom-head">{{ trans('settings.app_custom_html') }}</label>
-            <p class="small">{{ trans('settings.app_custom_html_desc') }}</p>
-            <textarea name="setting-app-custom-head" id="setting-app-custom-head">{{ setting('app-custom-head', '') }}</textarea>
-        </div>
+    <p>&nbsp;</p>
 
-        <hr class="margin-top">
+    <div class="card">
+        <h3><i class="zmdi zmdi-accounts-add"></i> {{ trans('settings.reg_settings') }}</h3>
+        <div class="body">
+            <form action="{{ baseUrl("/settings") }}" method="POST">
+                {!! csrf_field() !!}
 
-        <h3>{{ trans('settings.reg_settings') }}</h3>
-
-        <div class="row">
-            <div class="col-md-6">
-                <div class="form-group">
-                    <label for="setting-registration-enabled">{{ trans('settings.reg_allow') }}</label>
-                    @include('components.toggle-switch', ['name' => 'setting-registration-enabled', 'value' => setting('registration-enabled')])
-                </div>
-                <div class="form-group">
-                    <label for="setting-registration-role">{{ trans('settings.reg_default_role') }}</label>
-                    <select id="setting-registration-role" name="setting-registration-role" @if($errors->has('setting-registration-role')) class="neg" @endif>
-                        @foreach(\BookStack\Role::all() as $role)
-                            <option value="{{$role->id}}" data-role-name="{{ $role->name }}"
-                                    @if(setting('registration-role', \BookStack\Role::first()->id) == $role->id) selected @endif
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="form-group">
+                            <label for="setting-registration-enabled">{{ trans('settings.reg_allow') }}</label>
+                            @include('components.toggle-switch', ['name' => 'setting-registration-enabled', 'value' => setting('registration-enabled')])
+                        </div>
+                        <div class="form-group">
+                            <label for="setting-registration-role">{{ trans('settings.reg_default_role') }}</label>
+                            <select id="setting-registration-role" name="setting-registration-role" @if($errors->has('setting-registration-role')) class="neg" @endif>
+                                @foreach(\BookStack\Role::all() as $role)
+                                    <option value="{{$role->id}}" data-role-name="{{ $role->name }}"
+                                            @if(setting('registration-role', \BookStack\Role::first()->id) == $role->id) selected @endif
                                     >
-                                {{ $role->display_name }}
-                            </option>
-                        @endforeach
-                    </select>
+                                        {{ $role->display_name }}
+                                    </option>
+                                @endforeach
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label for="setting-registration-confirmation">{{ trans('settings.reg_confirm_email') }}</label>
+                            <p class="small">{{ trans('settings.reg_confirm_email_desc') }}</p>
+                            @include('components.toggle-switch', ['name' => 'setting-registration-confirmation', 'value' => setting('registration-confirmation')])
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="form-group">
+                            <label for="setting-registration-restrict">{{ trans('settings.reg_confirm_restrict_domain') }}</label>
+                            <p class="small">{!! trans('settings.reg_confirm_restrict_domain_desc') !!}</p>
+                            <input type="text" id="setting-registration-restrict" name="setting-registration-restrict" placeholder="{{ trans('settings.reg_confirm_restrict_domain_placeholder') }}" value="{{ setting('registration-restrict', '') }}">
+                        </div>
+                    </div>
                 </div>
-                <div class="form-group">
-                    <label for="setting-registration-confirmation">{{ trans('settings.reg_confirm_email') }}</label>
-                    <p class="small">{{ trans('settings.reg_confirm_email_desc') }}</p>
-                    @include('components.toggle-switch', ['name' => 'setting-registration-confirmation', 'value' => setting('registration-confirmation')])
-                </div>
-            </div>
-            <div class="col-md-6">
-                <div class="form-group">
-                    <label for="setting-registration-restrict">{{ trans('settings.reg_confirm_restrict_domain') }}</label>
-                    <p class="small">{!! trans('settings.reg_confirm_restrict_domain_desc') !!}</p>
-                    <input type="text" id="setting-registration-restrict" name="setting-registration-restrict" placeholder="{{ trans('settings.reg_confirm_restrict_domain_placeholder') }}" value="{{ setting('registration-restrict', '') }}">
-                </div>
-            </div>
-        </div>
 
-        <hr class="margin-top">
-
-        <div class="form-group">
-            <span class="float right muted">
-                BookStack @if(strpos($version, 'v') !== 0) version @endif {{ $version }}
-            </span>
-            <button type="submit" class="button pos">{{ trans('settings.settings_save') }}</button>
+                <div class="form-group text-right">
+                    <button type="submit" class="button pos">{{ trans('settings.settings_save') }}</button>
+                </div>
+            </form>
         </div>
-    </form>
+    </div>
+
 
 </div>
 
diff --git a/resources/views/settings/navbar.blade.php b/resources/views/settings/navbar.blade.php
index 15000b1cf..32ac4f426 100644
--- a/resources/views/settings/navbar.blade.php
+++ b/resources/views/settings/navbar.blade.php
@@ -1,18 +1,12 @@
 
-<div class="faded-small toolbar">
-    <div class="container">
-        <div class="row">
-            <div class="col-md-12 setting-nav nav-tabs">
-                @if($currentUser->can('settings-manage'))
-                    <a href="{{ baseUrl('/settings') }}" @if($selected == 'settings') class="selected text-button" @endif><i class="zmdi zmdi-settings"></i>{{ trans('settings.settings') }}</a>
-                @endif
-                @if($currentUser->can('users-manage'))
-                    <a href="{{ baseUrl('/settings/users') }}" @if($selected == 'users') class="selected text-button" @endif><i class="zmdi zmdi-accounts"></i>{{ trans('settings.users') }}</a>
-                @endif
-                @if($currentUser->can('user-roles-manage'))
-                    <a href="{{ baseUrl('/settings/roles') }}" @if($selected == 'roles') class="selected text-button" @endif><i class="zmdi zmdi-lock-open"></i>{{ trans('settings.roles') }}</a>
-                @endif
-            </div>
-        </div>
-    </div>
+<div class="col-md-12 setting-nav nav-tabs">
+    @if($currentUser->can('settings-manage'))
+        <a href="{{ baseUrl('/settings') }}" @if($selected == 'settings') class="selected text-button" @endif><i class="zmdi zmdi-settings"></i>{{ trans('settings.settings') }}</a>
+    @endif
+    @if($currentUser->can('users-manage'))
+        <a href="{{ baseUrl('/settings/users') }}" @if($selected == 'users') class="selected text-button" @endif><i class="zmdi zmdi-accounts"></i>{{ trans('settings.users') }}</a>
+    @endif
+    @if($currentUser->can('user-roles-manage'))
+        <a href="{{ baseUrl('/settings/roles') }}" @if($selected == 'roles') class="selected text-button" @endif><i class="zmdi zmdi-lock-open"></i>{{ trans('settings.roles') }}</a>
+    @endif
 </div>
\ No newline at end of file
diff --git a/resources/views/settings/roles/create.blade.php b/resources/views/settings/roles/create.blade.php
index bae42540c..e61922da6 100644
--- a/resources/views/settings/roles/create.blade.php
+++ b/resources/views/settings/roles/create.blade.php
@@ -1,15 +1,17 @@
-@extends('base')
-
-@section('content')
+@extends('simple-layout')
 
+@section('toolbar')
     @include('settings/navbar', ['selected' => 'roles'])
+@stop
 
-    <div class="container">
-        <h1>{{ trans('settings.role_create') }}</h1>
+@section('body')
 
-        <form action="{{ baseUrl("/settings/roles/new") }}" method="POST">
-            @include('settings/roles/form')
-        </form>
-    </div>
+    <form action="{{ baseUrl("/settings/roles/new") }}" method="POST">
+        <div class="container">
+            <div class="row">
+                @include('settings/roles/form', ['title' => trans('settings.role_create'), 'icon' => 'plus'])
+            </div>
+        </div>
+    </form>
 
 @stop
diff --git a/resources/views/settings/roles/delete.blade.php b/resources/views/settings/roles/delete.blade.php
index 0b8e1626f..8002cd4bd 100644
--- a/resources/views/settings/roles/delete.blade.php
+++ b/resources/views/settings/roles/delete.blade.php
@@ -1,28 +1,36 @@
-@extends('base')
-
-@section('content')
+@extends('simple-layout')
 
+@section('toolbar')
     @include('settings/navbar', ['selected' => 'roles'])
-
-    <div class="container small" ng-non-bindable>
-        <h1>{{ trans('settings.role_delete') }}</h1>
-        <p>{{ trans('settings.role_delete_confirm', ['roleName' => $role->display_name]) }}</p>
-
-        <form action="{{ baseUrl("/settings/roles/delete/{$role->id}") }}" method="POST">
-            {!! csrf_field() !!}
-            <input type="hidden" name="_method" value="DELETE">
-
-            @if($role->users->count() > 0)
-            <div class="form-group">
-                    <p>{{ trans('settings.role_delete_users_assigned', ['userCount' => $role->users->count()]) }}</p>
-                    @include('form/role-select', ['options' => $roles, 'name' => 'migration_role_id'])
-            </div>
-            @endif
-
-            <p class="text-neg">{{ trans('settings.role_delete_sure') }}</p>
-            <a href="{{ baseUrl("/settings/roles/{$role->id}") }}" class="button muted">{{ trans('common.cancel') }}</a>
-            <button type="submit" class="button neg">{{ trans('common.confirm') }}</button>
-        </form>
-    </div>
-
+@stop
+
+@section('body')
+    <div class="container small" ng-non-bindable>
+        <p>&nbsp;</p>
+        <div class="card">
+            <h3><i class="zmdi zmdi-delete"></i> {{ trans('settings.role_delete') }}</h3>
+            <div class="body">
+                <p>{{ trans('settings.role_delete_confirm', ['roleName' => $role->display_name]) }}</p>
+
+                <form action="{{ baseUrl("/settings/roles/delete/{$role->id}") }}" method="POST">
+                    {!! csrf_field() !!}
+                    <input type="hidden" name="_method" value="DELETE">
+
+                    @if($role->users->count() > 0)
+                        <div class="form-group">
+                            <p>{{ trans('settings.role_delete_users_assigned', ['userCount' => $role->users->count()]) }}</p>
+                            @include('form/role-select', ['options' => $roles, 'name' => 'migration_role_id'])
+                        </div>
+                    @endif
+
+                    <p class="text-neg">{{ trans('settings.role_delete_sure') }}</p>
+                    <div class="form-group">
+                        <a href="{{ baseUrl("/settings/roles/{$role->id}") }}" class="button outline">{{ trans('common.cancel') }}</a>
+                        <button type="submit" class="button neg">{{ trans('common.confirm') }}</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+    </div>
 @stop
diff --git a/resources/views/settings/roles/edit.blade.php b/resources/views/settings/roles/edit.blade.php
index b46b64663..01ba53383 100644
--- a/resources/views/settings/roles/edit.blade.php
+++ b/resources/views/settings/roles/edit.blade.php
@@ -1,24 +1,17 @@
-@extends('base')
-
-@section('content')
+@extends('simple-layout')
 
+@section('toolbar')
     @include('settings/navbar', ['selected' => 'roles'])
+@stop
 
-    <div class="container">
-        <div class="row">
-            <div class="col-sm-6">
-                <h1>{{ trans('settings.role_edit') }}</h1>
-            </div>
-            <div class="col-sm-6">
-                <p></p>
-                <a href="{{ baseUrl("/settings/roles/delete/{$role->id}") }}" class="button neg float right">{{ trans('settings.role_delete') }}</a>
+@section('body')
+
+    <form action="{{ baseUrl("/settings/roles/{$role->id}") }}" method="POST">
+        <input type="hidden" name="_method" value="PUT">
+        <div class="container">
+            <div class="row">
+                @include('settings/roles/form', ['model' => $role, 'title' => trans('settings.role_edit'), 'icon' => 'edit'])
             </div>
         </div>
-
-        <form action="{{ baseUrl("/settings/roles/{$role->id}") }}" method="POST">
-            <input type="hidden" name="_method" value="PUT">
-            @include('settings/roles/form', ['model' => $role])
-        </form>
-    </div>
-
+    </form>
 @stop
diff --git a/resources/views/settings/roles/form.blade.php b/resources/views/settings/roles/form.blade.php
index 02ef525ea..b63a99259 100644
--- a/resources/views/settings/roles/form.blade.php
+++ b/resources/views/settings/roles/form.blade.php
@@ -1,169 +1,175 @@
 {!! csrf_field() !!}
 
-<div class="row">
+<div class="col-md-9">
+    <div class="card">
+        <h3><i class="zmdi zmdi-{{$icon}}"></i> {{$title}}</h3>
+        <div class="body">
+            <div class="row">
+                <div class="col-md-5">
+                    <h5>{{ trans('settings.role_details') }}</h5>
+                    <div class="form-group">
+                        <label for="name">{{ trans('settings.role_name') }}</label>
+                        @include('form/text', ['name' => 'display_name'])
+                    </div>
+                    <div class="form-group">
+                        <label for="name">{{ trans('settings.role_desc') }}</label>
+                        @include('form/text', ['name' => 'description'])
+                    </div>
+                    <h5>{{ trans('settings.role_system') }}</h5>
+                    <label>@include('settings/roles/checkbox', ['permission' => 'users-manage']) {{ trans('settings.role_manage_users') }}</label>
+                    <label>@include('settings/roles/checkbox', ['permission' => 'user-roles-manage']) {{ trans('settings.role_manage_roles') }}</label>
+                    <label>@include('settings/roles/checkbox', ['permission' => 'restrictions-manage-all']) {{ trans('settings.role_manage_entity_permissions') }}</label>
+                    <label>@include('settings/roles/checkbox', ['permission' => 'restrictions-manage-own']) {{ trans('settings.role_manage_own_entity_permissions') }}</label>
+                    <label>@include('settings/roles/checkbox', ['permission' => 'settings-manage']) {{ trans('settings.role_manage_settings') }}</label>
+                </div>
 
-    <div class="col-md-9">
-        <div class="row">
-            <div class="col-md-5">
-                <h3>{{ trans('settings.role_details') }}</h3>
-                <div class="form-group">
-                    <label for="name">{{ trans('settings.role_name') }}</label>
-                    @include('form/text', ['name' => 'display_name'])
+                <div class="col-md-6">
+
+                    <h5>{{ trans('settings.role_asset') }}</h5>
+                    <p>{{ trans('settings.role_asset_desc') }}</p>
+
+                    <table class="table">
+                        <tr>
+                            <th width="20%"></th>
+                            <th width="20%">{{ trans('common.create') }}</th>
+                            <th width="20%">{{ trans('common.view') }}</th>
+                            <th width="20%">{{ trans('common.edit') }}</th>
+                            <th width="20%">{{ trans('common.delete') }}</th>
+                        </tr>
+                        <tr>
+                            <td>{{ trans('entities.books') }}</td>
+                            <td>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'book-create-all']) {{ trans('settings.role_all') }}</label>
+                            </td>
+                            <td>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'book-view-own']) {{ trans('settings.role_own') }}</label>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'book-view-all']) {{ trans('settings.role_all') }}</label>
+                            </td>
+                            <td>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'book-update-own']) {{ trans('settings.role_own') }}</label>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'book-update-all']) {{ trans('settings.role_all') }}</label>
+                            </td>
+                            <td>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'book-delete-own']) {{ trans('settings.role_own') }}</label>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'book-delete-all']) {{ trans('settings.role_all') }}</label>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>{{ trans('entities.chapters') }}</td>
+                            <td>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'chapter-create-own']) {{ trans('settings.role_own') }}</label>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'chapter-create-all']) {{ trans('settings.role_all') }}</label>
+                            </td>
+                            <td>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'chapter-view-own']) {{ trans('settings.role_own') }}</label>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'chapter-view-all']) {{ trans('settings.role_all') }}</label>
+                            </td>
+                            <td>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'chapter-update-own']) {{ trans('settings.role_own') }}</label>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'chapter-update-all']) {{ trans('settings.role_all') }}</label>
+                            </td>
+                            <td>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'chapter-delete-own']) {{ trans('settings.role_own') }}</label>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'chapter-delete-all']) {{ trans('settings.role_all') }}</label>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>{{ trans('entities.pages') }}</td>
+                            <td>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'page-create-own']) {{ trans('settings.role_own') }}</label>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'page-create-all']) {{ trans('settings.role_all') }}</label>
+                            </td>
+                            <td>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'page-view-own']) {{ trans('settings.role_own') }}</label>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'page-view-all']) {{ trans('settings.role_all') }}</label>
+                            </td>
+                            <td>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'page-update-own']) {{ trans('settings.role_own') }}</label>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'page-update-all']) {{ trans('settings.role_all') }}</label>
+                            </td>
+                            <td>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'page-delete-own']) {{ trans('settings.role_own') }}</label>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'page-delete-all']) {{ trans('settings.role_all') }}</label>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>{{ trans('entities.images') }}</td>
+                            <td>@include('settings/roles/checkbox', ['permission' => 'image-create-all'])</td>
+                            <td style="line-height:1.2;"><small class="faded">{{ trans('settings.role_controlled_by_asset') }}</small></td>
+                            <td>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'image-update-own']) {{ trans('settings.role_own') }}</label>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'image-update-all']) {{ trans('settings.role_all') }}</label>
+                            </td>
+                            <td>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'image-delete-own']) {{ trans('settings.role_own') }}</label>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'image-delete-all']) {{ trans('settings.role_all') }}</label>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>{{ trans('entities.attachments') }}</td>
+                            <td>@include('settings/roles/checkbox', ['permission' => 'attachment-create-all'])</td>
+                            <td style="line-height:1.2;"><small class="faded">{{ trans('settings.role_controlled_by_asset') }}</small></td>
+                            <td>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'attachment-update-own']) {{ trans('settings.role_own') }}</label>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'attachment-update-all']) {{ trans('settings.role_all') }}</label>
+                            </td>
+                            <td>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'attachment-delete-own']) {{ trans('settings.role_own') }}</label>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'attachment-delete-all']) {{ trans('settings.role_all') }}</label>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>{{ trans('entities.comments') }}</td>
+                            <td>@include('settings/roles/checkbox', ['permission' => 'comment-create-all'])</td>
+                            <td style="line-height:1.2;"><small class="faded">{{ trans('settings.role_controlled_by_asset') }}</small></td>
+                            <td>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'comment-update-own']) {{ trans('settings.role_own') }}</label>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'comment-update-all']) {{ trans('settings.role_all') }}</label>
+                            </td>
+                            <td>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'comment-delete-own']) {{ trans('settings.role_own') }}</label>
+                                <label>@include('settings/roles/checkbox', ['permission' => 'comment-delete-all']) {{ trans('settings.role_all') }}</label>
+                            </td>
+                        </tr>
+                    </table>
                 </div>
-                <div class="form-group">
-                    <label for="name">{{ trans('settings.role_desc') }}</label>
-                    @include('form/text', ['name' => 'description'])
-                </div>
-                <h3>{{ trans('settings.role_system') }}</h3>
-                <label>@include('settings/roles/checkbox', ['permission' => 'users-manage']) {{ trans('settings.role_manage_users') }}</label>
-                <label>@include('settings/roles/checkbox', ['permission' => 'user-roles-manage']) {{ trans('settings.role_manage_roles') }}</label>
-                <label>@include('settings/roles/checkbox', ['permission' => 'restrictions-manage-all']) {{ trans('settings.role_manage_entity_permissions') }}</label>
-                <label>@include('settings/roles/checkbox', ['permission' => 'restrictions-manage-own']) {{ trans('settings.role_manage_own_entity_permissions') }}</label>
-                <label>@include('settings/roles/checkbox', ['permission' => 'settings-manage']) {{ trans('settings.role_manage_settings') }}</label>
             </div>
-
-            <div class="col-md-6">
-
-                <h3>{{ trans('settings.role_asset') }}</h3>
-                <p>{{ trans('settings.role_asset_desc') }}</p>
-
-                <table class="table">
-                    <tr>
-                        <th width="20%"></th>
-                        <th width="20%">{{ trans('common.create') }}</th>
-                        <th width="20%">{{ trans('common.view') }}</th>
-                        <th width="20%">{{ trans('common.edit') }}</th>
-                        <th width="20%">{{ trans('common.delete') }}</th>
-                    </tr>
-                    <tr>
-                        <td>{{ trans('entities.books') }}</td>
-                        <td>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'book-create-all']) {{ trans('settings.role_all') }}</label>
-                        </td>
-                        <td>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'book-view-own']) {{ trans('settings.role_own') }}</label>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'book-view-all']) {{ trans('settings.role_all') }}</label>
-                        </td>
-                        <td>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'book-update-own']) {{ trans('settings.role_own') }}</label>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'book-update-all']) {{ trans('settings.role_all') }}</label>
-                        </td>
-                        <td>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'book-delete-own']) {{ trans('settings.role_own') }}</label>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'book-delete-all']) {{ trans('settings.role_all') }}</label>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>{{ trans('entities.chapters') }}</td>
-                        <td>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'chapter-create-own']) {{ trans('settings.role_own') }}</label>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'chapter-create-all']) {{ trans('settings.role_all') }}</label>
-                        </td>
-                        <td>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'chapter-view-own']) {{ trans('settings.role_own') }}</label>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'chapter-view-all']) {{ trans('settings.role_all') }}</label>
-                        </td>
-                        <td>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'chapter-update-own']) {{ trans('settings.role_own') }}</label>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'chapter-update-all']) {{ trans('settings.role_all') }}</label>
-                        </td>
-                        <td>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'chapter-delete-own']) {{ trans('settings.role_own') }}</label>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'chapter-delete-all']) {{ trans('settings.role_all') }}</label>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>{{ trans('entities.pages') }}</td>
-                        <td>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'page-create-own']) {{ trans('settings.role_own') }}</label>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'page-create-all']) {{ trans('settings.role_all') }}</label>
-                        </td>
-                        <td>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'page-view-own']) {{ trans('settings.role_own') }}</label>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'page-view-all']) {{ trans('settings.role_all') }}</label>
-                        </td>
-                        <td>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'page-update-own']) {{ trans('settings.role_own') }}</label>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'page-update-all']) {{ trans('settings.role_all') }}</label>
-                        </td>
-                        <td>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'page-delete-own']) {{ trans('settings.role_own') }}</label>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'page-delete-all']) {{ trans('settings.role_all') }}</label>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>{{ trans('entities.images') }}</td>
-                        <td>@include('settings/roles/checkbox', ['permission' => 'image-create-all'])</td>
-                        <td style="line-height:1.2;"><small class="faded">{{ trans('settings.role_controlled_by_asset') }}</small></td>
-                        <td>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'image-update-own']) {{ trans('settings.role_own') }}</label>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'image-update-all']) {{ trans('settings.role_all') }}</label>
-                        </td>
-                        <td>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'image-delete-own']) {{ trans('settings.role_own') }}</label>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'image-delete-all']) {{ trans('settings.role_all') }}</label>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>{{ trans('entities.attachments') }}</td>
-                        <td>@include('settings/roles/checkbox', ['permission' => 'attachment-create-all'])</td>
-                        <td style="line-height:1.2;"><small class="faded">{{ trans('settings.role_controlled_by_asset') }}</small></td>
-                        <td>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'attachment-update-own']) {{ trans('settings.role_own') }}</label>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'attachment-update-all']) {{ trans('settings.role_all') }}</label>
-                        </td>
-                        <td>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'attachment-delete-own']) {{ trans('settings.role_own') }}</label>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'attachment-delete-all']) {{ trans('settings.role_all') }}</label>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>{{ trans('entities.comments') }}</td>
-                        <td>@include('settings/roles/checkbox', ['permission' => 'comment-create-all'])</td>
-                        <td style="line-height:1.2;"><small class="faded">{{ trans('settings.role_controlled_by_asset') }}</small></td>
-                        <td>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'comment-update-own']) {{ trans('settings.role_own') }}</label>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'comment-update-all']) {{ trans('settings.role_all') }}</label>
-                        </td>
-                        <td>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'comment-delete-own']) {{ trans('settings.role_own') }}</label>
-                            <label>@include('settings/roles/checkbox', ['permission' => 'comment-delete-all']) {{ trans('settings.role_all') }}</label>
-                        </td>
-                    </tr>
-                </table>
+            <div class="form-group text-right">
+                <a href="{{ baseUrl("/settings/roles") }}" class="button outline">{{ trans('common.cancel') }}</a>
+                @if (isset($role) && $role->id)
+                    <a href="{{ baseUrl("/settings/roles/delete/{$role->id}") }}" class="button neg">{{ trans('settings.role_delete') }}</a>
+                @endif
+                <button type="submit" class="button pos">{{ trans('settings.role_save') }}</button>
             </div>
         </div>
-        <a href="{{ baseUrl("/settings/roles") }}" class="button muted">{{ trans('common.cancel') }}</a>
-        <button type="submit" class="button pos">{{ trans('settings.role_save') }}</button>
     </div>
-    <div class="col-md-3">
-        <h3>{{ trans('settings.role_users') }}</h3>
-
-        @if(isset($role) && count($role->users) > 0)
-        <table class="list-table">
-            @foreach($role->users as $user)
-                <tr>
-                    <td style="line-height: 0;"><img class="avatar small" src="{{ $user->getAvatar(40) }}" alt="{{ $user->name }}"></td>
-                    <td>
-                        @if(userCan('users-manage') || $currentUser->id == $user->id)
-                            <a href="{{ baseUrl("/settings/users/{$user->id}") }}">
-                                @endif
-                                {{ $user->name }}
+</div>
+<div class="col-md-3">
+    <div class="card">
+        <h3><i class="zmdi zmdi-accounts"></i> {{ trans('settings.role_users') }}</h3>
+        <div class="body">
+            @if(isset($role) && count($role->users) > 0)
+                <table class="list-table">
+                    @foreach($role->users as $user)
+                        <tr>
+                            <td style="line-height: 0;"><img class="avatar small" src="{{ $user->getAvatar(40) }}" alt="{{ $user->name }}"></td>
+                            <td>
                                 @if(userCan('users-manage') || $currentUser->id == $user->id)
-                            </a>
-                        @endif
-                    </td>
-                </tr>
-            @endforeach
-        </table>
-        @else
-            <p class="text-muted">
-                {{ trans('settings.role_users_none') }}
-            </p>
-        @endif
-
+                                    <a href="{{ baseUrl("/settings/users/{$user->id}") }}">
+                                        @endif
+                                        {{ $user->name }}
+                                        @if(userCan('users-manage') || $currentUser->id == $user->id)
+                                    </a>
+                                @endif
+                            </td>
+                        </tr>
+                    @endforeach
+                </table>
+            @else
+                <p class="text-muted">
+                    {{ trans('settings.role_users_none') }}
+                </p>
+            @endif
+        </div>
     </div>
-
-
-
 </div>
\ No newline at end of file
diff --git a/resources/views/settings/roles/index.blade.php b/resources/views/settings/roles/index.blade.php
index c24254946..6cde24539 100644
--- a/resources/views/settings/roles/index.blade.php
+++ b/resources/views/settings/roles/index.blade.php
@@ -1,35 +1,36 @@
-@extends('base')
-
-@section('content')
+@extends('simple-layout')
 
+@section('toolbar')
     @include('settings/navbar', ['selected' => 'roles'])
+@stop
+
+@section('body')
 
     <div class="container small">
+        <p>&nbsp;</p>
+        <div class="card">
+            <h3><i class="zmdi zmdi-lock-open"></i> {{ trans('settings.role_user_roles') }}</h3>
+            <div class="body">
+                <table class="table">
+                    <tr>
+                        <th>{{ trans('settings.role_name') }}</th>
+                        <th></th>
+                        <th class="text-center">{{ trans('settings.users') }}</th>
+                    </tr>
+                    @foreach($roles as $role)
+                        <tr>
+                            <td><a href="{{ baseUrl("/settings/roles/{$role->id}") }}">{{ $role->display_name }}</a></td>
+                            <td>{{ $role->description }}</td>
+                            <td class="text-center">{{ $role->users->count() }}</td>
+                        </tr>
+                    @endforeach
+                </table>
 
-        <div class="row action-header">
-            <div class="col-sm-8">
-                <h1>{{ trans('settings.role_user_roles') }}</h1>
-            </div>
-            <div class="col-sm-4">
-                <p></p>
-                <a href="{{ baseUrl("/settings/roles/new") }}" class="button float right pos"><i class="zmdi zmdi-lock-open"></i>{{ trans('settings.role_create') }}</a>
+                <div class="form-group">
+                    <a href="{{ baseUrl("/settings/roles/new") }}" class="button pos">{{ trans('settings.role_create') }}</a>
+                </div>
             </div>
         </div>
-
-        <table class="table">
-            <tr>
-                <th>{{ trans('settings.role_name') }}</th>
-                <th></th>
-                <th class="text-center">{{ trans('settings.users') }}</th>
-            </tr>
-            @foreach($roles as $role)
-                <tr>
-                    <td><a href="{{ baseUrl("/settings/roles/{$role->id}") }}">{{ $role->display_name }}</a></td>
-                    <td>{{ $role->description }}</td>
-                    <td class="text-center">{{ $role->users->count() }}</td>
-                </tr>
-            @endforeach
-        </table>
     </div>
 
 @stop
diff --git a/resources/views/users/create.blade.php b/resources/views/users/create.blade.php
index e0019e618..90ceac9b8 100644
--- a/resources/views/users/create.blade.php
+++ b/resources/views/users/create.blade.php
@@ -1,31 +1,26 @@
-@extends('base')
+@extends('simple-layout')
 
+@section('toolbar')
+    @include('settings/navbar', ['selected' => 'users'])
+@stop
 
-@section('content')
+@section('body')
 
-    <div class="faded-small toolbar">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-12 faded">
-                    <div class="breadcrumbs">
-                        <a href="{{ baseUrl('/settings/users') }}" class="text-button"><i class="zmdi zmdi-accounts"></i>{{ trans('settings.users') }}</a>
+    <div class="container small" ng-non-bindable>
+        <p>&nbsp;</p>
+        <div class="card">
+            <h3><i class="zmdi zmdi-accounts-add"></i> {{ trans('settings.users_add_new') }}</h3>
+            <div class="body">
+                <form action="{{ baseUrl("/settings/users/create") }}" method="post">
+                    {!! csrf_field() !!}
+                    @include('users/forms/' . $authMethod)
+                    <div class="form-group text-right">
+                        <a href="{{  baseUrl($currentUser->can('users-manage') ? "/settings/users" : "/") }}" class="button outline">{{ trans('common.cancel') }}</a>
+                        <button class="button pos" type="submit">{{ trans('common.save') }}</button>
                     </div>
-                </div>
+                </form>
             </div>
         </div>
     </div>
 
-    <div class="container small" ng-non-bindable>
-        <h1>{{ trans('settings.users_add_new') }}</h1>
-
-        <form action="{{ baseUrl("/settings/users/create") }}" method="post">
-            {!! csrf_field() !!}
-            @include('users/forms/' . $authMethod)
-            <div class="form-group">
-                <a href="{{  baseUrl($currentUser->can('users-manage') ? "/settings/users" : "/") }}" class="button muted">{{ trans('common.cancel') }}</a>
-                <button class="button pos" type="submit">{{ trans('common.save') }}</button>
-            </div>
-        </form>
-    </div>
-
 @stop
diff --git a/resources/views/users/delete.blade.php b/resources/views/users/delete.blade.php
index 135231a32..a7d4e2476 100644
--- a/resources/views/users/delete.blade.php
+++ b/resources/views/users/delete.blade.php
@@ -1,32 +1,27 @@
-@extends('base')
+@extends('simple-layout')
 
-@section('content')
+@section('toolbar')
+    @include('settings/navbar', ['selected' => 'users'])
+@stop
 
-    <div class="faded-small toolbar">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-12 faded">
-                    <div class="breadcrumbs">
-                        <a href="{{ baseUrl("/settings/users") }}" class="text-button"><i class="zmdi zmdi-accounts"></i>Users</a>
-                        <span class="sep">&raquo;</span>
-                        <a href="{{ baseUrl("/settings/users/{$user->id}") }}" class="text-button"><i class="zmdi zmdi-account"></i>{{ $user->name }}</a>
-                    </div>
-                </div>
+@section('body')
+
+    <div class="container small" ng-non-bindable>
+        <p>&nbsp;</p>
+        <div class="card">
+            <h3><i class="zmdi zmdi-delete"></i> {{ trans('settings.users_delete') }}</h3>
+            <div class="body">
+                <p>{{ trans('settings.users_delete_warning', ['userName' => $user->name]) }}</p>
+                <p class="text-neg">{{ trans('settings.users_delete_confirm') }}</p>
+
+                <form action="{{ baseUrl("/settings/users/{$user->id}") }}" method="POST">
+                    {!! csrf_field() !!}
+                    <input type="hidden" name="_method" value="DELETE">
+                    <a href="{{ baseUrl("/settings/users/{$user->id}") }}" class="button outline">{{ trans('common.cancel') }}</a>
+                    <button type="submit" class="button neg">{{ trans('common.confirm') }}</button>
+                </form>
             </div>
         </div>
     </div>
 
-    <div class="container small" ng-non-bindable>
-        <h1>{{ trans('settings.users_delete') }}</h1>
-        <p>{{ trans('settings.users_delete_warning', ['userName' => $user->name]) }}</p>
-        <p class="text-neg">{{ trans('settings.users_delete_confirm') }}</p>
-
-        <form action="{{ baseUrl("/settings/users/{$user->id}") }}" method="POST">
-            {!! csrf_field() !!}
-            <input type="hidden" name="_method" value="DELETE">
-            <a href="{{ baseUrl("/settings/users/{$user->id}") }}" class="button muted">{{ trans('common.cancel') }}</a>
-            <button type="submit" class="button neg">{{ trans('common.confirm') }}</button>
-        </form>
-    </div>
-
 @stop
diff --git a/resources/views/users/edit.blade.php b/resources/views/users/edit.blade.php
index ff3475194..f860d12fd 100644
--- a/resources/views/users/edit.blade.php
+++ b/resources/views/users/edit.blade.php
@@ -1,80 +1,84 @@
-@extends('base')
-
-
-@section('content')
+@extends('simple-layout')
 
+@section('toolbar')
     @include('settings/navbar', ['selected' => 'users'])
+@stop
+
+@section('body')
 
     <div class="container small">
-        <form action="{{ baseUrl("/settings/users/{$user->id}") }}" method="post">
-            <div class="row">
-                <div class="col-sm-8">
-                    <h1>{{ $user->id === $currentUser->id ? trans('settings.users_edit_profile') : trans('settings.users_edit') }}</h1>
-                </div>
-                <div class="col-sm-4">
-                    <p></p>
-                    @if($authMethod !== 'system')
-                        <a href="{{ baseUrl("/settings/users/{$user->id}/delete") }}" class="neg button float right">{{ trans('settings.users_delete') }}</a>
-                    @endif
-                </div>
-            </div>
-            <div class="row">
-                <div class="col-sm-6" ng-non-bindable>
-                    {!! csrf_field() !!}
-                    <input type="hidden" name="_method" value="put">
-                    @include('users.forms.' . $authMethod, ['model' => $user])
+        <p>&nbsp;</p>
+        <div class="card">
+            <h3><i class="zmdi-edit zmdi"></i> {{ $user->id === $currentUser->id ? trans('settings.users_edit_profile') : trans('settings.users_edit') }}</h3>
+            <div class="body">
+                <form action="{{ baseUrl("/settings/users/{$user->id}") }}" method="post">
+                    <div class="row">
+                        <div class="col-sm-6" ng-non-bindable>
+                            {!! csrf_field() !!}
+                            <input type="hidden" name="_method" value="put">
+                            @include('users.forms.' . $authMethod, ['model' => $user])
 
-                </div>
-                <div class="col-sm-6">
-                    <div class="form-group" id="logo-control">
-                        <label for="user-avatar">{{ trans('settings.users_avatar') }}</label>
-                        <p class="small">{{ trans('settings.users_avatar_desc') }}</p>
+                        </div>
+                        <div class="col-sm-6">
+                            <div class="form-group" id="logo-control">
+                                <label for="user-avatar">{{ trans('settings.users_avatar') }}</label>
+                                <p class="small">{{ trans('settings.users_avatar_desc') }}</p>
 
-                        @include('components.image-picker', [
-                              'resizeHeight' => '512',
-                              'resizeWidth' => '512',
-                              'showRemove' => false,
-                              'defaultImage' => baseUrl('/user_avatar.png'),
-                              'currentImage' => $user->getAvatar(80),
-                              'currentId' => $user->image_id,
-                              'name' => 'image_id',
-                              'imageClass' => 'avatar large'
-                          ])
-                    </div>
-                    <div class="form-group">
-                        <label for="user-language">{{ trans('settings.users_preferred_language') }}</label>
-                        <select name="setting[language]" id="user-language">
-                            @foreach(trans('settings.language_select') as $lang => $label)
-                                <option @if(setting()->getUser($user, 'language') === $lang) selected @endif value="{{ $lang }}">{{ $label }}</option>
-                            @endforeach
-                        </select>
-                    </div>
-                </div>
-            </div>
-            <div class="form-group">
-                <a href="{{  baseUrl($currentUser->can('users-manage') ? "/settings/users" : "/") }}" class="button muted">{{ trans('common.cancel') }}</a>
-                <button class="button pos" type="submit">{{ trans('common.save') }}</button>
-            </div>
-        </form>
-
-        <hr class="margin-top large">
-
-        @if($currentUser->id === $user->id && count($activeSocialDrivers) > 0)
-            <h3>{{ trans('settings.users_social_accounts') }}</h3>
-            <p class="text-muted">{{ trans('settings.users_social_accounts_info') }}</p>
-            <div class="row">
-                @foreach($activeSocialDrivers as $driver => $enabled)
-                    <div class="col-sm-3 col-xs-6 text-center">
-                        <div>@icon($driver, ['width' => 56])</div>
-                        <div>
-                            @if($user->hasSocialAccount($driver))
-                                <a href="{{ baseUrl("/login/service/{$driver}/detach") }}" class="button neg">{{ trans('settings.users_social_disconnect') }}</a>
-                            @else
-                                <a href="{{ baseUrl("/login/service/{$driver}") }}" class="button pos">{{ trans('settings.users_social_connect') }}</a>
-                            @endif
+                                @include('components.image-picker', [
+                                      'resizeHeight' => '512',
+                                      'resizeWidth' => '512',
+                                      'showRemove' => false,
+                                      'defaultImage' => baseUrl('/user_avatar.png'),
+                                      'currentImage' => $user->getAvatar(80),
+                                      'currentId' => $user->image_id,
+                                      'name' => 'image_id',
+                                      'imageClass' => 'avatar large'
+                                  ])
+                            </div>
+                            <div class="form-group">
+                                <label for="user-language">{{ trans('settings.users_preferred_language') }}</label>
+                                <select name="setting[language]" id="user-language">
+                                    @foreach(trans('settings.language_select') as $lang => $label)
+                                        <option @if(setting()->getUser($user, 'language') === $lang) selected @endif value="{{ $lang }}">{{ $label }}</option>
+                                    @endforeach
+                                </select>
+                            </div>
                         </div>
                     </div>
-                @endforeach
+                    <div class="form-group text-right">
+                        <a href="{{  baseUrl($currentUser->can('users-manage') ? "/settings/users" : "/") }}" class="button outline">{{ trans('common.cancel') }}</a>
+                        @if($authMethod !== 'system')
+                            <a href="{{ baseUrl("/settings/users/{$user->id}/delete") }}" class="neg button">{{ trans('settings.users_delete') }}</a>
+                        @endif
+                        <button class="button pos" type="submit">{{ trans('common.save') }}</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        @if($currentUser->id === $user->id && count($activeSocialDrivers) > 0)
+            <div class="card">
+                <h3><i class="zmdi zmdi-sign-in"></i> {{ trans('settings.users_social_accounts') }}</h3>
+                <div class="body">
+                    <p class="text-muted">{{ trans('settings.users_social_accounts_info') }}</p>
+                    <div class="container">
+                        <div class="row">
+                            @foreach($activeSocialDrivers as $driver => $enabled)
+                                <div class="col-sm-4 col-xs-6 text-center">
+                                    <div>@icon($driver, ['width' => 56])</div>
+                                    <div>
+                                        @if($user->hasSocialAccount($driver))
+                                            <a href="{{ baseUrl("/login/service/{$driver}/detach") }}" class="button neg">{{ trans('settings.users_social_disconnect') }}</a>
+                                        @else
+                                            <a href="{{ baseUrl("/login/service/{$driver}") }}" class="button pos">{{ trans('settings.users_social_connect') }}</a>
+                                        @endif
+                                    </div>
+                                    <div>&nbsp;</div>
+                                </div>
+                            @endforeach
+                        </div>
+                    </div>
+                </div>
             </div>
         @endif
 
diff --git a/resources/views/users/index.blade.php b/resources/views/users/index.blade.php
index 3ea5a03f7..26da56858 100644
--- a/resources/views/users/index.blade.php
+++ b/resources/views/users/index.blade.php
@@ -1,80 +1,77 @@
-@extends('base')
-
-
-@section('content')
+@extends('simple-layout')
 
+@section('toolbar')
     @include('settings/navbar', ['selected' => 'users'])
+@stop
 
-
+@section('body')
     <div class="container small" ng-non-bindable>
-        <div class="row action-header">
-            <div class="col-sm-8">
-                <h1>{{ trans('settings.users') }}</h1>
-            </div>
-            <div class="col-sm-4">
-                <p></p>
-                @if(userCan('users-manage'))
-                    <a href="{{ baseUrl("/settings/users/create") }}" class="pos button float right"><i class="zmdi zmdi-account-add"></i>{{ trans('settings.users_add_new') }}</a>
-                @endif
-            </div>
-        </div>
+        <p>&nbsp;</p>
+        <div class="card">
+            <h3><i class="zmdi zmdi-accounts"></i> {{ trans('settings.users') }}</h3>
+            <div class="body">
+                <div class="container">
+                    <div class="row">
+                        <div class="col-sm-4">
+                            <form method="get" action="{{ baseUrl("/settings/users") }}">
+                                @foreach(collect($listDetails)->except('search') as $name => $val)
+                                    <input type="hidden" name="{{ $name }}" value="{{ $val }}">
+                                @endforeach
+                                <input type="text" name="search" placeholder="{{ trans('settings.users_search') }}" @if($listDetails['search']) value="{{$listDetails['search']}}" @endif>
+                            </form>
+                        </div>
+                        <div class="col-sm-8 text-right">
+                            @if(userCan('users-manage'))
+                                <a href="{{ baseUrl("/settings/users/create") }}" style="margin-top: 0;" class="pos button">{{ trans('settings.users_add_new') }}</a>
+                            @endif
+                        </div>
+                    </div>
+                </div>
 
-        <div class="row">
-            <div class="col-sm-8">
-                <div class="compact">
+                <table class="table">
+                    <tr>
+                        <th></th>
+                        <th><a href="{{ sortUrl('/settings/users', $listDetails, ['sort' => 'name']) }}">{{ trans('auth.name') }}</a></th>
+                        <th><a href="{{ sortUrl('/settings/users', $listDetails, ['sort' => 'email']) }}">{{ trans('auth.email') }}</a></th>
+                        <th>{{ trans('settings.role_user_roles') }}</th>
+                    </tr>
+                    @foreach($users as $user)
+                        <tr>
+                            <td style="line-height: 0;"><img class="avatar med" src="{{ $user->getAvatar(40)}}" alt="{{ $user->name }}"></td>
+                            <td>
+                                @if(userCan('users-manage') || $currentUser->id == $user->id)
+                                    <a href="{{ baseUrl("/settings/users/{$user->id}") }}">
+                                        @endif
+                                        {{ $user->name }}
+                                        @if(userCan('users-manage') || $currentUser->id == $user->id)
+                                    </a>
+                                @endif
+                            </td>
+                            <td>
+                                @if(userCan('users-manage') || $currentUser->id == $user->id)
+                                    <a href="{{ baseUrl("/settings/users/{$user->id}") }}">
+                                        @endif
+                                        {{ $user->email }}
+                                        @if(userCan('users-manage') || $currentUser->id == $user->id)
+                                    </a>
+                                @endif
+                            </td>
+                            <td>
+                                @foreach($user->roles as $index => $role)
+                                    <small><a href="{{ baseUrl("/settings/roles/{$role->id}") }}">{{$role->display_name}}</a>@if($index !== count($user->roles) -1),@endif</small>
+                                @endforeach
+                            </td>
+                        </tr>
+                    @endforeach
+                </table>
+
+                <div>
                     {{ $users->links() }}
                 </div>
-            </div>
-            <div class="col-sm-4">
-                <form method="get" class="float right" action="{{ baseUrl("/settings/users") }}">
-                    @foreach(collect($listDetails)->except('search') as $name => $val)
-                        <input type="hidden" name="{{ $name }}" value="{{ $val }}">
-                    @endforeach
-                    <input type="text" name="search" placeholder="{{ trans('settings.users_search') }}" @if($listDetails['search']) value="{{$listDetails['search']}}" @endif>
-                </form>
+
             </div>
         </div>
 
-        <table class="table">
-            <tr>
-                <th></th>
-                <th><a href="{{ sortUrl('/settings/users', $listDetails, ['sort' => 'name']) }}">{{ trans('auth.name') }}</a></th>
-                <th><a href="{{ sortUrl('/settings/users', $listDetails, ['sort' => 'email']) }}">{{ trans('auth.email') }}</a></th>
-                <th>{{ trans('settings.role_user_roles') }}</th>
-            </tr>
-            @foreach($users as $user)
-                <tr>
-                    <td style="line-height: 0;"><img class="avatar med" src="{{ $user->getAvatar(40)}}" alt="{{ $user->name }}"></td>
-                    <td>
-                        @if(userCan('users-manage') || $currentUser->id == $user->id)
-                            <a href="{{ baseUrl("/settings/users/{$user->id}") }}">
-                                @endif
-                                {{ $user->name }}
-                                @if(userCan('users-manage') || $currentUser->id == $user->id)
-                            </a>
-                        @endif
-                    </td>
-                    <td>
-                        @if(userCan('users-manage') || $currentUser->id == $user->id)
-                            <a href="{{ baseUrl("/settings/users/{$user->id}") }}">
-                                @endif
-                                {{ $user->email }}
-                                @if(userCan('users-manage') || $currentUser->id == $user->id)
-                            </a>
-                        @endif
-                    </td>
-                    <td>
-                        @foreach($user->roles as $index => $role)
-                            <small><a href="{{ baseUrl("/settings/roles/{$role->id}") }}">{{$role->display_name}}</a>@if($index !== count($user->roles) -1),@endif</small>
-                        @endforeach
-                    </td>
-                </tr>
-            @endforeach
-        </table>
-
-        <div>
-            {{ $users->links() }}
-        </div>
     </div>
 
 @stop
diff --git a/resources/views/users/profile.blade.php b/resources/views/users/profile.blade.php
index 10bd0ec63..d762f0f24 100644
--- a/resources/views/users/profile.blade.php
+++ b/resources/views/users/profile.blade.php
@@ -1,76 +1,81 @@
-@extends('base')
+@extends('sidebar-layout')
 
-@section('content')
+@section('toolbar')
+    <div class="col-sm-6 col-xs-1 faded">
+        <div class="breadcrumbs">
+            <a href="{{ $user->getProfileUrl() }}" class="text-button"><i class="zmdi zmdi-account"></i>{{ $user->name }}</a>
+        </div>
+    </div>
+@stop
+
+@section('sidebar')
+    <div class="card" id="recent-activity">
+        <h3><i class="zmdi zmdi-time"></i> {{ trans('entities.recent_activity') }}</h3>
+        @include('partials/activity-list', ['activity' => $activity])
+    </div>
+@stop
+
+@section('body')
+
+    <div class="container small" ng-non-bindable>
+
+        <div class="padded-top large"></div>
 
-    <div class="container" ng-non-bindable>
         <div class="row">
-            <div class="col-sm-7">
-
-                <div class="padded-top large"></div>
-
-                <div class="row">
-                    <div class="col-md-7">
-                        <div class="clearfix">
-                            <div class="padded-right float left">
-                                <img class="avatar square huge" src="{{ $user->getAvatar(120) }}" alt="{{ $user->name }}">
-                            </div>
-                            <div>
-                                <h3 style="margin-top: 0;">{{ $user->name }}</h3>
-                                <p class="text-muted">
-                                    {{ trans('entities.profile_user_for_x', ['time' => $user->created_at->diffForHumans(null, true)]) }}
-                                </p>
-                            </div>
-                        </div>
+            <div class="col-md-7">
+                <div class="clearfix">
+                    <div class="padded-right float left">
+                        <img class="avatar square huge" src="{{ $user->getAvatar(120) }}" alt="{{ $user->name }}">
                     </div>
-                    <div class="col-md-5 text-bigger" id="content-counts">
-                        <div class="text-muted">{{ trans('entities.profile_created_content') }}</div>
-                        <div class="text-book">
-                            <i class="zmdi zmdi-book zmdi-hc-fw"></i> {{ $assetCounts['books'] }} {{ str_plural(trans('entities.book'), $assetCounts['books']) }}
-                        </div>
-                        <div class="text-chapter">
-                            <i class="zmdi zmdi-collection-bookmark zmdi-hc-fw"></i> {{ $assetCounts['chapters'] }} {{ str_plural(trans('entities.chapter'), $assetCounts['chapters']) }}
-                        </div>
-                        <div class="text-page">
-                            <i class="zmdi zmdi-file-text zmdi-hc-fw"></i> {{ $assetCounts['pages'] }} {{ str_plural(trans('entities.page'), $assetCounts['pages']) }}
-                        </div>
+                    <div>
+                        <h3 style="margin-top: 0;">{{ $user->name }}</h3>
+                        <p class="text-muted">
+                            {{ trans('entities.profile_user_for_x', ['time' => $user->created_at->diffForHumans(null, true)]) }}
+                        </p>
                     </div>
                 </div>
-
-
-                <hr class="even">
-
-                <h3>{{ trans('entities.recently_created_pages') }}</h3>
-                @if (count($recentlyCreated['pages']) > 0)
-                    @include('partials/entity-list', ['entities' => $recentlyCreated['pages']])
-                @else
-                    <p class="text-muted">{{ trans('entities.profile_not_created_pages', ['userName' => $user->name]) }}</p>
-                @endif
-
-                <hr class="even">
-
-                <h3>{{ trans('entities.recently_created_chapters') }}</h3>
-                @if (count($recentlyCreated['chapters']) > 0)
-                    @include('partials/entity-list', ['entities' => $recentlyCreated['chapters']])
-                @else
-                    <p class="text-muted">{{ trans('entities.profile_not_created_chapters', ['userName' => $user->name]) }}</p>
-                @endif
-
-                <hr class="even">
-
-                <h3>{{ trans('entities.recently_created_books') }}</h3>
-                @if (count($recentlyCreated['books']) > 0)
-                    @include('partials/entity-list', ['entities' => $recentlyCreated['books']])
-                @else
-                    <p class="text-muted">{{ trans('entities.profile_not_created_books', ['userName' => $user->name]) }}</p>
-                @endif
             </div>
-
-            <div class="col-sm-4 col-sm-offset-1" id="recent-activity">
-                <h3>{{ trans('entities.recent_activity') }}</h3>
-                @include('partials/activity-list', ['activity' => $activity])
+            <div class="col-md-5 text-bigger" id="content-counts">
+                <div class="text-muted">{{ trans('entities.profile_created_content') }}</div>
+                <div class="text-book">
+                    <i class="zmdi zmdi-book zmdi-hc-fw"></i> {{ $assetCounts['books'] }} {{ str_plural(trans('entities.book'), $assetCounts['books']) }}
+                </div>
+                <div class="text-chapter">
+                    <i class="zmdi zmdi-collection-bookmark zmdi-hc-fw"></i> {{ $assetCounts['chapters'] }} {{ str_plural(trans('entities.chapter'), $assetCounts['chapters']) }}
+                </div>
+                <div class="text-page">
+                    <i class="zmdi zmdi-file-text zmdi-hc-fw"></i> {{ $assetCounts['pages'] }} {{ str_plural(trans('entities.page'), $assetCounts['pages']) }}
+                </div>
             </div>
-
         </div>
+
+
+        <hr class="even">
+
+        <h3>{{ trans('entities.recently_created_pages') }}</h3>
+        @if (count($recentlyCreated['pages']) > 0)
+            @include('partials/entity-list', ['entities' => $recentlyCreated['pages']])
+        @else
+            <p class="text-muted">{{ trans('entities.profile_not_created_pages', ['userName' => $user->name]) }}</p>
+        @endif
+
+        <hr class="even">
+
+        <h3>{{ trans('entities.recently_created_chapters') }}</h3>
+        @if (count($recentlyCreated['chapters']) > 0)
+            @include('partials/entity-list', ['entities' => $recentlyCreated['chapters']])
+        @else
+            <p class="text-muted">{{ trans('entities.profile_not_created_chapters', ['userName' => $user->name]) }}</p>
+        @endif
+
+        <hr class="even">
+
+        <h3>{{ trans('entities.recently_created_books') }}</h3>
+        @if (count($recentlyCreated['books']) > 0)
+            @include('partials/entity-list', ['entities' => $recentlyCreated['books']])
+        @else
+            <p class="text-muted">{{ trans('entities.profile_not_created_books', ['userName' => $user->name]) }}</p>
+        @endif
     </div>