mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 01:36:00 -04:00
Started redesign
This commit is contained in:
Dan Brown
parent
66dd297853
commit
2c95528de4
@ -65,15 +65,13 @@ input[type="text"], input[type="number"], input[type="email"], input[type="searc
|
||||
}
|
||||
|
||||
.title-input.page-title {
|
||||
padding: $-s;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.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;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html {
|
||||
background-color: #f8f8f8;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
body {
|
||||
font-family: $text;
|
||||
|
||||
@ -20,3 +20,11 @@
|
||||
margin-left: -$-s;
|
||||
box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.edit-area {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page-style.editor {
|
||||
height: 100%;
|
||||
}
|
||||
@ -11,21 +11,40 @@
|
||||
|
||||
header {
|
||||
background-color: #f8f8f8;
|
||||
position: fixed;
|
||||
display: block;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
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 {
|
||||
width: 180px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
body {
|
||||
margin-top: 64px;
|
||||
}
|
||||
|
||||
header hr {
|
||||
margin-top: 0;
|
||||
}
|
||||
@ -46,15 +65,8 @@ 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%;
|
||||
}
|
||||
@ -66,6 +78,9 @@ header .menu {
|
||||
.page-content {
|
||||
@extend .page-style;
|
||||
min-height: 70vh;
|
||||
max-width: 840px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
&.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
@ -28,27 +28,29 @@
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="container">
|
||||
<div class="padded-vertical 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="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>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="container">
|
||||
<section id="sidebar" class="padded">
|
||||
@yield('sidebar')
|
||||
</section>
|
||||
|
||||
<section id="content">
|
||||
@yield('content')
|
||||
</section>
|
||||
|
||||
|
||||
@ -8,12 +8,10 @@
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="row">
|
||||
<form action="{{$page->getUrl()}}" method="POST">
|
||||
<input type="hidden" name="_method" value="PUT">
|
||||
@include('pages/form', ['model' => $page])
|
||||
</form>
|
||||
</div>
|
||||
<form action="{{$page->getUrl()}}" method="POST">
|
||||
<input type="hidden" name="_method" value="PUT">
|
||||
@include('pages/form', ['model' => $page])
|
||||
</form>
|
||||
|
||||
@stop
|
||||
|
||||
|
||||
@ -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() }}
|
||||
<div class="title-input page-title">
|
||||
@include('form/text', ['name' => 'name', 'placeholder' => 'Enter Page Title'])
|
||||
<div class="title-input title-strip clearfix">
|
||||
<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 class="edit-area">
|
||||
@include('form/textarea', ['name' => 'html'])
|
||||
@ -29,6 +29,7 @@
|
||||
content_css: '/css/app.css',
|
||||
body_class: 'container',
|
||||
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",
|
||||
|
||||
@ -1,24 +1,24 @@
|
||||
@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')
|
||||
|
||||
<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>
|
||||
<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">
|
||||
<div class="col-md-6">
|
||||
<div class="breadcrumbs padded-horizontal">
|
||||
<a href="{{$book->getUrl()}}"><i class="fa fa-book"></i>{{ $book->name }}</a>
|
||||
@if($breadCrumbs)
|
||||
@foreach($breadCrumbs as $parentPage)
|
||||
@ -27,32 +27,26 @@
|
||||
@endforeach
|
||||
@endif
|
||||
</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 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>
|
||||
$(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');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user