Зуев Егор / wiki.dev

Go to a project
Toggle navigation
Toggle navigation pinning
Dan Brown
46217a58 1 parent c4d0f38a

Vastly improved design

Inline Side-by-side
Showing 24 changed files with 437 additions and 138 deletions
......@@ -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"
}
}
......
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();
});
......
{
"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%;
}
\ No newline at end of file
......
......@@ -2,7 +2,7 @@
box-sizing: border-box;
}
html {
background-color: #FFF;
background-color: #f8f8f8;
}
body {
font-family: $text;
......
/*
* 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;
}
}
\ No newline at end of file
......
//.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%;
}
\ No newline at end of file
......@@ -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">
......
@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
\ No newline at end of file
......
@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
\ No newline at end of file
......
<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>
<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 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>
@endforeach
</div>
</div>
@stop
\ No newline at end of file
......
......@@ -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
\ No newline at end of file
......
<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>
......
<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>
......
@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
\ No newline at end of file
......
{{ csrf_field() }}
<div class="page-title row">
<div class="col-md-10">
@include('form/text', ['name' => 'name', 'placeholder' => 'Enter Page Title'])
<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="col-md-2">
<button type="submit" class="button pos">Save</button>
<div class="edit-area">
@include('form/textarea', ['name' => 'html'])
</div>
</div>
<div class="edit-area">
@include('form/textarea', ['name' => 'html'])
</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>
\ No newline at end of file
......
......@@ -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
......