Vastly improved design

[bookstack] / resources / views / pages / show.blade.php

diff --git a/resources/views/pages/show.blade.php b/resources/views/pages/show.blade.php
index fb27d1e8eeaf68a99f16bc2cedb957771f201bf1..ac586d18eaa0affdfb861696460671bec9d66460 100644 (file)
--- a/resources/views/pages/show.blade.php
+++ b/resources/views/pages/show.blade.php
@@ -2,11 +2,54 @@
 
 @section('content')
 
-    <a href="{{$page->getUrl() . '/edit'}}" class="button primary float right">Edit Page</a>
+    <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>
+                <a href="{{$page->getUrl() . '/edit'}}" class="muted"><i class="fa fa-pencil"></i>Edit this page</a>
+            </div>
+        </div>
 
-    <h1>{{$page->name}}</h1>
-
-    <div class="page-content">
-        {!! $page->html !!}
+        <div class="page-content right col-md-9">
+            <h1>{{$page->name}}</h1>
+            {!! $page->html !!}
+        </div>
     </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');
+            var headers = pageContent.find('h1, h2, h3, h4, h5, h6');
+            var sortedHeaders = [];
+            headers.each(function() {
+                var header = $(this);
+                var tag = header.prop('tagName');
+                var listElem = $('<li></li>').addClass('nav-'+tag);
+                var link = $('<a></a>').text(header.text().trim()).attr('href', '#');
+                listElem.append(link);
+                pageNav.append(listElem);
+                link.click(function(e) {
+                    e.preventDefault();
+                    header.smoothScrollTo();
+                })
+            });
+        });
+    </script>
 @stop