archive/BookStackApp_BookStack
0
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-05-03 15:59:57 +00:00
Code Issues Projects Releases Wiki Activity

Started redesign

Browse source
This commit is contained in:
Dan Brown 2015-07-21 22:11:30 +01:00
parent 66dd297853
commit 2c95528de4
8 changed files with 99 additions and 83 deletions

6
resources/assets/sass/_forms.scss
View file

@ -65,15 +65,13 @@ input[type="text"], input[type="number"], input[type="email"], input[type="searc
} }
.title-input.page-title { .title-input.page-title {
padding: $-s; font-size: 0.8em;
} }
.title-input.page-title input[type="text"]{ .title-input.page-title input[type="text"]{
//border: 2px dotted #BBB; //border: 2px dotted #BBB;
margin-bottom: 0; margin-bottom: 0;
} }
.edit-area {
padding: 0 $-s $-s $-s;
}
.description-input textarea { .description-input textarea {
@extend .inline-input-style; @extend .inline-input-style;

2
resources/assets/sass/_html.scss
View file

@ -2,7 +2,7 @@
box-sizing: border-box; box-sizing: border-box;
} }
html { html {
background-color: #f8f8f8; background-color: #FFFFFF;
} }
body { body {
font-family: $text; font-family: $text;

8
resources/assets/sass/_tinymce.scss
View file

@ -19,4 +19,12 @@
max-width: 100%; max-width: 100%;
margin-left: -$-s; margin-left: -$-s;
box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.08); box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.08);
}
.edit-area {
height: 100%;
}
.page-style.editor {
height: 100%;
} }

41
resources/assets/sass/styles.scss
View file

@ -11,21 +11,40 @@
header { header {
background-color: #f8f8f8; background-color: #f8f8f8;
position: fixed;
display: block; display: block;
width: 100%; width: 100%;
z-index: -1; position: fixed;
z-index: 2;
top: 0; top: 0;
border-bottom: 1px solid #DDD;
.padded {
padding: $-m;
}
} }
#sidebar {
position: fixed;
background-color: #FFF;
height: 100%;
top: 0;
z-index: 1;
padding-top: 63px + $-m;
width: 300px;
border-right: 1px solid #DDD;
}
#content {
margin-top: 63px;
margin-left: 300px;
display: block;
position: relative;
}
.logo { .logo {
width: 180px; width: 180px;
opacity: 0.8; opacity: 0.8;
} }
body {
margin-top: 64px;
}
header hr { header hr {
margin-top: 0; margin-top: 0;
} }
@ -46,15 +65,8 @@ header .menu {
font-size: 1.4em; font-size: 1.4em;
} }
.affix {
position: fixed;
}
.page-style { .page-style {
background-color: #FFF;
padding: $-s $-xxl $-xxl $-xxl; padding: $-s $-xxl $-xxl $-xxl;
border-radius: 4px;
box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.15);
margin-bottom: $-xxl; margin-bottom: $-xxl;
max-width: 100%; max-width: 100%;
} }
@ -66,6 +78,9 @@ header .menu {
.page-content { .page-content {
@extend .page-style; @extend .page-style;
min-height: 70vh; min-height: 70vh;
max-width: 840px;
margin-left: auto;
margin-right: auto;
&.right { &.right {
float: right; float: right;
} }

34
resources/views/base.blade.php
View file

@ -28,27 +28,29 @@
<body> <body>
<header> <header>
<div class="container"> <div class="padded row clearfix">
<div class="padded-vertical row clearfix"> <div class="col-md-3">
<div class="col-md-3"> <div ><img class="logo float left" src="/bookstack.svg" alt="BookStack"></div>
<div ><img class="logo float left" src="/bookstack.svg" alt="BookStack"></div> </div>
</div> <div class="col-md-9">
<div class="col-md-9"> <ul class="menu float">
<ul class="menu float"> <li><a href="/books"><i class="fa fa-book"></i>Books</a></li>
<li><a href="/books"><i class="fa fa-book"></i>Books</a></li> </ul>
</ul> <div class="search-box float right">
<div class="search-box float right"> <form action="/pages/search/all" id="search-form" method="GET">
<form action="/pages/search/all" id="search-form" method="GET"> {!! csrf_field() !!}
{!! csrf_field() !!} <input type="text" placeholder="Search all pages..." name="term" id="search-input">
<input type="text" placeholder="Search all pages..." name="term" id="search-input"> </form>
</form>
</div>
</div> </div>
</div> </div>
</div> </div>
</header> </header>
<section class="container"> <section id="sidebar" class="padded">
@yield('sidebar')
</section>
<section id="content">
@yield('content') @yield('content')
</section> </section>

10
resources/views/pages/edit.blade.php
View file

@ -8,12 +8,10 @@
@section('content') @section('content')
<div class="row"> <form action="{{$page->getUrl()}}" method="POST">
<form action="{{$page->getUrl()}}" method="POST"> <input type="hidden" name="_method" value="PUT">
<input type="hidden" name="_method" value="PUT"> @include('pages/form', ['model' => $page])
@include('pages/form', ['model' => $page]) </form>
</form>
</div>
@stop @stop

15
resources/views/pages/form.blade.php
View file

@ -1,14 +1,14 @@
<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">
<div class="page-style editor">
{{ csrf_field() }} {{ csrf_field() }}
<div class="title-input page-title"> <div class="title-input title-strip clearfix">
@include('form/text', ['name' => 'name', 'placeholder' => 'Enter Page Title']) <button type="submit" class="button pos float right">Save Page</button>
<div class="float left">
@include('form/text', ['name' => 'name', 'placeholder' => 'Enter Page Title'])
</div>
</div> </div>
<div class="edit-area"> <div class="edit-area">
@include('form/textarea', ['name' => 'html']) @include('form/textarea', ['name' => 'html'])
@ -29,6 +29,7 @@
content_css: '/css/app.css', content_css: '/css/app.css',
body_class: 'container', body_class: 'container',
relative_urls: false, relative_urls: false,
statusbar: false,
height: 600, height: 600,
plugins: "image table textcolor paste link imagetools", 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", toolbar: "undo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image link | fontsizeselect full",

66
resources/views/pages/show.blade.php
View file

@ -1,24 +1,24 @@
@extends('base') @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>
@stop
@section('content') @section('content')
<div class="row"> <div class="row">
<div class="page-menu col-md-3"> <div class="col-md-6">
<div class="page-nav"> <div class="breadcrumbs padded-horizontal">
<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>
</div>
<div class="page-content right col-md-9">
<div class="breadcrumbs">
<a href="{{$book->getUrl()}}"><i class="fa fa-book"></i>{{ $book->name }}</a> <a href="{{$book->getUrl()}}"><i class="fa fa-book"></i>{{ $book->name }}</a>
@if($breadCrumbs) @if($breadCrumbs)
@foreach($breadCrumbs as $parentPage) @foreach($breadCrumbs as $parentPage)
@ -27,32 +27,26 @@
@endforeach @endforeach
@endif @endif
</div> </div>
<h1>{{$page->name}}</h1>
@if(count($page->children) > 0)
<h4 class="text-muted">Sub-pages</h4>
<div class="page-list">
@foreach($page->children as $childPage)
<a href="{{ $childPage->getUrl() }}">{{ $childPage->name }}</a>
@endforeach
</div>
@endif
{!! $page->html !!}
</div> </div>
</div> </div>
<div class="page-content">
<h1>{{$page->name}}</h1>
@if(count($page->children) > 0)
<h4 class="text-muted">Sub-pages</h4>
<div class="page-list">
@foreach($page->children as $childPage)
<a href="{{ $childPage->getUrl() }}">{{ $childPage->name }}</a>
@endforeach
</div>
@endif
{!! $page->html !!}
</div>
<script> <script>
$(document).ready(function() { $(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 // Set up document navigation
var pageNav = $('.page-nav-list'); var pageNav = $('.page-nav-list');
var pageContent = $('.page-content'); var pageContent = $('.page-content');