Vastly improved design and cleaned text input

app/Http/Controllers/PageController.php

@@ -96,7 +96,9 @@ class PageController extends Controller
         $book = $this->bookRepo->getBySlug($bookSlug);
         $page = $this->pageRepo->getBySlug($pageSlug, $book->id);
         $breadCrumbs = $this->pageRepo->getBreadCrumbs($page);
-        return view('pages/show', ['page' => $page, 'breadCrumbs' => $breadCrumbs, 'book' => $book]);
+        $sidebarBookTree = $this->bookRepo->getTree($book, $page->id);
+        //dd($sidebarBookTree);
+        return view('pages/show', ['page' => $page, 'breadCrumbs' => $breadCrumbs, 'book' => $book, 'sidebarBookTree' => $sidebarBookTree]);
     }
 
     /**

app/Repos/BookRepo.php

@@ -53,10 +53,10 @@ class BookRepo
         $book->delete();
     }
 
-    public function getTree($book)
+    public function getTree($book, $currentPageId = false)
     {
         $tree = $book->toArray();
-        $tree['pages'] = $this->pageRepo->getTreeByBookId($book->id);
+        $tree['pages'] = $this->pageRepo->getTreeByBookId($book->id, $currentPageId);
         $tree['hasChildren'] = count($tree['pages']) > 0;
         return $tree;
     }

app/Repos/PageRepo.php

@@ -102,7 +102,7 @@ class PageRepo
         $cPage['current'] = ($currentPageId !== false && $cPage['id'] === $currentPageId);
         $cPage['pages'] = [];
         foreach($page->children as $key => $childPage) {
-            $cPage['pages'][$key] = $this->toArrayTree($childPage);
+            $cPage['pages'][$key] = $this->toArrayTree($childPage, $currentPageId);
         }
         $cPage['hasChildren'] = count($cPage['pages']) > 0;
         return $cPage;

resources/assets/sass/_forms.scss

@@ -52,6 +52,10 @@ input[type="text"], input[type="number"], input[type="email"], input[type="searc
   padding: $-xs $-s;
 }
 
+.title-input .input {
+  width: 100%;
+}
+
 .title-input label, .description-input label{
   margin-top: $-m;
   color: #666;
@@ -61,6 +65,8 @@ input[type="text"], input[type="number"], input[type="email"], input[type="searc
   @extend h1;
   @extend .inline-input-style;
   margin-top: 0;
+  padding-right: 0;
+  width: 100%;
   color: #444;
 }
 

resources/assets/sass/_text.scss

@@ -6,7 +6,11 @@ h1 {
   font-size: 3.625em;
   line-height: 1.22222222em;
   margin-top: 0.48888889em;
-  margin-bottom: 0.24444444em;
+  margin-bottom: 0.48888889em;
+  padding-bottom: 0.3333em;
+  border-bottom: 1px solid #EAEAEA;
+  //margin-left: -$-xxl;
+  //margin-right: -$-xxl;
 }
 h2 {
   font-size: 2.8275em;
@@ -31,6 +35,7 @@ h1, h2, h3, h4 {
   font-weight: 500;
   position: relative;
   display: block;
+  color: #555;
   .subheader {
     display: block;
     font-size: 0.5em;

resources/assets/sass/styles.scss

@@ -10,52 +10,64 @@
 @import "tinymce";
 
 header {
-  background-color: #f8f8f8;
   display: block;
-  width: 100%;
-  position: fixed;
   z-index: 2;
   top: 0;
-  border-bottom: 1px solid #DDD;
   .padded {
     padding: $-m;
   }
+  //margin-bottom: $-l;
 }
 
 #sidebar {
   position: fixed;
-  background-color: #FFF;
+  background-color: #444;
+  color: #EEE;
   height: 100%;
   top: 0;
   z-index: 1;
-  padding-top: 63px + $-m;
+  //padding-top: $-m;
   width: 300px;
   border-right: 1px solid #DDD;
+  h4, li, p, a {
+    color: #CCC;
+  }
 }
 
 #content {
-  margin-top: 63px;
+  //margin-top: 63px;
   margin-left: 300px;
   display: block;
   position: relative;
+  padding: 0 16px;
 }
 
 .logo {
-  width: 180px;
+  font-size: 2em;
-  opacity: 0.8;
+  padding: $-xl $-s;
+  font-weight: bold;
+  color: #CCC;
 }
 
-header hr {
+.search-box {
-  margin-top: 0;
+  input {
+    width: 100%;
+    border-radius: 0;
+    padding: $-s $-m;
+    background-color: rgba(0, 0, 0, 0.1);
+    border: none;
+    border-top: 1px solid #333;
+    border-bottom: 1px solid #333;
+  }
 }
 
-header .menu {
+ul.menu {
-  margin-bottom: 0;
   list-style: none;
-  margin-left: 0;
+  margin: 0;
-  li {
+  li a {
-    display: inline-block;
+    padding: $-m;
-    margin-right: $-m;
+    display: block;
+    border-bottom: 1px solid #333;
   }
 }
 
@@ -87,9 +99,6 @@ header .menu {
   &.left {
     float: left;
   }
-  h1 {
-    margin-top: 0.2em;
-  }
 }
 
 .page-list {
@@ -103,22 +112,27 @@ header .menu {
   }
 }
 
-.page-menu  {
+.side-nav {
-  opacity: 0.6;
+  position: fixed;
-  transition: opacity ease-in-out 120ms;
+  padding-left: $-m;
-  &:hover {
+  opacity: 0.8;
-    opacity: 1;
+  margin-top: $-xxl;
-  }
+  margin-left: 0;
-  .buttons a {
+  max-width: 240px;
-    display: block;
-  }
 }
 
 .page-nav-list {
   $nav-indent: $-s;
+  margin-left: 2px;
+  list-style: none;
   li {
     //border-left: 1px solid rgba(0, 0, 0, 0.1);
     padding-left: $-xs;
+    border-left: 2px solid #888;
+    margin-bottom: 4px;
+  }
+  li a {
+    color: #555;
   }
   .nav-H2 {
     margin-left: $nav-indent;
@@ -229,10 +243,6 @@ h1, h2, h3, h4, h5, h6 {
 
 .breadcrumbs {
   margin-top: $-s;
-  a, span {
-    color: #666;
-    font-size: 0.9em;
-  }
   i {
     padding-right: 4px;
   }
@@ -242,6 +252,30 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
+.faded {
+  opacity: 0.5;
+  transition: opacity ease-in-out 120ms;
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.faded-small {
+  color: #666;
+  font-size: 0.9em;
+  a, span {
+    color: #666;
+  }
+}
+
+.action-buttons {
+  text-align: right;
+  a {
+    display: inline-block;
+    padding: $-s;
+  }
+}
+
 
 .nested-page-list {
   list-style: none;
@@ -288,6 +322,25 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
+.book-tree h4 {
+  padding: $-m $-s 0 $-s;
+  i {
+    padding-right: $-s;
+  }
+}
+.book-tree .sidebar-page-list {
+  list-style: none;
+  margin: 0;
+  li a {
+    display: block;
+    padding: $-s $-m;
+    border-bottom: 2px dotted #333;
+  }
+  a.bold {
+    color: #EEE !important;
+  }
+}
+
 .sortable-page-list, .sortable-page-list ul {
   list-style: none;
   //background-color: rgba(0, 0, 0, 0.04);

resources/views/base.blade.php

@@ -27,26 +27,23 @@
 </head>
 <body>
 
-    <header>
+    <section id="sidebar">
-        <div class="padded row clearfix">
+        <header>
-            <div class="col-md-3">
+            <div class="padded row clearfix">
-                <div ><img class="logo float left" src="/bookstack.svg" alt="BookStack"></div>
+                <div class="col-md-12">
-            </div>
+                    {{--<div ><img class="logo float left" src="/bookstack.svg" alt="BookStack"></div>--}}
-            <div class="col-md-9">
+                    <div class="logo">BookStack</div>
-                <ul class="menu float">
-                    <li><a href="/books"><i class="fa fa-book"></i>Books</a></li>
-                </ul>
-                <div class="search-box float right">
-                    <form action="/pages/search/all" id="search-form" method="GET">
-                        {!! csrf_field() !!}
-                        <input type="text" placeholder="Search all pages..." name="term" id="search-input">
-                    </form>
                 </div>
             </div>
+        </header>
+        <div class="search-box">
+            <form action="/pages/search/all" id="search-form" method="GET">
+                <input type="text" placeholder="Search all pages..." name="term" id="search-input">
+            </form>
         </div>
-    </header>
+        <ul class="menu">
-
+            <li><a href="/books"><i class="fa fa-book"></i>Books</a></li>
-    <section id="sidebar" class="padded">
+        </ul>
         @yield('sidebar')
     </section>
 

resources/views/books/create.blade.php

@@ -2,18 +2,11 @@
 
 @section('content')
 
-    <div class="row">
+<div class="page-content">
-
+    <h1>Create New Book</h1>
-        <div class="col-md-3 page-menu">
+    <form action="/books" method="POST">
-            <h4>You are creating a new book.</h4>
+        @include('books/form')
-        </div>
+    </form>
-
+</div>
-        <div class="col-md-9 page-content">
-            <form action="/books" method="POST">
-                @include('books/form')
-            </form>
-        </div>
-
-    </div>
 
 @stop

resources/views/books/edit.blade.php

@@ -2,25 +2,18 @@
 
 @section('content')
 
-
+    <div class="page-content">
-    <div class="row">
+        <h1>Edit Book</h1>
-
+        <form action="/books/{{$book->slug}}" method="POST">
-        <div class="col-md-3 page-menu">
+            <input type="hidden" name="_method" value="PUT">
-            <h4>You are editing the details for the book '{{$book->name}}'.</h4>
+            @include('books/form', ['model' => $book])
-            <hr>
+        </form>
-            @include('form/delete-button', ['url' => '/books/' . $book->id . '/destroy', 'text' => 'Delete this book'])
+        <hr class="margin-top large">
+        <div class="margin-top large shaded padded">
+            <h2 class="margin-top">Delete this book</h2>
+            <p>This will delete this book and all it's pages.</p>
+            @include('form/delete-button', ['url' => '/books/' . $book->id . '/destroy', 'text' => 'Delete'])
         </div>
-
-        <div class="col-md-9 page-content">
-            <form action="/books/{{$book->slug}}" method="POST">
-                <input type="hidden" name="_method" value="PUT">
-                @include('books/form', ['model' => $book])
-            </form>
-        </div>
-
     </div>
 
-
-
-
 @stop

resources/views/books/index.blade.php

@@ -3,28 +3,27 @@
 @section('content')
 
 
-    <div class="row">
+<div class="row faded-small">
-
+    <div class="col-md-6"></div>
-        <div class="col-md-3 page-menu">
+    <div class="col-md-6 faded">
-            <h4>Books</h4>
+        <div class="action-buttons">
             <a href="/books/create">+ Add new book</a>
         </div>
-
-        <div class="col-md-9">
-
-            <div class="row">
-                @foreach($books as $book)
-                    <div class="col-md-6">
-                        <div class="book page-style">
-                            <h3><a href="{{$book->getUrl()}}">{{$book->name}}</a></h3>
-                            <p class="text-muted">{{$book->description}}</p>
-                        </div>
-                    </div>
-                @endforeach
-            </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>
+
 
 
 

resources/views/books/show.blade.php

@@ -2,33 +2,30 @@
 
 @section('content')
 
-
+    <div class="row faded-small">
-    <div class="row">
+        <div class="col-md-6"></div>
-
+        <div class="col-md-6">
-        <div class="col-md-3 page-menu">
+            <div class="action-buttons">
-            <h4>Book Actions</h4>
-            <div class="buttons">
                 <a href="{{$book->getEditUrl()}}"><i class="fa fa-pencil"></i>Edit Book</a>
                 <a href="{{ $book->getUrl() }}/sort"><i class="fa fa-sort"></i>Sort Pages</a>
             </div>
         </div>
+    </div>
 
-        <div class="page-content col-md-9 float left">
+    <div class="page-content">
-            <h1>{{$book->name}}</h1>
+        <h1>{{$book->name}}</h1>
-            <p class="text-muted">{{$book->description}}</p>
+        <p class="text-muted">{{$book->description}}</p>
-
-            <div class="clearfix header-group">
-                <h4 class="float">Pages</h4>
-                <a href="{{$book->getUrl() . '/page/create'}}" class="text-pos float right">+ New Page</a>
-            </div>
-
-            @include('pages/page-tree-list', ['pageTree' => $pageTree])
 
+        <div class="clearfix header-group">
+            <h4 class="float">Pages</h4>
+            <a href="{{$book->getUrl() . '/page/create'}}" class="text-pos float right">+ New Page</a>
         </div>
 
+        @include('pages/page-tree-list', ['pageTree' => $pageTree])
 
     </div>
 
+
     <script>
         $(function() {
 

resources/views/pages/form.blade.php

@@ -4,16 +4,17 @@
 <div class="page-style editor">
 
     {{ csrf_field() }}
-    <div class="title-input title-strip clearfix">
+    <div class="title-input page-title clearfix">
-        <button type="submit" class="button pos float right">Save Page</button>
+        <div class="input">
-        <div class="float left">
             @include('form/text', ['name' => 'name', 'placeholder' => 'Enter Page Title'])
         </div>
     </div>
     <div class="edit-area">
         @include('form/textarea', ['name' => 'html'])
     </div>
-
+    <div class="margin-top large">
+        <button type="submit" class="button pos">Save Page</button>
+    </div>
 </div>
 
 
@@ -27,13 +28,13 @@
         tinymce.init({
             selector: '.edit-area textarea',
             content_css: '/css/app.css',
-            body_class: 'container',
+            body_class: 'page-content',
             relative_urls: false,
             statusbar: false,
             height: 600,
             plugins: "image table textcolor paste link imagetools",
             toolbar: "undo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image link | fontsizeselect full",
-            content_style: "body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important}",
+            content_style: "body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important; margin-left:auto!important;margin-right:auto!important;}",
             file_browser_callback: function(field_name, url, type, win) {
                 ImageManager.show('#image-manager', function(image) {
                     win.document.getElementById(field_name).value = image.url;

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

@@ -1,4 +1,4 @@
-
+{{--Requires an array of pages to be passed as $pageTree--}}
 
 <ul class="nested-page-list">
     @foreach($pageTree as $subPage)

resources/views/pages/show.blade.php

@@ -1,23 +1,18 @@
 @extends('base')
 
 @section('sidebar')
-    <div class="page-nav">
+    <div class="book-tree">
-        <h4>Navigation</h4>
+        <h4><a href="/books/{{$sidebarBookTree['slug']}}"><i class="fa fa-book"></i>{{$sidebarBookTree['name']}}</a></h4>
-        <ul class="page-nav-list"></ul>
+        @if($sidebarBookTree['hasChildren'])
-    </div>
+            @include('pages/sidebar-tree-list', ['pageTree' => $sidebarBookTree['pages']])
-    <div class="page-actions">
+        @endif
-        <h4>Actions</h4>
-        <div class="list">
-            <a href="{{$page->getUrl() . '/edit'}}" class="muted"><i class="fa fa-pencil"></i>Edit this page</a>
-            <a href="{{$page->getUrl() . '/create'}}" class="muted"><i class="fa fa-file-o"></i>Create Sub-page</a>
-        </div>
     </div>
 @stop
 
 @section('content')
 
-    <div class="row">
+    <div class="row faded-small">
-        <div class="col-md-6">
+        <div class="col-md-6 faded">
             <div class="breadcrumbs padded-horizontal">
                 <a href="{{$book->getUrl()}}"><i class="fa fa-book"></i>{{ $book->name }}</a>
                 @if($breadCrumbs)
@@ -28,8 +23,21 @@
                 @endif
             </div>
         </div>
+        <div class="col-md-6 faded">
+            <div class="action-buttons">
+                <a href="{{$page->getUrl() . '/edit'}}" ><i class="fa fa-pencil"></i>Edit this page</a>
+                <a href="{{$page->getUrl() . '/create'}}"><i class="fa fa-file-o"></i>Create Sub-page</a>
+            </div>
+        </div>
     </div>
 
+    <div class="side-nav faded">
+        <h4>Page Navigation</h4>
+        <ul class="page-nav-list">
+        </ul>
+    </div>
+
+
     <div class="page-content">
         <h1>{{$page->name}}</h1>
         @if(count($page->children) > 0)

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

@@ -0,0 +1,12 @@
+{{--Requires an array of pages to be passed as $pageTree--}}
+
+<ul class="sidebar-page-list">
+    @foreach($pageTree as $subPage)
+        <li @if($subPage['hasChildren'])class="has-children"@endif>
+            <a href="{{$subPage['url']}}" @if($subPage['current'])class="bold"@endif>{{$subPage['name']}}</a>
+            @if($subPage['hasChildren'])
+                @include('pages/sidebar-tree-list', ['pageTree' => $subPage['pages']])
+            @endif
+        </li>
+    @endforeach
+</ul>