Зуев Егор / 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 ...@@ -65,15 +65,13 @@ input[type="text"], input[type="number"], input[type="email"], input[type="searc
65 } 65 }
66 66
67 .title-input.page-title { 67 .title-input.page-title {
68 - padding: $-s; 68 + font-size: 0.8em;
69 } 69 }
70 .title-input.page-title input[type="text"]{ 70 .title-input.page-title input[type="text"]{
71 //border: 2px dotted #BBB; 71 //border: 2px dotted #BBB;
72 margin-bottom: 0; 72 margin-bottom: 0;
73 } 73 }
74 -.edit-area { 74 +
75 - padding: 0 $-s $-s $-s;
76 -}
77 75
78 .description-input textarea { 76 .description-input textarea {
79 @extend .inline-input-style; 77 @extend .inline-input-style;
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 box-sizing: border-box; 2 box-sizing: border-box;
3 } 3 }
4 html { 4 html {
5 - background-color: #f8f8f8; 5 + background-color: #FFFFFF;
6 } 6 }
7 body { 7 body {
8 font-family: $text; 8 font-family: $text;
......
...@@ -19,4 +19,12 @@ ...@@ -19,4 +19,12 @@
19 max-width: 100%; 19 max-width: 100%;
20 margin-left: -$-s; 20 margin-left: -$-s;
21 box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.08); 21 box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.08);
22 +}
23 +
24 +.edit-area {
25 + height: 100%;
26 +}
27 +
28 +.page-style.editor {
29 + height: 100%;
22 } 30 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -11,21 +11,40 @@ ...@@ -11,21 +11,40 @@
11 11
12 header { 12 header {
13 background-color: #f8f8f8; 13 background-color: #f8f8f8;
14 - position: fixed;
15 display: block; 14 display: block;
16 width: 100%; 15 width: 100%;
17 - z-index: -1; 16 + position: fixed;
17 + z-index: 2;
18 top: 0; 18 top: 0;
19 + border-bottom: 1px solid #DDD;
20 + .padded {
21 + padding: $-m;
22 + }
23 +}
24 +
25 +#sidebar {
26 + position: fixed;
27 + background-color: #FFF;
28 + height: 100%;
29 + top: 0;
30 + z-index: 1;
31 + padding-top: 63px + $-m;
32 + width: 300px;
33 + border-right: 1px solid #DDD;
34 +}
35 +
36 +#content {
37 + margin-top: 63px;
38 + margin-left: 300px;
39 + display: block;
40 + position: relative;
19 } 41 }
42 +
20 .logo { 43 .logo {
21 width: 180px; 44 width: 180px;
22 opacity: 0.8; 45 opacity: 0.8;
23 } 46 }
24 47
25 -body {
26 - margin-top: 64px;
27 -}
28 -
29 header hr { 48 header hr {
30 margin-top: 0; 49 margin-top: 0;
31 } 50 }
...@@ -46,15 +65,8 @@ header .menu { ...@@ -46,15 +65,8 @@ header .menu {
46 font-size: 1.4em; 65 font-size: 1.4em;
47 } 66 }
48 67
49 -.affix {
50 - position: fixed;
51 -}
52 -
53 .page-style { 68 .page-style {
54 - background-color: #FFF;
55 padding: $-s $-xxl $-xxl $-xxl; 69 padding: $-s $-xxl $-xxl $-xxl;
56 - border-radius: 4px;
57 - box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.15);
58 margin-bottom: $-xxl; 70 margin-bottom: $-xxl;
59 max-width: 100%; 71 max-width: 100%;
60 } 72 }
...@@ -66,6 +78,9 @@ header .menu { ...@@ -66,6 +78,9 @@ header .menu {
66 .page-content { 78 .page-content {
67 @extend .page-style; 79 @extend .page-style;
68 min-height: 70vh; 80 min-height: 70vh;
81 + max-width: 840px;
82 + margin-left: auto;
83 + margin-right: auto;
69 &.right { 84 &.right {
70 float: right; 85 float: right;
71 } 86 }
......
...@@ -28,27 +28,29 @@ ...@@ -28,27 +28,29 @@
28 <body> 28 <body>
29 29
30 <header> 30 <header>
31 - <div class="container"> 31 + <div class="padded row clearfix">
32 - <div class="padded-vertical row clearfix"> 32 + <div class="col-md-3">
33 - <div class="col-md-3"> 33 + <div ><img class="logo float left" src="/bookstack.svg" alt="BookStack"></div>
34 - <div ><img class="logo float left" src="/bookstack.svg" alt="BookStack"></div> 34 + </div>
35 - </div> 35 + <div class="col-md-9">
36 - <div class="col-md-9"> 36 + <ul class="menu float">
37 - <ul class="menu float"> 37 + <li><a href="/books"><i class="fa fa-book"></i>Books</a></li>
38 - <li><a href="/books"><i class="fa fa-book"></i>Books</a></li> 38 + </ul>
39 - </ul> 39 + <div class="search-box float right">
40 - <div class="search-box float right"> 40 + <form action="/pages/search/all" id="search-form" method="GET">
41 - <form action="/pages/search/all" id="search-form" method="GET"> 41 + {!! csrf_field() !!}
42 - {!! csrf_field() !!} 42 + <input type="text" placeholder="Search all pages..." name="term" id="search-input">
43 - <input type="text" placeholder="Search all pages..." name="term" id="search-input"> 43 + </form>
44 - </form>
45 - </div>
46 </div> 44 </div>
47 </div> 45 </div>
48 </div> 46 </div>
49 </header> 47 </header>
50 48
51 - <section class="container"> 49 + <section id="sidebar" class="padded">
50 + @yield('sidebar')
51 + </section>
52 +
53 + <section id="content">
52 @yield('content') 54 @yield('content')
53 </section> 55 </section>
54 56
......
...@@ -8,12 +8,10 @@ ...@@ -8,12 +8,10 @@
8 8
9 @section('content') 9 @section('content')
10 10
11 - <div class="row"> 11 + <form action="{{$page->getUrl()}}" method="POST">
12 - <form action="{{$page->getUrl()}}" method="POST"> 12 + <input type="hidden" name="_method" value="PUT">
13 - <input type="hidden" name="_method" value="PUT"> 13 + @include('pages/form', ['model' => $page])
14 - @include('pages/form', ['model' => $page]) 14 + </form>
15 - </form>
16 - </div>
17 15
18 @stop 16 @stop
19 17
......
1 1
2 -<div class="col-md-3 page-menu">
3 - <h4>You are editing a page</h4>
4 - <button type="submit" class="button pos">Save Page</button>
5 -</div>
6 2
7 -<div class="col-md-9 page-style editor"> 3 +
4 +<div class="page-style editor">
8 5
9 {{ csrf_field() }} 6 {{ csrf_field() }}
10 - <div class="title-input page-title"> 7 + <div class="title-input title-strip clearfix">
11 - @include('form/text', ['name' => 'name', 'placeholder' => 'Enter Page Title']) 8 + <button type="submit" class="button pos float right">Save Page</button>
9 + <div class="float left">
10 + @include('form/text', ['name' => 'name', 'placeholder' => 'Enter Page Title'])
11 + </div>
12 </div> 12 </div>
13 <div class="edit-area"> 13 <div class="edit-area">
14 @include('form/textarea', ['name' => 'html']) 14 @include('form/textarea', ['name' => 'html'])
...@@ -29,6 +29,7 @@ ...@@ -29,6 +29,7 @@
29 content_css: '/css/app.css', 29 content_css: '/css/app.css',
30 body_class: 'container', 30 body_class: 'container',
31 relative_urls: false, 31 relative_urls: false,
32 + statusbar: false,
32 height: 600, 33 height: 600,
33 plugins: "image table textcolor paste link imagetools", 34 plugins: "image table textcolor paste link imagetools",
34 toolbar: "undo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image link | fontsizeselect full", 35 toolbar: "undo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image link | fontsizeselect full",
......
1 @extends('base') 1 @extends('base')
2 2
3 +@section('sidebar')
4 + <div class="page-nav">
5 + <h4>Navigation</h4>
6 + <ul class="page-nav-list"></ul>
7 + </div>
8 + <div class="page-actions">
9 + <h4>Actions</h4>
10 + <div class="list">
11 + <a href="{{$page->getUrl() . '/edit'}}" class="muted"><i class="fa fa-pencil"></i>Edit this page</a>
12 + <a href="{{$page->getUrl() . '/create'}}" class="muted"><i class="fa fa-file-o"></i>Create Sub-page</a>
13 + </div>
14 + </div>
15 +@stop
16 +
3 @section('content') 17 @section('content')
4 18
5 <div class="row"> 19 <div class="row">
6 - <div class="page-menu col-md-3"> 20 + <div class="col-md-6">
7 - <div class="page-nav"> 21 + <div class="breadcrumbs padded-horizontal">
8 - <h4>Navigation</h4>
9 - <ul class="page-nav-list"></ul>
10 - </div>
11 - <div class="page-actions">
12 - <h4>Actions</h4>
13 - <div class="list">
14 - <a href="{{$page->getUrl() . '/edit'}}" class="muted"><i class="fa fa-pencil"></i>Edit this page</a>
15 - <a href="{{$page->getUrl() . '/create'}}" class="muted"><i class="fa fa-file-o"></i>Create Sub-page</a>
16 - </div>
17 - </div>
18 - </div>
19 -
20 - <div class="page-content right col-md-9">
21 - <div class="breadcrumbs">
22 <a href="{{$book->getUrl()}}"><i class="fa fa-book"></i>{{ $book->name }}</a> 22 <a href="{{$book->getUrl()}}"><i class="fa fa-book"></i>{{ $book->name }}</a>
23 @if($breadCrumbs) 23 @if($breadCrumbs)
24 @foreach($breadCrumbs as $parentPage) 24 @foreach($breadCrumbs as $parentPage)
...@@ -27,32 +27,26 @@ ...@@ -27,32 +27,26 @@
27 @endforeach 27 @endforeach
28 @endif 28 @endif
29 </div> 29 </div>
30 - <h1>{{$page->name}}</h1>
31 - @if(count($page->children) > 0)
32 - <h4 class="text-muted">Sub-pages</h4>
33 - <div class="page-list">
34 - @foreach($page->children as $childPage)
35 - <a href="{{ $childPage->getUrl() }}">{{ $childPage->name }}</a>
36 - @endforeach
37 - </div>
38 - @endif
39 - {!! $page->html !!}
40 </div> 30 </div>
41 </div> 31 </div>
42 32
33 + <div class="page-content">
34 + <h1>{{$page->name}}</h1>
35 + @if(count($page->children) > 0)
36 + <h4 class="text-muted">Sub-pages</h4>
37 + <div class="page-list">
38 + @foreach($page->children as $childPage)
39 + <a href="{{ $childPage->getUrl() }}">{{ $childPage->name }}</a>
40 + @endforeach
41 + </div>
42 + @endif
43 + {!! $page->html !!}
44 + </div>
45 +
46 +
43 <script> 47 <script>
44 $(document).ready(function() { 48 $(document).ready(function() {
45 49
46 - // Set up fixed side menu
47 - $('.page-menu').affix({
48 - offset: {
49 - top: 10,
50 - bottom: function () {
51 - return (this.bottom = $('.footer').outerHeight(true))
52 - }
53 - }
54 - });
55 -
56 // Set up document navigation 50 // Set up document navigation
57 var pageNav = $('.page-nav-list'); 51 var pageNav = $('.page-nav-list');
58 var pageContent = $('.page-content'); 52 var pageContent = $('.page-content');
......