mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 01:36:00 -04:00
Vastly improved design and cleaned text input
This commit is contained in:
Dan Brown
parent
2c95528de4
commit
ef77c10a70
@ -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]);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -27,26 +27,23 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section id="sidebar">
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<section id="sidebar" class="padded">
|
||||
<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>
|
||||
<ul class="menu">
|
||||
<li><a href="/books"><i class="fa fa-book"></i>Books</a></li>
|
||||
</ul>
|
||||
@yield('sidebar')
|
||||
</section>
|
||||
|
||||
|
||||
@ -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">
|
||||
<div class="page-content">
|
||||
<h1>Create New Book</h1>
|
||||
<form action="/books" method="POST">
|
||||
@include('books/form')
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@stop
|
||||
@ -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>
|
||||
|
||||
<div class="col-md-9 page-content">
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
@stop
|
||||
@ -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>
|
||||
</div>
|
||||
|
||||
<div class="col-md-9">
|
||||
|
||||
<div class="row">
|
||||
<div class="page-content">
|
||||
<h1>Books</h1>
|
||||
@foreach($books as $book)
|
||||
<div class="col-md-6">
|
||||
<div class="book page-style">
|
||||
<div class="book">
|
||||
<h3><a href="{{$book->getUrl()}}">{{$book->name}}</a></h3>
|
||||
<p class="text-muted">{{$book->description}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -2,18 +2,17 @@
|
||||
|
||||
@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">
|
||||
<div class="page-content">
|
||||
<h1>{{$book->name}}</h1>
|
||||
<p class="text-muted">{{$book->description}}</p>
|
||||
|
||||
@ -27,8 +26,6 @@
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
|
||||
{{--Requires an array of pages to be passed as $pageTree--}}
|
||||
|
||||
<ul class="nested-page-list">
|
||||
@foreach($pageTree as $subPage)
|
||||
|
||||
@ -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,7 +23,20 @@
|
||||
@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>
|
||||
|
||||
12
resources/views/pages/sidebar-tree-list.blade.php
Normal file
12
resources/views/pages/sidebar-tree-list.blade.php
Normal file
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user