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

Go to a project
Toggle navigation
Toggle navigation pinning
Dan Brown
2c95528d 1 parent 66dd2978

Started redesign

Inline Side-by-side
Showing 8 changed files with 99 additions and 83 deletions
......@@ -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;
......
......@@ -19,4 +19,12 @@
max-width: 100%;
margin-left: -$-s;
box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.08);
}
.edit-area {
height: 100%;
}
.page-style.editor {
height: 100%;
}
\ No newline at end of file
......
......@@ -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
......
<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",
......
@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');
......