mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 01:36:00 -04:00
Vastly improved design
This commit is contained in:
Dan Brown
parent
c4d0f38a67
commit
46217a5880
@ -107,13 +107,14 @@ class BookController extends Controller
|
||||
'name' => 'required|string|max:255',
|
||||
'description' => 'string|max:1000'
|
||||
]);
|
||||
$book->fill($request->all());
|
||||
$slug = Str::slug($book->name);
|
||||
while($this->bookRepo->countBySlug($slug) > 0 && $book->slug != $slug) {
|
||||
$slug += '1';
|
||||
}
|
||||
$book->slug = $slug;
|
||||
$book->save();
|
||||
return redirect('/books');
|
||||
return redirect($book->getUrl());
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -85,7 +85,8 @@ class PageController extends Controller
|
||||
*/
|
||||
public function show($bookSlug, $pageSlug)
|
||||
{
|
||||
$page = $this->pageRepo->getBySlug($pageSlug);
|
||||
$book = $this->bookRepo->getBySlug($bookSlug);
|
||||
$page = $this->pageRepo->getBySlug($pageSlug, $book->id);
|
||||
return view('pages/show', ['page' => $page]);
|
||||
}
|
||||
|
||||
@ -98,7 +99,8 @@ class PageController extends Controller
|
||||
*/
|
||||
public function edit($bookSlug, $pageSlug)
|
||||
{
|
||||
$page = $this->pageRepo->getBySlug($pageSlug);
|
||||
$book = $this->bookRepo->getBySlug($bookSlug);
|
||||
$page = $this->pageRepo->getBySlug($pageSlug, $book->id);
|
||||
return view('pages/edit', ['page' => $page]);
|
||||
}
|
||||
|
||||
@ -112,8 +114,8 @@ class PageController extends Controller
|
||||
*/
|
||||
public function update(Request $request, $bookSlug, $pageSlug)
|
||||
{
|
||||
$page = $this->pageRepo->getBySlug($pageSlug);
|
||||
$book = $this->bookRepo->getBySlug($bookSlug);
|
||||
$page = $this->pageRepo->getBySlug($pageSlug, $book->id);
|
||||
$page->fill($request->all());
|
||||
$slug = Str::slug($page->name);
|
||||
while($this->pageRepo->countBySlug($slug, $book->id) > 0 && $slug != $pageSlug) {
|
||||
|
||||
@ -27,9 +27,9 @@ class PageRepo
|
||||
return $this->page->all();
|
||||
}
|
||||
|
||||
public function getBySlug($slug)
|
||||
public function getBySlug($slug, $bookId)
|
||||
{
|
||||
return $this->page->where('slug', '=', $slug)->first();
|
||||
return $this->page->where('slug', '=', $slug)->where('book_id', '=', $bookId)->first();
|
||||
}
|
||||
|
||||
public function newFromInput($input)
|
||||
|
||||
@ -15,6 +15,8 @@
|
||||
],
|
||||
"dependencies": {
|
||||
"dropzone": "~4.0.1",
|
||||
"tinymce-dist": "~4.2.1"
|
||||
"tinymce-dist": "~4.2.1",
|
||||
"bootstrap": "~3.3.5",
|
||||
"jquery-sortable": "~0.9.13"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
var elixir = require('laravel-elixir');
|
||||
require('laravel-elixir-livereload');
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
@ -12,5 +13,5 @@ var elixir = require('laravel-elixir');
|
||||
*/
|
||||
|
||||
elixir(function(mix) {
|
||||
mix.sass('styles.scss');
|
||||
mix.sass('styles.scss').livereload();
|
||||
});
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
{
|
||||
"private": true,
|
||||
"devDependencies": {
|
||||
"gulp": "^3.8.8"
|
||||
"gulp": "^3.8.8",
|
||||
"laravel-elixir-livereload": "0.0.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"laravel-elixir": "^2.0.0",
|
||||
|
||||
@ -32,7 +32,7 @@ $button-border-radius: 3px;
|
||||
@include generate-button-colors(#EEE, $primary);
|
||||
}
|
||||
|
||||
.button, button[type="button"], input[type="button"], input[type="submit"] {
|
||||
.button, input[type="button"], input[type="submit"] {
|
||||
@extend .button-base;
|
||||
&.pos {
|
||||
@include generate-button-colors(#EEE, $positive);
|
||||
|
||||
@ -45,3 +45,40 @@ input[type="text"], input[type="number"], input[type="email"], input[type="searc
|
||||
.form-group {
|
||||
margin-bottom: $-s;
|
||||
}
|
||||
|
||||
.inline-input-style {
|
||||
border: 2px dotted #BBB;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: $-xs $-s;
|
||||
}
|
||||
|
||||
.title-input label, .description-input label{
|
||||
margin-top: $-m;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.title-input input[type="text"] {
|
||||
@extend h1;
|
||||
@extend .inline-input-style;
|
||||
margin-top: 0;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.title-input.page-title {
|
||||
padding: $-s;
|
||||
}
|
||||
.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;
|
||||
font-size: $fs-m;
|
||||
color: #666;
|
||||
width: 100%;
|
||||
}
|
||||
@ -2,7 +2,7 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html {
|
||||
background-color: #FFF;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
body {
|
||||
font-family: $text;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/*
|
||||
* Header Styles
|
||||
*/
|
||||
* Header Styles
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 3.625em;
|
||||
@ -23,11 +23,12 @@ h3 {
|
||||
h4 {
|
||||
font-size: 1em;
|
||||
line-height: 1.375em;
|
||||
margin-top: 1.375em;
|
||||
margin-bottom: 1.375em;
|
||||
margin-top: 0.78571429em;
|
||||
margin-bottom: 0.43137255em;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-weight: 500;
|
||||
.subheader {
|
||||
display: block;
|
||||
font-size: 0.5em;
|
||||
@ -37,8 +38,8 @@ h1, h2, h3, h4 {
|
||||
}
|
||||
|
||||
/*
|
||||
* Link styling
|
||||
*/
|
||||
* Link styling
|
||||
*/
|
||||
a {
|
||||
color: $primary;
|
||||
cursor: pointer;
|
||||
@ -48,11 +49,14 @@ a {
|
||||
text-decoration: underline;
|
||||
color: darken($primary, 20%);
|
||||
}
|
||||
i {
|
||||
padding-right: $-s;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Other HTML Text Elements
|
||||
*/
|
||||
* Other HTML Text Elements
|
||||
*/
|
||||
p, ul, ol, pre, table, blockquote {
|
||||
margin-top: 0.3em;
|
||||
margin-bottom: 1.375em;
|
||||
@ -136,8 +140,8 @@ span.code {
|
||||
padding: 1px $-xs;
|
||||
}
|
||||
/*
|
||||
* Text colors
|
||||
*/
|
||||
* Text colors
|
||||
*/
|
||||
p.pos, p .pos, span.pos, .text-pos {
|
||||
color: $positive;
|
||||
}
|
||||
@ -159,8 +163,8 @@ p.secondary, p .secondary, span.secondary, .text-secondary {
|
||||
}
|
||||
|
||||
/*
|
||||
* Generic text styling classes
|
||||
*/
|
||||
* Generic text styling classes
|
||||
*/
|
||||
.underlined {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@ -176,3 +180,13 @@ p.secondary, p .secondary, span.secondary, .text-secondary {
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/**
|
||||
* Grouping
|
||||
*/
|
||||
.header-group {
|
||||
margin: $-m 0;
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
18
resources/assets/sass/_tinymce.scss
Normal file
18
resources/assets/sass/_tinymce.scss
Normal file
@ -0,0 +1,18 @@
|
||||
|
||||
//.mce-container {
|
||||
// .mce-menubar, .mce-toolbar-grp {
|
||||
// position: fixed;
|
||||
// width: 100%;
|
||||
// }
|
||||
// .mce-container-body {
|
||||
// position: relative;
|
||||
// overflow: hidden;
|
||||
// display: block;
|
||||
// }
|
||||
//}
|
||||
|
||||
.mce-tinymce.mce-container.fullscreen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
@ -7,6 +7,20 @@
|
||||
@import "blocks";
|
||||
@import "buttons";
|
||||
@import "forms";
|
||||
@import "tinymce";
|
||||
|
||||
header {
|
||||
background-color: #f8f8f8;
|
||||
position: fixed;
|
||||
display: block;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
margin-top: 64px;
|
||||
}
|
||||
|
||||
header hr {
|
||||
margin-top: 0;
|
||||
@ -27,6 +41,81 @@ 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%;
|
||||
}
|
||||
|
||||
.page-style.editor {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
@extend .page-style;
|
||||
min-height: 70vh;
|
||||
&.right {
|
||||
float: right;
|
||||
}
|
||||
&.left {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.page-list {
|
||||
a {
|
||||
display: block;
|
||||
padding: $-s 0;
|
||||
border-bottom: 2px dotted #CCC;
|
||||
&:first-child {
|
||||
border-top: 2px dotted #CCC;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-menu {
|
||||
opacity: 0.6;
|
||||
transition: opacity ease-in-out 120ms;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.page-nav-list {
|
||||
$nav-indent: $-s;
|
||||
li {
|
||||
//border-left: 1px solid rgba(0, 0, 0, 0.1);
|
||||
padding-left: $-xs;
|
||||
}
|
||||
.nav-H2 {
|
||||
margin-left: $nav-indent;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
.nav-H3 {
|
||||
margin-left: $nav-indent*2;
|
||||
font-size: 0.90em
|
||||
}
|
||||
.nav-H4 {
|
||||
margin-left: $nav-indent*3;
|
||||
font-size: 0.85em
|
||||
}
|
||||
.nav-H5 {
|
||||
margin-left: $nav-indent*4;
|
||||
font-size: 0.80em
|
||||
}
|
||||
.nav-H6 {
|
||||
margin-left: $nav-indent*5;
|
||||
font-size: 0.75em
|
||||
}
|
||||
}
|
||||
|
||||
.overlay {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
position: fixed;
|
||||
|
||||
@ -7,18 +7,28 @@
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,300italic,100,300' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script src="/bower/bootstrap/dist/js/bootstrap.js"></script>
|
||||
<script>
|
||||
$.fn.smoothScrollTo = function() {
|
||||
$('body').animate({
|
||||
scrollTop: this.offset().top - 60 // Adjust to change final scroll position top margin
|
||||
}, 800); // Adjust to change animations speed (ms)
|
||||
return this;
|
||||
};
|
||||
</script>
|
||||
@yield('head')
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="container">
|
||||
<div class="padded-vertical clearfix">
|
||||
<div class="logo float left">Oxbow</div>
|
||||
<ul class="menu float right">
|
||||
<li><a href="/books">Books</a></li>
|
||||
</ul>
|
||||
<header>
|
||||
<div class="container">
|
||||
<div class="padded-vertical clearfix">
|
||||
<div class="logo float left">Oxbow</div>
|
||||
<ul class="menu float right">
|
||||
<li><a href="/books"><i class="fa fa-book"></i>Books</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
</header>
|
||||
|
||||
<section class="container">
|
||||
|
||||
@ -1,10 +1,19 @@
|
||||
@extends('base')
|
||||
|
||||
@section('content')
|
||||
<h2>New Book</h2>
|
||||
|
||||
<form action="/books" method="POST">
|
||||
{{ csrf_field() }}
|
||||
@include('books/form')
|
||||
</form>
|
||||
<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>
|
||||
|
||||
@stop
|
||||
@ -1,11 +1,26 @@
|
||||
@extends('base')
|
||||
|
||||
@section('content')
|
||||
<h2>Edit Book</h2>
|
||||
|
||||
<form action="/books/{{$book->slug}}" method="POST">
|
||||
{{ csrf_field() }}
|
||||
<input type="hidden" name="_method" value="PUT">
|
||||
@include('books/form', ['model' => $book])
|
||||
</form>
|
||||
|
||||
<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">
|
||||
<form action="/books/{{$book->slug}}" method="POST">
|
||||
<input type="hidden" name="_method" value="PUT">
|
||||
@include('books/form', ['model' => $book])
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
@stop
|
||||
@ -1,8 +1,10 @@
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
|
||||
{{ csrf_field() }}
|
||||
<div class="form-group title-input">
|
||||
<label for="name">Book Name</label>
|
||||
@include('form/text', ['name' => 'name'])
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-group description-input">
|
||||
<label for="description">Description</label>
|
||||
@include('form/textarea', ['name' => 'description'])
|
||||
</div>
|
||||
|
||||
@ -2,24 +2,31 @@
|
||||
|
||||
@section('content')
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
|
||||
<div class="col-md-3 page-menu">
|
||||
<h4>Books</h4>
|
||||
<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 class="row">
|
||||
@foreach($books as $book)
|
||||
<div class="col-md-4 shaded book">
|
||||
<h3><a href="{{$book->getUrl()}}">{{$book->name}}</a></h3>
|
||||
<p>{{$book->description}}</p>
|
||||
<div class="buttons">
|
||||
<a href="{{$book->getEditUrl()}}" class="button secondary">Edit</a>
|
||||
@include('form/delete-button', ['url' => '/books/' . $book->id . '/destroy', 'text' => 'Delete'])
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@stop
|
||||
@ -2,16 +2,42 @@
|
||||
|
||||
@section('content')
|
||||
|
||||
<h2>{{$book->name}}</h2>
|
||||
<p class="text-muted">{{$book->description}}</p>
|
||||
<a href="{{$book->getUrl() . '/page/create'}}">+ New Page</a>
|
||||
|
||||
<h4>Pages:</h4>
|
||||
@if(count($book->pages) > 0)
|
||||
@foreach($book->pages as $page)
|
||||
<a href="{{$page->getUrl()}}">{{$page->name}}</a><br>
|
||||
@endforeach
|
||||
@else
|
||||
<p class="text-muted">This book has no pages</p>
|
||||
@endif
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-3 page-menu">
|
||||
<h4>Book Actions</h4>
|
||||
<div class="buttons">
|
||||
<a href="{{$book->getEditUrl()}}"><i class="fa fa-pencil"></i>Edit Book</a>
|
||||
</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>
|
||||
<div class="page-list">
|
||||
@if(count($book->pages) > 0)
|
||||
@foreach($book->pages as $page)
|
||||
<a href="{{$page->getUrl()}}">{{$page->name}}</a>
|
||||
@endforeach
|
||||
@else
|
||||
<p class="text-muted">This book has no pages</p>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<p>
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
@stop
|
||||
@ -1,4 +1,4 @@
|
||||
<form action="{{$url}}" method="POST">
|
||||
<form action="{{$url}}" method="POST" class="inline">
|
||||
{{ csrf_field() }}
|
||||
<input type="hidden" name="_method" value="DELETE">
|
||||
<button type="submit" class="button neg">{{ isset($text) ? $text : 'Delete' }}</button>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<textarea id="{{ $name }}" name="{{ $name }}"
|
||||
<textarea id="{{ $name }}" name="{{ $name }}" rows="5"
|
||||
@if($errors->has($name)) class="neg" @endif>@if(isset($model) || old($name)){{ old($name) ? old($name) : $model->$name}}@endif</textarea>
|
||||
@if($errors->has($name))
|
||||
<div class="text-neg text-small">{{ $errors->first($name) }}</div>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
@extends('base')
|
||||
|
||||
@section('head')
|
||||
<link rel="stylesheet" href="/plugins/css/froala_editor.min.css">
|
||||
<link rel="stylesheet" href="/plugins/css/froala_style.min.css">
|
||||
<script src="/plugins/js/froala_editor.min.js"></script>
|
||||
<script src="/bower/tinymce-dist/tinymce.jquery.min.js"></script>
|
||||
<script src="/bower/dropzone/dist/min/dropzone.min.js"></script>
|
||||
<script src="/js/image-manager.js"></script>
|
||||
@stop
|
||||
|
||||
@section('content')
|
||||
|
||||
@ -7,57 +7,12 @@
|
||||
@stop
|
||||
|
||||
@section('content')
|
||||
<form action="{{$page->getUrl()}}" method="POST">
|
||||
<input type="hidden" name="_method" value="PUT">
|
||||
@include('pages/form', ['model' => $page])
|
||||
</form>
|
||||
|
||||
<section class="overlay" style="display:none;">
|
||||
<div id="image-manager">
|
||||
<div class="image-manager-left">
|
||||
<div class="image-manager-header">
|
||||
<button type="button" class="button neg float right" data-action="close">Close</button>
|
||||
<div class="image-manager-title">Image Library</div>
|
||||
</div>
|
||||
<div class="image-manager-display">
|
||||
</div>
|
||||
<form action="/upload/image" class="image-manager-dropzone">
|
||||
{{ csrf_field() }}
|
||||
Drag images or click here to upload
|
||||
</form>
|
||||
</div>
|
||||
{{--<div class="sidebar">--}}
|
||||
<div class="row">
|
||||
<form action="{{$page->getUrl()}}" method="POST">
|
||||
<input type="hidden" name="_method" value="PUT">
|
||||
@include('pages/form', ['model' => $page])
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{{--</div>--}}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
//ImageManager.show('#image-manager');
|
||||
|
||||
tinymce.init({
|
||||
selector: '.edit-area textarea',
|
||||
content_css: '/css/app.css',
|
||||
body_class: 'container',
|
||||
plugins: "autoresize image table textcolor paste link imagetools",
|
||||
content_style: "body {padding-left: 15px !important; padding-right: 15px !important;}",
|
||||
file_browser_callback: function(field_name, url, type, win) {
|
||||
ImageManager.show('#image-manager', function(image) {
|
||||
win.document.getElementById(field_name).value = image.url;
|
||||
if ("createEvent" in document) {
|
||||
var evt = document.createEvent("HTMLEvents");
|
||||
evt.initEvent("change", false, true);
|
||||
win.document.getElementById(field_name).dispatchEvent(evt);
|
||||
} else {
|
||||
win.document.getElementById(field_name).fireEvent("onchange");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
@stop
|
||||
@ -1,13 +1,80 @@
|
||||
{{ csrf_field() }}
|
||||
<div class="page-title row">
|
||||
<div class="col-md-10">
|
||||
@include('form/text', ['name' => 'name', 'placeholder' => 'Enter Page Title'])
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<button type="submit" class="button pos">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="edit-area">
|
||||
@include('form/textarea', ['name' => 'html'])
|
||||
|
||||
<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">
|
||||
|
||||
{{ csrf_field() }}
|
||||
<div class="title-input page-title">
|
||||
@include('form/text', ['name' => 'name', 'placeholder' => 'Enter Page Title'])
|
||||
</div>
|
||||
<div class="edit-area">
|
||||
@include('form/textarea', ['name' => 'html'])
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="overlay" style="display:none;">
|
||||
<div id="image-manager">
|
||||
<div class="image-manager-left">
|
||||
<div class="image-manager-header">
|
||||
<button type="button" class="button neg float right" data-action="close">Close</button>
|
||||
<div class="image-manager-title">Image Library</div>
|
||||
</div>
|
||||
<div class="image-manager-display">
|
||||
</div>
|
||||
<form action="/upload/image" class="image-manager-dropzone">
|
||||
{{ csrf_field() }}
|
||||
Drag images or click here to upload
|
||||
</form>
|
||||
</div>
|
||||
{{--<div class="sidebar">--}}
|
||||
|
||||
{{--</div>--}}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
//ImageManager.show('#image-manager');
|
||||
|
||||
tinymce.init({
|
||||
selector: '.edit-area textarea',
|
||||
content_css: '/css/app.css',
|
||||
body_class: 'container',
|
||||
relative_urls: false,
|
||||
height: 600,
|
||||
plugins: "image table textcolor paste link imagetools",
|
||||
toolbar: "undo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table | fontsizeselect full",
|
||||
content_style: "body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important}",
|
||||
file_browser_callback: function(field_name, url, type, win) {
|
||||
ImageManager.show('#image-manager', function(image) {
|
||||
win.document.getElementById(field_name).value = image.url;
|
||||
if ("createEvent" in document) {
|
||||
var evt = document.createEvent("HTMLEvents");
|
||||
evt.initEvent("change", false, true);
|
||||
win.document.getElementById(field_name).dispatchEvent(evt);
|
||||
} else {
|
||||
win.document.getElementById(field_name).fireEvent("onchange");
|
||||
}
|
||||
});
|
||||
},
|
||||
setup: function(editor) {
|
||||
editor.addButton('full', {
|
||||
text: 'Expand',
|
||||
icon: false,
|
||||
onclick: function() {
|
||||
var container = $(editor.getContainer()).toggleClass('fullscreen');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user