diff --git a/app/Http/Controllers/PageController.php b/app/Http/Controllers/PageController.php
index 19e201183..c0ab01a09 100644
--- a/app/Http/Controllers/PageController.php
+++ b/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]);
}
/**
diff --git a/app/Repos/BookRepo.php b/app/Repos/BookRepo.php
index 060b6fc49..c43f449b0 100644
--- a/app/Repos/BookRepo.php
+++ b/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;
}
diff --git a/app/Repos/PageRepo.php b/app/Repos/PageRepo.php
index 05fe3f707..0e2f136be 100644
--- a/app/Repos/PageRepo.php
+++ b/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;
diff --git a/resources/assets/sass/_forms.scss b/resources/assets/sass/_forms.scss
index c2755efe3..5472e3053 100644
--- a/resources/assets/sass/_forms.scss
+++ b/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;
}
diff --git a/resources/assets/sass/_text.scss b/resources/assets/sass/_text.scss
index d083a9070..cf0649873 100644
--- a/resources/assets/sass/_text.scss
+++ b/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;
diff --git a/resources/assets/sass/styles.scss b/resources/assets/sass/styles.scss
index 421686db0..b855a8067 100644
--- a/resources/assets/sass/styles.scss
+++ b/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;
- opacity: 0.8;
+ font-size: 2em;
+ padding: $-xl $-s;
+ font-weight: bold;
+ color: #CCC;
}
-header hr {
- margin-top: 0;
+.search-box {
+ 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 {
- margin-bottom: 0;
+ul.menu {
list-style: none;
- margin-left: 0;
- li {
- display: inline-block;
- margin-right: $-m;
+ margin: 0;
+ li a {
+ padding: $-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 {
- opacity: 0.6;
- transition: opacity ease-in-out 120ms;
- &:hover {
- opacity: 1;
- }
- .buttons a {
- display: block;
- }
+.side-nav {
+ position: fixed;
+ padding-left: $-m;
+ opacity: 0.8;
+ margin-top: $-xxl;
+ margin-left: 0;
+ max-width: 240px;
}
.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);
diff --git a/resources/views/base.blade.php b/resources/views/base.blade.php
index bae7a4f2c..47c4a13d3 100644
--- a/resources/views/base.blade.php
+++ b/resources/views/base.blade.php
@@ -27,26 +27,23 @@
</head>
<body>
- <header>
- <div class="padded row clearfix">
- <div class="col-md-3">
- <div ><img class="logo float left" src="/bookstack.svg" alt="BookStack"></div>
- </div>
- <div class="col-md-9">
- <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>
+ <section id="sidebar">
+ <header>
+ <div class="padded row clearfix">
+ <div class="col-md-12">
+ {{--<div ><img class="logo float left" src="/bookstack.svg" alt="BookStack"></div>--}}
+ <div class="logo">BookStack</div>
</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>
-
- <section id="sidebar" class="padded">
+ <ul class="menu">
+ <li><a href="/books"><i class="fa fa-book"></i>Books</a></li>
+ </ul>
@yield('sidebar')
</section>
diff --git a/resources/views/books/create.blade.php b/resources/views/books/create.blade.php
index c3bb3fd6a..fbf5eff1b 100644
--- a/resources/views/books/create.blade.php
+++ b/resources/views/books/create.blade.php
@@ -2,18 +2,11 @@
@section('content')
- <div class="row">
-
- <div class="col-md-3 page-menu">
- <h4>You are creating a new book.</h4>
- </div>
-
- <div class="col-md-9 page-content">
- <form action="/books" method="POST">
- @include('books/form')
- </form>
- </div>
-
- </div>
+<div class="page-content">
+ <h1>Create New Book</h1>
+ <form action="/books" method="POST">
+ @include('books/form')
+ </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 4cf54a6f7..315057f85 100644
--- a/resources/views/books/edit.blade.php
+++ b/resources/views/books/edit.blade.php
@@ -2,25 +2,18 @@
@section('content')
-
- <div class="row">
-
- <div class="col-md-3 page-menu">
- <h4>You are editing the details for the book '{{$book->name}}'.</h4>
- <hr>
- @include('form/delete-button', ['url' => '/books/' . $book->id . '/destroy', 'text' => 'Delete this book'])
+ <div class="page-content">
+ <h1>Edit Book</h1>
+ <form action="/books/{{$book->slug}}" method="POST">
+ <input type="hidden" name="_method" value="PUT">
+ @include('books/form', ['model' => $book])
+ </form>
+ <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
\ No newline at end of file
diff --git a/resources/views/books/index.blade.php b/resources/views/books/index.blade.php
index e7643a768..0cd1d82fd 100644
--- a/resources/views/books/index.blade.php
+++ b/resources/views/books/index.blade.php
@@ -3,28 +3,27 @@
@section('content')
- <div class="row">
-
- <div class="col-md-3 page-menu">
- <h4>Books</h4>
+<div class="row faded-small">
+ <div class="col-md-6"></div>
+ <div class="col-md-6 faded">
+ <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>
+
diff --git a/resources/views/books/show.blade.php b/resources/views/books/show.blade.php
index 6b0ed6235..a4a31b995 100644
--- a/resources/views/books/show.blade.php
+++ b/resources/views/books/show.blade.php
@@ -2,33 +2,30 @@
@section('content')
-
- <div class="row">
-
- <div class="col-md-3 page-menu">
- <h4>Book Actions</h4>
- <div class="buttons">
+ <div class="row faded-small">
+ <div class="col-md-6"></div>
+ <div class="col-md-6">
+ <div class="action-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">
- <h1>{{$book->name}}</h1>
- <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="page-content">
+ <h1>{{$book->name}}</h1>
+ <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>
+
<script>
$(function() {
diff --git a/resources/views/pages/form.blade.php b/resources/views/pages/form.blade.php
index 4028998c9..c96a14829 100644
--- a/resources/views/pages/form.blade.php
+++ b/resources/views/pages/form.blade.php
@@ -4,16 +4,17 @@
<div class="page-style editor">
{{ csrf_field() }}
- <div class="title-input title-strip clearfix">
- <button type="submit" class="button pos float right">Save Page</button>
- <div class="float left">
+ <div class="title-input page-title clearfix">
+ <div class="input">
@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;
diff --git a/resources/views/pages/page-tree-list.blade.php b/resources/views/pages/page-tree-list.blade.php
index 9471bdfe6..7f730fb15 100644
--- a/resources/views/pages/page-tree-list.blade.php
+++ b/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)
diff --git a/resources/views/pages/show.blade.php b/resources/views/pages/show.blade.php
index f623168f6..97c7750cb 100644
--- a/resources/views/pages/show.blade.php
+++ b/resources/views/pages/show.blade.php
@@ -1,23 +1,18 @@
@extends('base')
@section('sidebar')
- <div class="page-nav">
- <h4>Navigation</h4>
- <ul class="page-nav-list"></ul>
- </div>
- <div class="page-actions">
- <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 class="book-tree">
+ <h4><a href="/books/{{$sidebarBookTree['slug']}}"><i class="fa fa-book"></i>{{$sidebarBookTree['name']}}</a></h4>
+ @if($sidebarBookTree['hasChildren'])
+ @include('pages/sidebar-tree-list', ['pageTree' => $sidebarBookTree['pages']])
+ @endif
</div>
@stop
@section('content')
- <div class="row">
- <div class="col-md-6">
+ <div class="row faded-small">
+ <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)
diff --git a/resources/views/pages/sidebar-tree-list.blade.php b/resources/views/pages/sidebar-tree-list.blade.php
new file mode 100644
index 000000000..bd84b10d0
--- /dev/null
+++ b/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>
\ No newline at end of file