Rolled out redesign across application

app/Entity.php

@@ -44,4 +44,21 @@ class Entity extends Model
         return $this->morphMany('Oxbow\Activity', 'entity')->orderBy('created_at', 'desc');
     }
 
+    /**
+     * Allows checking of the exact class, Used to check entity type.
+     * Cleaner method for is_a.
+     * @param $type
+     * @return bool
+     */
+    public function isA($type)
+    {
+        return $this->getName() === strtolower($type);
+    }
+
+    public function getName()
+    {
+        $fullClassName = get_class($this);
+        return strtolower(array_slice(explode('\\', $fullClassName), -1, 1)[0]);
+    }
+
 }

resources/assets/sass/_animations.scss

@@ -37,4 +37,18 @@
   100% {
     transform: translate3d(580px, 0, 0);
   }
+}
+
+@keyframes menuIn {
+  from { opacity: 0;transform: scale3d(0, 0, 1);}
+
+  to { opacity: 1; transform: scale3d(1, 1, 1);}
+}
+
+.anim.menuIn {
+  transform-origin: 0% 0%;
+  animation-name: menuIn;
+  animation-duration: 120ms;
+  animation-delay: 0s;
+  animation-timing-function: cubic-bezier(.62,.28,.23,.99);
 }

resources/assets/sass/_forms.scss

@@ -80,7 +80,7 @@ input[type="text"], input[type="number"], input[type="email"], input[type="searc
 .title-input.page-title {
   font-size: 0.8em;
   .input {
-    border: 1px solid #BBB;
+    border: 0;
     margin-bottom: -1px;
   }
   input[type="text"] {

resources/assets/sass/_html.scss

@@ -1,15 +1,16 @@
 * {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 html {
-	background-color: #FFFFFF;
+  background-color: #FFFFFF;
+  height: 100%;
 }
 body {
-	font-family: $text;
+  font-family: $text;
-	font-size: $fs-m;
+  font-size: $fs-m;
-	line-height: 1.6;
+  line-height: 1.6;
-	color: #616161;
+  color: #616161;
-	-webkit-font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
 }
 
 table {

resources/assets/sass/_text.scss

@@ -192,6 +192,25 @@ p.secondary, p .secondary, span.secondary, .text-secondary {
   }
 }
 
+.text-book {
+  color: $color-book;
+  &:hover {
+    color: $color-book;
+  }
+}
+.text-page {
+  color: $color-page;
+  &:hover {
+    color: $color-page;
+  }
+}
+.text-chapter {
+  color: $color-chapter;
+  &:hover {
+    color: $color-chapter;
+  }
+}
+
 /*
  * Lists
  */

resources/assets/sass/_tinymce.scss

@@ -22,15 +22,6 @@
 }
 
 
-
-.edit-area {
-  height: 100%;
-}
-
-.page-style.editor {
-  height: 100%;
-}
-
 .mce-tinymce {
   .mce-panel {
     background-color: #FFF;
@@ -38,4 +29,28 @@
   .mce-btn {
     background-color: #FFF;
   }
+}
+.mce-tinymce.mce-container.mce-panel {
+  height: 100%;
+  max-height: 100%;
+  flex: 1;
+  display: flex !important;
+  flex-direction: column;
+  align-items: stretch;
+  margin: 0 -1px;
+  > .mce-container-body {
+    flex: 1;
+    display: flex !important;
+    flex-direction: column;
+    align-items: stretch;
+    > .mce-edit-area {
+      flex: 1;
+      display: flex !important;
+      flex-direction: column;
+      align-items: stretch;
+      iframe {
+        flex: 1;
+      }
+    }
+  }
 }

resources/assets/sass/_variables.scss

@@ -36,6 +36,11 @@ $secondary: #e27b41;
 $positive: #52A256;
 $negative: #D32F2F;
 
+// Item Colors
+$color-book: #009688;
+$color-chapter: #EF6C00;
+$color-page: $primary;
+
 // Text colours
 $text-dark: #444;
 $text-light: #EEE;

resources/assets/sass/styles.scss

@@ -23,6 +23,11 @@ header {
   }
   border-bottom: 1px solid #DDD;
   //margin-bottom: $-l;
+  .links {
+    display: inline-block;
+    vertical-align: top;
+    margin-right: $-xl;
+  }
   .links a {
     display: inline-block;
     padding: $-l;
@@ -38,12 +43,19 @@ header {
     display: inline-block;
   }
   .avatar {
-    margin-top: $-l*0.8;
+    margin-top: (45px/2);
+    width: 30px;
+    height: 30px;
   }
   .user-name {
     vertical-align: top;
-    padding-top: $-l*1.1;
+    padding-top: 25.5px;
     padding-left: $-m;
+    display: inline-block;
+    cursor: pointer;
+    i {
+      padding-left: $-xs;
+    }
   }
 }
 
@@ -52,6 +64,40 @@ header {
   position: relative;
 }
 
+body.flexbox {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  #content {
+    flex: 1;
+    display: flex;
+  }
+}
+
+.flex-fill {
+  display: flex;
+  align-items: stretch;
+  .flex, &.flex {
+    flex: 1;
+  }
+}
+
+.page-editor {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  .faded-small {
+    height: auto;
+  }
+  .edit-area {
+    flex: 1;
+    flex-direction: column;
+  }
+}
 
 .logo {
   display: inline-block;
@@ -101,6 +147,9 @@ header {
   h3 {
     margin: $-l 0;
   }
+  a.chapter {
+    color: $color-chapter;
+  }
   .inset-list {
     display: block;
     overflow: hidden;
@@ -203,15 +252,9 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
-.breadcrumbs {
+.breadcrumbs span.sep {
-  margin-top: $-s;
+  color: #aaa;
-  i {
+  padding: 0 $-xs;
-    padding-right: 4px;
-  }
-  span.sep {
-    color: #aaa;
-    padding: 0 $-xs;
-  }
 }
 
 .faded {
@@ -235,13 +278,20 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
+.breadcrumbs a, .action-buttons a {
+  display: inline-block;
+  padding: $-s;
+  &:last-child {
+    padding-right: 0;
+  }
+}
 .action-buttons {
   text-align: right;
-  a {
+  &.text-left {
-    display: inline-block;
+    text-align: left;
-    padding: $-s;
+    a {
-    &:last-child {
+      padding-right: $-m;
-      padding-right: 0;
+      padding-left: 0;
     }
   }
 }
@@ -253,15 +303,19 @@ h1, h2, h3, h4, h5, h6 {
     padding-right: $-s;
   }
 }
+
+
 // Sidebar list
 .book-tree .sidebar-page-list {
   list-style: none;
   margin: 0;
   margin-top: $-xl;
-  border-left: 5px solid #7BD06E;
+  border-left: 5px solid $color-book;
   li a {
     display: block;
     border-bottom: none;
+    padding-left: $-s;
+    padding: $-xs 0 $-xs $-s;
     &:hover {
       background-color: rgba(255, 255, 255, 0.2);
       text-decoration: none;
@@ -277,23 +331,20 @@ h1, h2, h3, h4, h5, h6 {
     list-style: none;
     margin: 0;
   }
-  ul li a {
-    padding-left: $-xl;
-  }
   .book {
-    color: #7BD06E !important;
+    color: $color-book !important;
     &.selected {
-      background-color: rgba(123, 208, 110, 0.29);
+      background-color: rgba($color-book, 0.29);
     }
   }
   .chapter {
-    color: #D2A64B !important;
+    color: $color-chapter !important;
     &.selected {
-      background-color: rgba(239, 169, 42, 0.27);
+      background-color: rgba($color-chapter, 0.12);
     }
   }
   .list-item-chapter {
-    border-left: 5px solid #D2A64B;
+    border-left: 5px solid $color-chapter;
     margin: 10px 10px;
     display: block;
   }
@@ -301,35 +352,42 @@ h1, h2, h3, h4, h5, h6 {
     border-bottom: none;
   }
   .page {
-    color: #4599DC !important;
+    color: $color-page !important;
-    border-left: 5px solid #4599DC;
+    border-left: 5px solid $color-page;
     margin: 10px 10px;
     border-bottom: none;
     &.selected {
-      background-color: rgba(118, 164, 202, 0.41);
+      background-color: rgba($color-page, 0.1);
     }
   }
 }
 
+// Sortable Lists
 .sortable-page-list, .sortable-page-list ul {
   list-style: none;
-  //background-color: rgba(0, 0, 0, 0.04);
 }
 .sortable-page-list {
   margin-left: 0;
+  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
   ul {
     margin-bottom: 0;
     margin-top: 0;
+    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
   }
   li {
-    border-bottom: 1px solid #BBB;
+    border: 1px solid #DDD;
-    border-left: 1px solid #BBB;
-    border-right: 1px solid #BBB;
     padding: $-xs $-s;
+    margin-top: -1px;
+    min-height: 38px;
+    &.text-chapter {
+      border-left: 2px solid $color-chapter;
+    }
+    &.text-page {
+      border-left: 2px solid $color-page;
+    }
   }
   li:first-child {
     margin-top: $-xs;
-    border-top: 1px solid #BBB;
   }
 }
 
@@ -351,61 +409,14 @@ body.dragging, body.dragging * {
   position: absolute;
 }
 
-.image-cover {
-  height: 100vh;
-  width: 100%;
-  overflow: hidden;
-  background-size: cover;
-  &.login {
-    background-image: url('/images/bg-books.jpg');
-  }
-}
-
-.sidebar-bg {
-  background-image: url('/images/bg-books.jpg');
-  background-size: cover;
-  background-position: 50% 50%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-  &:after{
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    background-color: rgba(0,0,0,0.85);
-    display: block;
-  }
-}
-
-.image-cover #sidebar {
-  width: auto;
-  border: 0;
-  background-color: rgba(0, 0, 0, 0.38);
-}
-
 .center-box {
-  margin-top: 15vh;
+  margin: 15vh auto 0 auto;
   padding: $-m $-xxl $-xl*2 $-xxl;
   max-width: 346px;
-  h1, label {
+  &.login {
-    color: #EEE;
+    background-color: #EEE;
-  }
+    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
-  h1 {
+    border: 1px solid #DDD;
-    margin-bottom: $-m;
-  }
-  .button {
-    margin-top: $-xl;
-  }
-  input {
-    background-color: transparent;
-    color: #EEE;
   }
 }
 
@@ -470,4 +481,44 @@ body.dragging, body.dragging * {
       border-bottom: 2px solid $primary;
     }
   }
+}
+
+.dropdown-container {
+  display: inline-block;
+  vertical-align: top;
+  position: relative;
+}
+ul.dropdown {
+  display: none;
+  position: absolute;
+  z-index: 999;
+  top: 0;
+  left: 0;
+  margin: $-m 0;
+  background-color: #FFFFFF;
+  list-style: none;
+  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 1px;
+  border: 1px solid #EEE;
+  min-width: 180px;
+  padding: $-xs 0;
+  color: #555;
+  a {
+    display: block;
+    padding: $-xs $-m;
+    color: #555;
+    &:hover {
+      text-decoration: none;
+      background-color: #EEE;
+    }
+    i {
+      margin-right: $-m;
+      padding-right: 0;
+      display: inline;
+      width: 22px;
+    }
+  }
+  li.border-bottom {
+    border-bottom: 1px solid #DDD;
+  }
 }

resources/views/auth/login.blade.php

@@ -1,42 +1,28 @@
 @extends('public')
 
-@section('body-class', 'image-cover login')
-
 @section('sidebar')
 
+    <div class="center-box">
+        <h1>Log In</h1>
 
-    {{--<div class="row faded-small">--}}
+        <form action="/login" method="POST">
-        {{--<div class="col-md-6"></div>--}}
+            {!! csrf_field() !!}
-        {{--<div class="col-md-6 faded">--}}
-            {{--<div class="action-buttons">--}}
-                {{--<a href="/books/create" class="text-pos"><i class="zmdi zmdi-plus"></i>Add new book</a>--}}
-            {{--</div>--}}
-        {{--</div>--}}
-    {{--</div>--}}
 
-    <div class="text-center">
+            <div class="form-group">
-        <div class="center-box text-left">
+                <label for="email">Email</label>
-            <h1>Login</h1>
+                @include('form/text', ['name' => 'email'])
+            </div>
 
-            <form action="/login" method="POST">
+            <div class="form-group">
-                {!! csrf_field() !!}
+                <label for="password">Password</label>
+                @include('form/password', ['name' => 'password'])
+                <span class="block small"><a href="/password/email">Forgot Password?</a></span>
+            </div>
 
-                <div class="form-group">
+            <div class="from-group">
-                    <label for="email">Email</label>
+                <button class="button block pos">Sign In</button>
-                    @include('form/text', ['name' => 'email'])
+            </div>
-                </div>
+        </form>
-
-                <div class="form-group">
-                    <label for="password">Password</label>
-                    @include('form/password', ['name' => 'password'])
-                    <span class="block small"><a href="/password/email">Forgot Password?</a></span>
-                </div>
-
-                <div class="from-group">
-                    <button class="button block pos">Login</button>
-                </div>
-            </form>
-        </div>
     </div>
 
 @stop

resources/views/base.blade.php

@@ -35,7 +35,7 @@
 
     @yield('head')
 </head>
-<body>
+<body class="@yield('body-class')">
 
     @if(Session::has('success'))
         <div class="notification anim pos">
@@ -52,36 +52,37 @@
     <header id="header">
         <div class="container">
             <div class="row">
-                <div class="col-md-4">
+                <div class="col-md-3">
                     <a href="/" class="logo">{{ Setting::get('app-name', 'BookStack') }}</a>
                 </div>
-                <div class="col-md-3">
+                <div class="col-md-9">
-                    <div class="search-box text-center" style="display: none">
+                    <div class="float right">
-                        <form action="/pages/search/all" id="search-form" method="GET" style="display: none;">
+                        <div class="links text-center">
-                            <input type="text" placeholder="Search all pages..." name="term" id="search-input">
+                            <a href="/search"><i class="zmdi zmdi-search"></i></a>
-                        </form>
+                            <a href="/books"><i class="zmdi zmdi-book"></i>Books</a>
-                    </div>
+                            @if($currentUser->can('settings-update'))
-                    <img class="avatar" src="{{Auth::user()->getAvatar(30)}}" alt="{{ Auth::user()->name }}">
+                                <a href="/settings"><i class="zmdi zmdi-settings"></i>Settings</a>
-                <span class="user-name">
+                            @endif
-                    {{ Auth::user()->name }}
+                        </div>
-                </span>
+                        <img class="avatar" src="{{$currentUser->getAvatar(30)}}" alt="{{ $currentUser->name }}">
-                </div>
+                        <div class="dropdown-container" data-dropdown>
-                <div class="col-md-5">
+                            <span class="user-name" data-dropdown-toggle>
-                    <div class="float right links">
+                                {{ $currentUser->name }} <i class="zmdi zmdi-caret-down"></i>
-                        <a href="/search"><i class="zmdi zmdi-search"></i></a>
+                            </span>
-                        <a href="/books"><i class="zmdi zmdi-book"></i>Books</a>
+                            <ul class="dropdown">
-                        <a href="/users"><i class="zmdi zmdi-accounts"></i>Users</a>
+                                <li>
-                        <a href="/logout"><i class="zmdi zmdi-run zmdi-hc-flip-horizontal"></i>Logout</a>
+                                    <a href="/users/{{$currentUser->id}}" class="text-primary"><i class="zmdi zmdi-edit zmdi-hc-lg"></i>Edit Profile</a>
+                                </li>
+                                <li>
+                                    <a href="/logout" class="text-neg"><i class="zmdi zmdi-run zmdi-hc-lg"></i>Logout</a>
+                                </li>
+                            </ul>
+                        </div>
+
                     </div>
                 </div>
             </div>
         </div>
-        {{--@if(isset($book) && isset($current) && !isset($books))--}}
-            {{--<div class="book-tree">--}}
-                {{--@include('pages/sidebar-tree-list', ['book' => $book])--}}
-            {{--</div>--}}
-        {{--@endif--}}
-        @yield('sidebar')
     </header>
 
     <section id="content">
@@ -90,8 +91,25 @@
 
 @yield('bottom')
     <script>
-        $('.notification').click(function() {
+        $(function() {
-            $(this).fadeOut(100);
+
+            $('.notification').click(function() {
+                $(this).fadeOut(100);
+            });
+
+            // Dropdown toggles
+            $('[data-dropdown-toggle]').click(function() {
+                var toggleButton = $(this);
+                var container = toggleButton.closest('[data-dropdown]');
+                var dropdown = container.find('.dropdown');
+                dropdown.show().addClass('anim menuIn');
+
+                container.mouseleave(function() {
+                   dropdown.hide();
+                    dropdown.removeClass('anim menuIn');
+                });
+            });
+
         });
     </script>
 </body>

resources/views/books/index.blade.php

@@ -2,32 +2,32 @@
 
 @section('content')
 
-
+    <div class="faded-small">
-<div class="row faded-small">
+        <div class="container">
-    <div class="col-md-6"></div>
+            <div class="row">
-    <div class="col-md-6 faded">
+                <div class="col-md-6"></div>
-        <div class="action-buttons">
+                <div class="col-md-6 faded">
-            @if($currentUser->can('book-create'))
+                    <div class="action-buttons">
-                <a href="/books/create" class="text-pos"><i class="zmdi zmdi-plus"></i>Add new book</a>
+                        @if($currentUser->can('book-create'))
-            @endif
+                            <a href="/books/create" class="text-pos"><i class="zmdi zmdi-plus"></i>Add new book</a>
+                        @endif
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
-</div>
-
-
-<div class="page-content">
-    <h1>Books</h1>
-    @foreach($books as $book)
-        <div class="book">
-            <h3><a href="{{$book->getUrl()}}">{{$book->name}}</a></h3>
-            <p class="text-muted">{{$book->description}}</p>
-        </div>
-        <hr>
-    @endforeach
-</div>
-
 
 
 
+    <div class="page-content">
+        <h1>Books</h1>
+        @foreach($books as $book)
+            <div class="book">
+                <h3><a href="{{$book->getUrl()}}">{{$book->name}}</a></h3>
+                <p class="text-muted">{{$book->description}}</p>
+            </div>
+            <hr>
+        @endforeach
+    </div>
 
 @stop

resources/views/books/show.blade.php

@@ -39,20 +39,15 @@
                     @foreach($book->children() as $childElement)
                         <div class="book-child">
                             <h3>
-                                <a href="{{ $childElement->getUrl() }}">
+                                <a href="{{ $childElement->getUrl() }}" class="{{ $childElement->getName() }}">
-                                    @if(is_a($childElement, 'Oxbow\Chapter'))
+                                    <i class="zmdi {{ $childElement->isA('chapter') ? 'zmdi-collection-bookmark chapter-toggle':'zmdi-file-text'}}"></i>{{ $childElement->name }}
-                                        <i class="zmdi zmdi-collection-bookmark chapter-toggle"></i>
-                                    @else
-                                        <i class="zmdi zmdi-file-text"></i>
-                                    @endif
-                                    {{ $childElement->name }}
                                 </a>
                             </h3>
                             <p class="text-muted">
                                 {{$childElement->getExcerpt()}}
                             </p>
 
-                            @if(is_a($childElement, 'Oxbow\Chapter') && count($childElement->pages) > 0)
+                            @if($childElement->isA('chapter') && count($childElement->pages) > 0)
                                 <div class="inset-list">
                                     @foreach($childElement->pages as $page)
                                         <h4><a href="{{$page->getUrl()}}"><i class="zmdi zmdi-file-text"></i>{{$page->name}}</a></h4>

resources/views/chapters/show.blade.php

@@ -2,59 +2,74 @@
 
 @section('content')
 
-    <div class="row faded-small">
+    <div class="faded-small">
-        <div class="col-md-6 faded">
+        <div class="container">
-            <div class="breadcrumbs padded-horizontal">
+            <div class="row">
-                <a href="{{$book->getUrl()}}"><i class="zmdi zmdi-book"></i>{{ $book->name }}</a>
+                <div class="col-md-4 faded">
-            </div>
+                    <div class="breadcrumbs">
-        </div>
+                        <a href="{{$book->getUrl()}}"><i class="zmdi zmdi-book"></i>{{ $book->name }}</a>
-        <div class="col-md-6 faded">
-            <div class="action-buttons">
-                @if($currentUser->can('chapter-create'))
-                    <a href="{{$chapter->getUrl() . '/create-page'}}" class="text-pos"><i class="zmdi zmdi-plus"></i>New Page</a>
-                @endif
-                @if($currentUser->can('chapter-update'))
-                    <a href="{{$chapter->getUrl() . '/edit'}}" class="text-primary"><i class="zmdi zmdi-edit"></i>Edit</a>
-                @endif
-                @if($currentUser->can('chapter-delete'))
-                    <a href="{{$chapter->getUrl() . '/delete'}}" class="text-neg"><i class="zmdi zmdi-delete"></i>Delete</a>
-                @endif
-            </div>
-        </div>
-    </div>
-
-
-    <div class="page-content">
-        <h1>{{ $chapter->name }}</h1>
-        <p class="text-muted">{{ $chapter->description }}</p>
-
-        @if(count($chapter->pages) > 0)
-            <div class="page-list">
-                <hr>
-                @foreach($chapter->pages as $page)
-                    <div >
-                        <h3>
-                            <a href="{{ $page->getUrl() }}">
-                                <i class="zmdi zmdi-file-text"></i>{{ $page->name }}
-                            </a>
-                        </h3>
-                        <p class="text-muted">
-                            {{$page->getExcerpt(180)}}
-                        </p>
                     </div>
-                    <hr>
+                </div>
-                @endforeach
+                <div class="col-md-8 faded">
+                    <div class="action-buttons">
+                        @if($currentUser->can('chapter-create'))
+                            <a href="{{$chapter->getUrl() . '/create-page'}}" class="text-pos"><i class="zmdi zmdi-plus"></i>New Page</a>
+                        @endif
+                        @if($currentUser->can('chapter-update'))
+                            <a href="{{$chapter->getUrl() . '/edit'}}" class="text-primary"><i class="zmdi zmdi-edit"></i>Edit</a>
+                        @endif
+                        @if($currentUser->can('chapter-delete'))
+                            <a href="{{$chapter->getUrl() . '/delete'}}" class="text-neg"><i class="zmdi zmdi-delete"></i>Delete</a>
+                        @endif
+                    </div>
+                </div>
             </div>
-        @else
+        </div>
-            <p class="text-muted">No pages are in this chapter</p>
-        @endif
-
-        <p class="text-muted small">
-            Created {{$chapter->created_at->diffForHumans()}} @if($chapter->createdBy) by {{$chapter->createdBy->name}} @endif
-            <br>
-            Last Updated {{$chapter->updated_at->diffForHumans()}} @if($chapter->createdBy) by {{$chapter->updatedBy->name}} @endif
-        </p>
     </div>
 
 
+    <div class="container">
+        <div class="row">
+            <div class="col-md-3">
+                @include('pages/sidebar-tree-list', ['book' => $book])
+            </div>
+            <div class="col-md-9">
+                <div class="page-content">
+                    <h1>{{ $chapter->name }}</h1>
+                    <p class="text-muted">{{ $chapter->description }}</p>
+
+                    @if(count($chapter->pages) > 0)
+                        <div class="page-list">
+                            <hr>
+                            @foreach($chapter->pages as $page)
+                                <div >
+                                    <h3>
+                                        <a href="{{ $page->getUrl() }}">
+                                            <i class="zmdi zmdi-file-text"></i>{{ $page->name }}
+                                        </a>
+                                    </h3>
+                                    <p class="text-muted">
+                                        {{$page->getExcerpt(180)}}
+                                    </p>
+                                </div>
+                                <hr>
+                            @endforeach
+                        </div>
+                    @else
+                        <p class="text-muted">No pages are in this chapter</p>
+                    @endif
+
+                    <p class="text-muted small">
+                        Created {{$chapter->created_at->diffForHumans()}} @if($chapter->createdBy) by {{$chapter->createdBy->name}} @endif
+                        <br>
+                        Last Updated {{$chapter->updated_at->diffForHumans()}} @if($chapter->createdBy) by {{$chapter->updatedBy->name}} @endif
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+
+
 @stop

resources/views/pages/create.blade.php

@@ -4,13 +4,18 @@
     <script src="/bower/tinymce-dist/tinymce.jquery.min.js"></script>
 @stop
 
+@section('body-class', 'flexbox')
+
 @section('content')
-    <form action="{{$book->getUrl() . '/page'}}" method="POST">
+
-        @include('pages/form')
+    <div class="flex-fill flex">
-        @if($chapter)
+        <form action="{{$book->getUrl() . '/page'}}" method="POST" class="flex flex-fill">
-            <input type="hidden" name="chapter" value="{{$chapter->id}}">
+            @include('pages/form')
-        @endif
+            @if($chapter)
-    </form>
+                <input type="hidden" name="chapter" value="{{$chapter->id}}">
+            @endif
+        </form>
+    </div>
 @stop
 
 @section('bottom')

resources/views/pages/edit.blade.php

@@ -4,12 +4,16 @@
     <script src="/bower/tinymce-dist/tinymce.jquery.min.js"></script>
 @stop
 
+@section('body-class', 'flexbox')
+
 @section('content')
 
-    <form action="{{$page->getUrl()}}" method="POST">
+    <div class="flex-fill flex">
-        <input type="hidden" name="_method" value="PUT">
+        <form action="{{$page->getUrl()}}" method="POST" class="flex flex-fill">
-        @include('pages/form', ['model' => $page])
+            <input type="hidden" name="_method" value="PUT">
-    </form>
+            @include('pages/form', ['model' => $page])
+        </form>
+    </div>
 
 @stop
 

resources/views/pages/form.blade.php

@@ -1,25 +1,39 @@
 
 
 
-<div class="page-style editor">
+<div class="page-editor flex-fill flex">
 
     {{ csrf_field() }}
+    <div class="faded-small">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-4 faded">
+                    <div class="action-buttons text-left">
+                        <a onclick="$('body>header').slideToggle();" class="text-primary"><i class="zmdi zmdi-swap-vertical"></i>Toggle Header</a>
+                    </div>
+                </div>
+                <div class="col-md-8 faded">
+                    <div class="action-buttons">
+                        <a onclick="window.history.back();" class="text-primary"><i class="zmdi zmdi-close"></i>Cancel</a>
+                        <a onclick="$(this).closest('form').submit();" type="submit" class="text-pos"><i class="zmdi zmdi-floppy"></i>Save Page</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <div class="title-input page-title clearfix">
         <div class="input">
             @include('form/text', ['name' => 'name', 'placeholder' => 'Page Title'])
         </div>
     </div>
-    <div class="edit-area">
+    <div class="edit-area flex-fill flex">
         <textarea id="html" name="html" rows="5"
                   @if($errors->has('html')) class="neg" @endif>@if(isset($model) || old('html')){{htmlspecialchars( old('html') ? old('html') : $model->html)}}@endif</textarea>
         @if($errors->has('html'))
             <div class="text-neg text-small">{{ $errors->first('html') }}</div>
         @endif
     </div>
-    <div class="margin-top large">
-        <a onclick="window.history.back();" class="button muted">Cancel</a>
-        <button type="submit" class="button pos">Save Page</button>
-    </div>
 </div>
 
 
@@ -40,7 +54,7 @@
             relative_urls: false,
             statusbar: false,
             menubar: false,
-            height: 700,
+            //height: 700,
             extended_valid_elements: 'pre[*]',
             plugins: "image table textcolor paste link imagetools fullscreen code",
             toolbar: "code undo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image link | fullscreen",

resources/views/pages/revisions.blade.php

@@ -2,16 +2,21 @@
 
 @section('content')
 
-    <div class="row faded-small">
+    <div class="faded-small">
-        <div class="col-md-6 faded">
+        <div class="container">
-            <div class="breadcrumbs padded-horizontal">
+            <div class="row">
-                <a href="{{$page->getUrl()}}" class="text-primary"><i class="zmdi zmdi-arrow-left"></i>Back to page</a>
+                <div class="col-md-6 faded">
+                    <div class="breadcrumbs">
+                        <a href="{{$page->getUrl()}}" class="text-primary"><i class="zmdi zmdi-arrow-left"></i>Back to page</a>
+                    </div>
+                </div>
+                <div class="col-md-6 faded">
+                </div>
             </div>
         </div>
-        <div class="col-md-6 faded">
-        </div>
     </div>
 
+
     <div class="page-content">
         <h1>Page Revisions <span class="subheader">For "{{ $page->name }}"</span></h1>
 

resources/views/pages/show.blade.php

@@ -7,10 +7,10 @@
             <div class="row">
                 <div class="col-md-6 faded">
                     <div class="breadcrumbs">
-                        <a href="{{$book->getUrl()}}"><i class="zmdi zmdi-book"></i>{{ $book->name }}</a>
+                        <a href="{{$book->getUrl()}}" class="text-book"><i class="zmdi zmdi-book"></i>{{ $book->name }}</a>
                         @if($page->hasChapter())
                             <span class="sep">&raquo;</span>
-                            <a href="{{ $page->chapter->getUrl() }}">
+                            <a href="{{ $page->chapter->getUrl() }}" class="text-chapter">
                                 <i class="zmdi zmdi-collection-bookmark"></i>
                                 {{$page->chapter->name}}
                             </a>
@@ -33,22 +33,32 @@
     </div>
 
 
-    <div class="side-nav faded">
+    <div class="container">
-        <h4>Page Navigation</h4>
+        <div class="row">
-        <ul class="page-nav-list">
+            <div class="col-md-3">
-        </ul>
+                @include('pages/sidebar-tree-list', ['book' => $book])
+                <div class="side-nav faded">
+                    <h4>Page Navigation</h4>
+                    <ul class="page-nav-list">
+                    </ul>
+                </div>
+            </div>
+            <div class="col-md-9">
+                <div class="page-content">
+                    @include('pages/page-display')
+                    <hr>
+                    <p class="text-muted small">
+                        Created {{$page->created_at->diffForHumans()}} @if($page->createdBy) by {{$page->createdBy->name}} @endif
+                        <br>
+                        Last Updated {{$page->updated_at->diffForHumans()}} @if($page->createdBy) by {{$page->updatedBy->name}} @endif
+                    </p>
+                </div>
+            </div>
+        </div>
     </div>
 
 
-    <div class="page-content">
+
-        @include('pages/page-display')
-        <hr>
-        <p class="text-muted small">
-            Created {{$page->created_at->diffForHumans()}} @if($page->createdBy) by {{$page->createdBy->name}} @endif
-            <br>
-            Last Updated {{$page->updated_at->diffForHumans()}} @if($page->createdBy) by {{$page->updatedBy->name}} @endif
-        </p>
-    </div>
 
 
     <script>

resources/views/pages/sidebar-tree-list.blade.php

@@ -1,28 +1,25 @@
 
-<ul class="sidebar-page-list menu">
+<div class="book-tree">
-    <li class="book-header"><a href="{{$book->getUrl()}}" class="book {{ $current->matches($book)? 'selected' : '' }}"><i class="zmdi zmdi-book"></i>{{$book->name}}</a></li>
+    <ul class="sidebar-page-list menu">
-    @foreach($book->children() as $bookChild)
+        <li class="book-header"><a href="{{$book->getUrl()}}" class="book {{ $current->matches($book)? 'selected' : '' }}"><i class="zmdi zmdi-book"></i>{{$book->name}}</a></li>
-        <li class="list-item-{{is_a($bookChild, 'Oxbow\Chapter') ? 'chapter' : 'page' }}">
+        @foreach($book->children() as $bookChild)
-            <a href="{{$bookChild->getUrl()}}" class="{{is_a($bookChild, 'Oxbow\Chapter') ? 'chapter' : 'page' }} {{ $current->matches($bookChild)? 'selected' : '' }}">
+            <li class="list-item-{{ $bookChild->getName() }}">
-                @if(is_a($bookChild, 'Oxbow\Chapter'))
+                <a href="{{$bookChild->getUrl()}}" class="{{ $bookChild->getName() }} {{ $current->matches($bookChild)? 'selected' : '' }}">
-                    <i class="zmdi zmdi-collection-bookmark chapter-toggle"></i>
+                    @if($bookChild->isA('chapter'))<i class="zmdi zmdi-collection-bookmark chapter-toggle"></i>@else <i class="zmdi zmdi-file-text"></i>@endif{{ $bookChild->name }}
-                @else
+                </a>
-                    <i class="zmdi zmdi-file-text"></i>
+
+                @if($bookChild->isA('chapter') && count($bookChild->pages) > 0)
+                    <ul class="menu">
+                        @foreach($bookChild->pages as $childPage)
+                            <li class="list-item-page">
+                                <a href="{{$childPage->getUrl()}}" class="page {{ $current->matches($childPage)? 'selected' : '' }}">
+                                    <i class="zmdi zmdi-file-text"></i> {{ $childPage->name }}
+                                </a>
+                            </li>
+                        @endforeach
+                    </ul>
                 @endif
-                {{ $bookChild->name }}
+            </li>
-            </a>
+        @endforeach
-
+    </ul>
-            @if(is_a($bookChild, 'Oxbow\Chapter') && count($bookChild->pages) > 0)
+</div>
-                <ul class="menu">
-                    @foreach($bookChild->pages as $childPage)
-                        <li class="list-item-page">
-                            <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>

resources/views/pages/sort.blade.php

@@ -3,16 +3,17 @@
 @section('content')
 
     <div class="page-content">
-        <h1>{{ $book->name }} <span class="subheader">Sort Pages</span></h1>
+        <h1>Sorting Pages & Chapters<span class="subheader">For {{ $book->name }}</span></h1>
 
         <ul class="sortable-page-list" id="sort-list">
             @foreach($book->children() as $bookChild)
-                <li data-id="{{$bookChild->id}}" data-type="{{ is_a($bookChild, 'Oxbow\Chapter') ? 'chapter' : 'page' }}">
+                <li data-id="{{$bookChild->id}}" data-type="{{ $bookChild->getName() }}" class="text-{{ $bookChild->getName() }}">
-                    {{ $bookChild->name }}
+                    <i class="zmdi {{ $bookChild->isA('chapter') ? 'zmdi-collection-bookmark':'zmdi-file-text'}}"></i>{{ $bookChild->name }}
-                    @if(is_a($bookChild, 'Oxbow\Chapter'))
+                    @if($bookChild->isA('chapter'))
                         <ul>
                             @foreach($bookChild->pages as $page)
-                                <li data-id="{{$page->id}}" data-type="page">
+                                <li data-id="{{$page->id}}" class="text-page" data-type="page">
+                                    <i class="zmdi zmdi-file-text"></i>
                                     {{ $page->name }}
                                 </li>
                             @endforeach
@@ -28,7 +29,7 @@
             <input type="hidden" id="sort-tree-input" name="sort-tree">
             <div class="list">
                 <a href="{{$book->getUrl()}}" class="button muted">Cancel</a>
-                <button class="button pos" type="submit">Save Ordering</button>
+                <button class="button pos" type="submit">Save Order</button>
             </div>
         </form>
 

resources/views/users/edit.blade.php

@@ -3,56 +3,60 @@
 
 @section('content')
 
-    <div class="row faded-small">
+    <div class="faded-small">
-        <div class="col-md-6"></div>
+        <div class="container">
-        <div class="col-md-6 faded">
+            <div class="row">
-            <div class="action-buttons">
+                <div class="col-md-6"></div>
-                <a href="/users/{{$user->id}}/delete" class="text-neg"><i class="zmdi zmdi-delete"></i>Delete User</a>
+                <div class="col-md-6 faded">
+                    <div class="action-buttons">
+                        <a href="/users/{{$user->id}}/delete" class="text-neg"><i class="zmdi zmdi-delete"></i>Delete User</a>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
 
-    <div class="row">
-        <div class="page-content">
 
-            <div class="row">
+
-                <div class="col-md-6">
+    <div class="page-content">
-                    <h1>Edit {{ $user->id === $currentUser->id ? 'Profile' : 'User' }}</h1>
+
-                    <form action="/users/{{$user->id}}" method="post">
+        <div class="row">
-                        {!! csrf_field() !!}
+            <div class="col-md-6">
-                        <input type="hidden" name="_method" value="put">
+                <h1>Edit {{ $user->id === $currentUser->id ? 'Profile' : 'User' }}</h1>
-                        @include('users/form', ['model' => $user])
+                <form action="/users/{{$user->id}}" method="post">
-                    </form>
+                    {!! csrf_field() !!}
-                </div>
+                    <input type="hidden" name="_method" value="put">
-                <div class="col-md-6">
+                    @include('users/form', ['model' => $user])
-                    <h1>&nbsp;</h1>
+                </form>
-                    <div class="shaded padded margin-top">
+            </div>
-                        <p>
+            <div class="col-md-6">
-                            <img class="avatar" src="{{ $user->getAvatar(80) }}" alt="{{ $user->name }}">
+                <h1>&nbsp;</h1>
-                        </p>
+                <div class="shaded padded margin-top">
-                        <p class="text-muted">You can change your profile picture at <a href="http://en.gravatar.com/">Gravatar</a>.</p>
+                    <p>
-                    </div>
+                        <img class="avatar" src="{{ $user->getAvatar(80) }}" alt="{{ $user->name }}">
+                    </p>
+                    <p class="text-muted">You can change your profile picture at <a href="http://en.gravatar.com/">Gravatar</a>.</p>
                 </div>
             </div>
-
-            <hr class="margin-top large">
-
-            <div class="row">
-                <div class="col-md-12">
-                    <h3>Permissions</h3>
-                    <p>User Role: <strong>{{$user->role->display_name}}</strong>.</p>
-                    <ul class="text-muted">
-                        @foreach($user->role->permissions as $permission)
-                            <li>
-                                {{ $permission->display_name }}
-                            </li>
-                        @endforeach
-                    </ul>
-
-                </div>
-            </div>
-
         </div>
+
+        <hr class="margin-top large">
+
+        <div class="row">
+            <div class="col-md-12">
+                <h3>Permissions</h3>
+                <p>User Role: <strong>{{$user->role->display_name}}</strong>.</p>
+                <ul class="text-muted">
+                    @foreach($user->role->permissions as $permission)
+                        <li>
+                            {{ $permission->display_name }}
+                        </li>
+                    @endforeach
+                </ul>
+
+            </div>
+        </div>
+
     </div>