diff --git a/resources/assets/sass/_forms.scss b/resources/assets/sass/_forms.scss
index 861cfbb9f..c2755efe3 100644
--- a/resources/assets/sass/_forms.scss
+++ b/resources/assets/sass/_forms.scss
@@ -65,15 +65,13 @@ input[type="text"], input[type="number"], input[type="email"], input[type="searc
}
.title-input.page-title {
- padding: $-s;
+ font-size: 0.8em;
}
.title-input.page-title input[type="text"]{
//border: 2px dotted #BBB;
margin-bottom: 0;
}
-.edit-area {
- padding: 0 $-s $-s $-s;
-}
+
.description-input textarea {
@extend .inline-input-style;
diff --git a/resources/assets/sass/_html.scss b/resources/assets/sass/_html.scss
index 6b21a48a7..5071b3296 100644
--- a/resources/assets/sass/_html.scss
+++ b/resources/assets/sass/_html.scss
@@ -2,7 +2,7 @@
box-sizing: border-box;
}
html {
- background-color: #f8f8f8;
+ background-color: #FFFFFF;
}
body {
font-family: $text;
diff --git a/resources/assets/sass/_tinymce.scss b/resources/assets/sass/_tinymce.scss
index 9c7c398cf..10a3c0175 100644
--- a/resources/assets/sass/_tinymce.scss
+++ b/resources/assets/sass/_tinymce.scss
@@ -19,4 +19,12 @@
max-width: 100%;
margin-left: -$-s;
box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.08);
+}
+
+.edit-area {
+ height: 100%;
+}
+
+.page-style.editor {
+ height: 100%;
}
\ No newline at end of file
diff --git a/resources/assets/sass/styles.scss b/resources/assets/sass/styles.scss
index 0fd4f638d..421686db0 100644
--- a/resources/assets/sass/styles.scss
+++ b/resources/assets/sass/styles.scss
@@ -11,21 +11,40 @@
header {
background-color: #f8f8f8;
- position: fixed;
display: block;
width: 100%;
- z-index: -1;
+ position: fixed;
+ z-index: 2;
top: 0;
+ border-bottom: 1px solid #DDD;
+ .padded {
+ padding: $-m;
+ }
}
+
+#sidebar {
+ position: fixed;
+ background-color: #FFF;
+ height: 100%;
+ top: 0;
+ z-index: 1;
+ padding-top: 63px + $-m;
+ width: 300px;
+ border-right: 1px solid #DDD;
+}
+
+#content {
+ margin-top: 63px;
+ margin-left: 300px;
+ display: block;
+ position: relative;
+}
+
.logo {
width: 180px;
opacity: 0.8;
}
-body {
- margin-top: 64px;
-}
-
header hr {
margin-top: 0;
}
@@ -46,15 +65,8 @@ header .menu {
font-size: 1.4em;
}
-.affix {
- position: fixed;
-}
-
.page-style {
- background-color: #FFF;
padding: $-s $-xxl $-xxl $-xxl;
- border-radius: 4px;
- box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.15);
margin-bottom: $-xxl;
max-width: 100%;
}
@@ -66,6 +78,9 @@ header .menu {
.page-content {
@extend .page-style;
min-height: 70vh;
+ max-width: 840px;
+ margin-left: auto;
+ margin-right: auto;
&.right {
float: right;
}
diff --git a/resources/views/base.blade.php b/resources/views/base.blade.php
index 282b0d35e..bae7a4f2c 100644
--- a/resources/views/base.blade.php
+++ b/resources/views/base.blade.php
@@ -28,27 +28,29 @@
<body>
<header>
- <div class="container">
- <div class="padded-vertical 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>
- </div>
+ <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>
</div>
</div>
</div>
</header>
- <section class="container">
+ <section id="sidebar" class="padded">
+ @yield('sidebar')
+ </section>
+
+ <section id="content">
@yield('content')
</section>
diff --git a/resources/views/pages/edit.blade.php b/resources/views/pages/edit.blade.php
index 30a27cb79..fee9782fd 100644
--- a/resources/views/pages/edit.blade.php
+++ b/resources/views/pages/edit.blade.php
@@ -8,12 +8,10 @@
@section('content')
- <div class="row">
- <form action="{{$page->getUrl()}}" method="POST">
- <input type="hidden" name="_method" value="PUT">
- @include('pages/form', ['model' => $page])
- </form>
- </div>
+ <form action="{{$page->getUrl()}}" method="POST">
+ <input type="hidden" name="_method" value="PUT">
+ @include('pages/form', ['model' => $page])
+ </form>
@stop
diff --git a/resources/views/pages/form.blade.php b/resources/views/pages/form.blade.php
index a100bdbca..4028998c9 100644
--- a/resources/views/pages/form.blade.php
+++ b/resources/views/pages/form.blade.php
@@ -1,14 +1,14 @@
-<div class="col-md-3 page-menu">
- <h4>You are editing a page</h4>
- <button type="submit" class="button pos">Save Page</button>
-</div>
-<div class="col-md-9 page-style editor">
+
+<div class="page-style editor">
{{ csrf_field() }}
- <div class="title-input page-title">
- @include('form/text', ['name' => 'name', 'placeholder' => 'Enter Page Title'])
+ <div class="title-input title-strip clearfix">
+ <button type="submit" class="button pos float right">Save Page</button>
+ <div class="float left">
+ @include('form/text', ['name' => 'name', 'placeholder' => 'Enter Page Title'])
+ </div>
</div>
<div class="edit-area">
@include('form/textarea', ['name' => 'html'])
@@ -29,6 +29,7 @@
content_css: '/css/app.css',
body_class: 'container',
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",
diff --git a/resources/views/pages/show.blade.php b/resources/views/pages/show.blade.php
index a5eac3c98..f623168f6 100644
--- a/resources/views/pages/show.blade.php
+++ b/resources/views/pages/show.blade.php
@@ -1,24 +1,24 @@
@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>
+@stop
+
@section('content')
<div class="row">
- <div class="page-menu col-md-3">
- <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>
- </div>
-
- <div class="page-content right col-md-9">
- <div class="breadcrumbs">
+ <div class="col-md-6">
+ <div class="breadcrumbs padded-horizontal">
<a href="{{$book->getUrl()}}"><i class="fa fa-book"></i>{{ $book->name }}</a>
@if($breadCrumbs)
@foreach($breadCrumbs as $parentPage)
@@ -27,32 +27,26 @@
@endforeach
@endif
</div>
- <h1>{{$page->name}}</h1>
- @if(count($page->children) > 0)
- <h4 class="text-muted">Sub-pages</h4>
- <div class="page-list">
- @foreach($page->children as $childPage)
- <a href="{{ $childPage->getUrl() }}">{{ $childPage->name }}</a>
- @endforeach
- </div>
- @endif
- {!! $page->html !!}
</div>
</div>
+ <div class="page-content">
+ <h1>{{$page->name}}</h1>
+ @if(count($page->children) > 0)
+ <h4 class="text-muted">Sub-pages</h4>
+ <div class="page-list">
+ @foreach($page->children as $childPage)
+ <a href="{{ $childPage->getUrl() }}">{{ $childPage->name }}</a>
+ @endforeach
+ </div>
+ @endif
+ {!! $page->html !!}
+ </div>
+
+
<script>
$(document).ready(function() {
- // Set up fixed side menu
- $('.page-menu').affix({
- offset: {
- top: 10,
- bottom: function () {
- return (this.bottom = $('.footer').outerHeight(true))
- }
- }
- });
-
// Set up document navigation
var pageNav = $('.page-nav-list');
var pageContent = $('.page-content');