Showing
8 changed files
with
64 additions
and
48 deletions
| ... | @@ -65,15 +65,13 @@ input[type="text"], input[type="number"], input[type="email"], input[type="searc | ... | @@ -65,15 +65,13 @@ input[type="text"], input[type="number"], input[type="email"], input[type="searc |
| 65 | } | 65 | } |
| 66 | 66 | ||
| 67 | .title-input.page-title { | 67 | .title-input.page-title { |
| 68 | - padding: $-s; | 68 | + font-size: 0.8em; |
| 69 | } | 69 | } |
| 70 | .title-input.page-title input[type="text"]{ | 70 | .title-input.page-title input[type="text"]{ |
| 71 | //border: 2px dotted #BBB; | 71 | //border: 2px dotted #BBB; |
| 72 | margin-bottom: 0; | 72 | margin-bottom: 0; |
| 73 | } | 73 | } |
| 74 | -.edit-area { | 74 | + |
| 75 | - padding: 0 $-s $-s $-s; | ||
| 76 | -} | ||
| 77 | 75 | ||
| 78 | .description-input textarea { | 76 | .description-input textarea { |
| 79 | @extend .inline-input-style; | 77 | @extend .inline-input-style; | ... | ... |
| ... | @@ -20,3 +20,11 @@ | ... | @@ -20,3 +20,11 @@ |
| 20 | margin-left: -$-s; | 20 | margin-left: -$-s; |
| 21 | box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.08); | 21 | box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.08); |
| 22 | } | 22 | } |
| 23 | + | ||
| 24 | +.edit-area { | ||
| 25 | + height: 100%; | ||
| 26 | +} | ||
| 27 | + | ||
| 28 | +.page-style.editor { | ||
| 29 | + height: 100%; | ||
| 30 | +} | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
| ... | @@ -11,21 +11,40 @@ | ... | @@ -11,21 +11,40 @@ |
| 11 | 11 | ||
| 12 | header { | 12 | header { |
| 13 | background-color: #f8f8f8; | 13 | background-color: #f8f8f8; |
| 14 | - position: fixed; | ||
| 15 | display: block; | 14 | display: block; |
| 16 | width: 100%; | 15 | width: 100%; |
| 17 | - z-index: -1; | 16 | + position: fixed; |
| 17 | + z-index: 2; | ||
| 18 | top: 0; | 18 | top: 0; |
| 19 | + border-bottom: 1px solid #DDD; | ||
| 20 | + .padded { | ||
| 21 | + padding: $-m; | ||
| 22 | + } | ||
| 23 | +} | ||
| 24 | + | ||
| 25 | +#sidebar { | ||
| 26 | + position: fixed; | ||
| 27 | + background-color: #FFF; | ||
| 28 | + height: 100%; | ||
| 29 | + top: 0; | ||
| 30 | + z-index: 1; | ||
| 31 | + padding-top: 63px + $-m; | ||
| 32 | + width: 300px; | ||
| 33 | + border-right: 1px solid #DDD; | ||
| 34 | +} | ||
| 35 | + | ||
| 36 | +#content { | ||
| 37 | + margin-top: 63px; | ||
| 38 | + margin-left: 300px; | ||
| 39 | + display: block; | ||
| 40 | + position: relative; | ||
| 19 | } | 41 | } |
| 42 | + | ||
| 20 | .logo { | 43 | .logo { |
| 21 | width: 180px; | 44 | width: 180px; |
| 22 | opacity: 0.8; | 45 | opacity: 0.8; |
| 23 | } | 46 | } |
| 24 | 47 | ||
| 25 | -body { | ||
| 26 | - margin-top: 64px; | ||
| 27 | -} | ||
| 28 | - | ||
| 29 | header hr { | 48 | header hr { |
| 30 | margin-top: 0; | 49 | margin-top: 0; |
| 31 | } | 50 | } |
| ... | @@ -46,15 +65,8 @@ header .menu { | ... | @@ -46,15 +65,8 @@ header .menu { |
| 46 | font-size: 1.4em; | 65 | font-size: 1.4em; |
| 47 | } | 66 | } |
| 48 | 67 | ||
| 49 | -.affix { | ||
| 50 | - position: fixed; | ||
| 51 | -} | ||
| 52 | - | ||
| 53 | .page-style { | 68 | .page-style { |
| 54 | - background-color: #FFF; | ||
| 55 | padding: $-s $-xxl $-xxl $-xxl; | 69 | padding: $-s $-xxl $-xxl $-xxl; |
| 56 | - border-radius: 4px; | ||
| 57 | - box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.15); | ||
| 58 | margin-bottom: $-xxl; | 70 | margin-bottom: $-xxl; |
| 59 | max-width: 100%; | 71 | max-width: 100%; |
| 60 | } | 72 | } |
| ... | @@ -66,6 +78,9 @@ header .menu { | ... | @@ -66,6 +78,9 @@ header .menu { |
| 66 | .page-content { | 78 | .page-content { |
| 67 | @extend .page-style; | 79 | @extend .page-style; |
| 68 | min-height: 70vh; | 80 | min-height: 70vh; |
| 81 | + max-width: 840px; | ||
| 82 | + margin-left: auto; | ||
| 83 | + margin-right: auto; | ||
| 69 | &.right { | 84 | &.right { |
| 70 | float: right; | 85 | float: right; |
| 71 | } | 86 | } | ... | ... |
| ... | @@ -28,8 +28,7 @@ | ... | @@ -28,8 +28,7 @@ |
| 28 | <body> | 28 | <body> |
| 29 | 29 | ||
| 30 | <header> | 30 | <header> |
| 31 | - <div class="container"> | 31 | + <div class="padded row clearfix"> |
| 32 | - <div class="padded-vertical row clearfix"> | ||
| 33 | <div class="col-md-3"> | 32 | <div class="col-md-3"> |
| 34 | <div ><img class="logo float left" src="/bookstack.svg" alt="BookStack"></div> | 33 | <div ><img class="logo float left" src="/bookstack.svg" alt="BookStack"></div> |
| 35 | </div> | 34 | </div> |
| ... | @@ -45,10 +44,13 @@ | ... | @@ -45,10 +44,13 @@ |
| 45 | </div> | 44 | </div> |
| 46 | </div> | 45 | </div> |
| 47 | </div> | 46 | </div> |
| 48 | - </div> | ||
| 49 | </header> | 47 | </header> |
| 50 | 48 | ||
| 51 | - <section class="container"> | 49 | + <section id="sidebar" class="padded"> |
| 50 | + @yield('sidebar') | ||
| 51 | + </section> | ||
| 52 | + | ||
| 53 | + <section id="content"> | ||
| 52 | @yield('content') | 54 | @yield('content') |
| 53 | </section> | 55 | </section> |
| 54 | 56 | ... | ... |
| ... | @@ -8,12 +8,10 @@ | ... | @@ -8,12 +8,10 @@ |
| 8 | 8 | ||
| 9 | @section('content') | 9 | @section('content') |
| 10 | 10 | ||
| 11 | - <div class="row"> | ||
| 12 | <form action="{{$page->getUrl()}}" method="POST"> | 11 | <form action="{{$page->getUrl()}}" method="POST"> |
| 13 | <input type="hidden" name="_method" value="PUT"> | 12 | <input type="hidden" name="_method" value="PUT"> |
| 14 | @include('pages/form', ['model' => $page]) | 13 | @include('pages/form', ['model' => $page]) |
| 15 | </form> | 14 | </form> |
| 16 | - </div> | ||
| 17 | 15 | ||
| 18 | @stop | 16 | @stop |
| 19 | 17 | ... | ... |
| 1 | 1 | ||
| 2 | -<div class="col-md-3 page-menu"> | ||
| 3 | - <h4>You are editing a page</h4> | ||
| 4 | - <button type="submit" class="button pos">Save Page</button> | ||
| 5 | -</div> | ||
| 6 | 2 | ||
| 7 | -<div class="col-md-9 page-style editor"> | 3 | + |
| 4 | +<div class="page-style editor"> | ||
| 8 | 5 | ||
| 9 | {{ csrf_field() }} | 6 | {{ csrf_field() }} |
| 10 | - <div class="title-input page-title"> | 7 | + <div class="title-input title-strip clearfix"> |
| 8 | + <button type="submit" class="button pos float right">Save Page</button> | ||
| 9 | + <div class="float left"> | ||
| 11 | @include('form/text', ['name' => 'name', 'placeholder' => 'Enter Page Title']) | 10 | @include('form/text', ['name' => 'name', 'placeholder' => 'Enter Page Title']) |
| 12 | </div> | 11 | </div> |
| 12 | + </div> | ||
| 13 | <div class="edit-area"> | 13 | <div class="edit-area"> |
| 14 | @include('form/textarea', ['name' => 'html']) | 14 | @include('form/textarea', ['name' => 'html']) |
| 15 | </div> | 15 | </div> |
| ... | @@ -29,6 +29,7 @@ | ... | @@ -29,6 +29,7 @@ |
| 29 | content_css: '/css/app.css', | 29 | content_css: '/css/app.css', |
| 30 | body_class: 'container', | 30 | body_class: 'container', |
| 31 | relative_urls: false, | 31 | relative_urls: false, |
| 32 | + statusbar: false, | ||
| 32 | height: 600, | 33 | height: 600, |
| 33 | plugins: "image table textcolor paste link imagetools", | 34 | plugins: "image table textcolor paste link imagetools", |
| 34 | toolbar: "undo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image link | fontsizeselect full", | 35 | toolbar: "undo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image link | fontsizeselect full", | ... | ... |
| 1 | @extends('base') | 1 | @extends('base') |
| 2 | 2 | ||
| 3 | -@section('content') | 3 | +@section('sidebar') |
| 4 | - | ||
| 5 | - <div class="row"> | ||
| 6 | - <div class="page-menu col-md-3"> | ||
| 7 | <div class="page-nav"> | 4 | <div class="page-nav"> |
| 8 | <h4>Navigation</h4> | 5 | <h4>Navigation</h4> |
| 9 | <ul class="page-nav-list"></ul> | 6 | <ul class="page-nav-list"></ul> |
| ... | @@ -15,10 +12,13 @@ | ... | @@ -15,10 +12,13 @@ |
| 15 | <a href="{{$page->getUrl() . '/create'}}" class="muted"><i class="fa fa-file-o"></i>Create Sub-page</a> | 12 | <a href="{{$page->getUrl() . '/create'}}" class="muted"><i class="fa fa-file-o"></i>Create Sub-page</a> |
| 16 | </div> | 13 | </div> |
| 17 | </div> | 14 | </div> |
| 18 | - </div> | 15 | +@stop |
| 19 | 16 | ||
| 20 | - <div class="page-content right col-md-9"> | 17 | +@section('content') |
| 21 | - <div class="breadcrumbs"> | 18 | + |
| 19 | + <div class="row"> | ||
| 20 | + <div class="col-md-6"> | ||
| 21 | + <div class="breadcrumbs padded-horizontal"> | ||
| 22 | <a href="{{$book->getUrl()}}"><i class="fa fa-book"></i>{{ $book->name }}</a> | 22 | <a href="{{$book->getUrl()}}"><i class="fa fa-book"></i>{{ $book->name }}</a> |
| 23 | @if($breadCrumbs) | 23 | @if($breadCrumbs) |
| 24 | @foreach($breadCrumbs as $parentPage) | 24 | @foreach($breadCrumbs as $parentPage) |
| ... | @@ -27,6 +27,10 @@ | ... | @@ -27,6 +27,10 @@ |
| 27 | @endforeach | 27 | @endforeach |
| 28 | @endif | 28 | @endif |
| 29 | </div> | 29 | </div> |
| 30 | + </div> | ||
| 31 | + </div> | ||
| 32 | + | ||
| 33 | + <div class="page-content"> | ||
| 30 | <h1>{{$page->name}}</h1> | 34 | <h1>{{$page->name}}</h1> |
| 31 | @if(count($page->children) > 0) | 35 | @if(count($page->children) > 0) |
| 32 | <h4 class="text-muted">Sub-pages</h4> | 36 | <h4 class="text-muted">Sub-pages</h4> |
| ... | @@ -38,21 +42,11 @@ | ... | @@ -38,21 +42,11 @@ |
| 38 | @endif | 42 | @endif |
| 39 | {!! $page->html !!} | 43 | {!! $page->html !!} |
| 40 | </div> | 44 | </div> |
| 41 | - </div> | 45 | + |
| 42 | 46 | ||
| 43 | <script> | 47 | <script> |
| 44 | $(document).ready(function() { | 48 | $(document).ready(function() { |
| 45 | 49 | ||
| 46 | - // Set up fixed side menu | ||
| 47 | - $('.page-menu').affix({ | ||
| 48 | - offset: { | ||
| 49 | - top: 10, | ||
| 50 | - bottom: function () { | ||
| 51 | - return (this.bottom = $('.footer').outerHeight(true)) | ||
| 52 | - } | ||
| 53 | - } | ||
| 54 | - }); | ||
| 55 | - | ||
| 56 | // Set up document navigation | 50 | // Set up document navigation |
| 57 | var pageNav = $('.page-nav-list'); | 51 | var pageNav = $('.page-nav-list'); |
| 58 | var pageContent = $('.page-content'); | 52 | var pageContent = $('.page-content'); | ... | ... |
-
Please register or sign in to post a comment