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

Go to a project
Toggle navigation
Toggle navigation pinning
Dan Brown
598fd781 1 parent 505a22bc

Rolled out redesign across application

Inline Side-by-side
Showing 22 changed files with 362 additions and 186 deletions
...@@ -44,4 +44,21 @@ class Entity extends Model ...@@ -44,4 +44,21 @@ class Entity extends Model
44 return $this->morphMany('Oxbow\Activity', 'entity')->orderBy('created_at', 'desc'); 44 return $this->morphMany('Oxbow\Activity', 'entity')->orderBy('created_at', 'desc');
45 } 45 }
46 46
47 + /**
48 + * Allows checking of the exact class, Used to check entity type.
49 + * Cleaner method for is_a.
50 + * @param $type
51 + * @return bool
52 + */
53 + public function isA($type)
54 + {
55 + return $this->getName() === strtolower($type);
56 + }
57 +
58 + public function getName()
59 + {
60 + $fullClassName = get_class($this);
61 + return strtolower(array_slice(explode('\\', $fullClassName), -1, 1)[0]);
62 + }
63 +
47 } 64 }
......
...@@ -38,3 +38,17 @@ ...@@ -38,3 +38,17 @@
38 transform: translate3d(580px, 0, 0); 38 transform: translate3d(580px, 0, 0);
39 } 39 }
40 } 40 }
41 +
42 +@keyframes menuIn {
43 + from { opacity: 0;transform: scale3d(0, 0, 1);}
44 +
45 + to { opacity: 1; transform: scale3d(1, 1, 1);}
46 +}
47 +
48 +.anim.menuIn {
49 + transform-origin: 0% 0%;
50 + animation-name: menuIn;
51 + animation-duration: 120ms;
52 + animation-delay: 0s;
53 + animation-timing-function: cubic-bezier(.62,.28,.23,.99);
54 +}
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -80,7 +80,7 @@ input[type="text"], input[type="number"], input[type="email"], input[type="searc ...@@ -80,7 +80,7 @@ input[type="text"], input[type="number"], input[type="email"], input[type="searc
80 .title-input.page-title { 80 .title-input.page-title {
81 font-size: 0.8em; 81 font-size: 0.8em;
82 .input { 82 .input {
83 - border: 1px solid #BBB; 83 + border: 0;
84 margin-bottom: -1px; 84 margin-bottom: -1px;
85 } 85 }
86 input[type="text"] { 86 input[type="text"] {
......
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
3 } 3 }
4 html { 4 html {
5 background-color: #FFFFFF; 5 background-color: #FFFFFF;
6 + height: 100%;
6 } 7 }
7 body { 8 body {
8 font-family: $text; 9 font-family: $text;
......
...@@ -192,6 +192,25 @@ p.secondary, p .secondary, span.secondary, .text-secondary { ...@@ -192,6 +192,25 @@ p.secondary, p .secondary, span.secondary, .text-secondary {
192 } 192 }
193 } 193 }
194 194
195 +.text-book {
196 + color: $color-book;
197 + &:hover {
198 + color: $color-book;
199 + }
200 +}
201 +.text-page {
202 + color: $color-page;
203 + &:hover {
204 + color: $color-page;
205 + }
206 +}
207 +.text-chapter {
208 + color: $color-chapter;
209 + &:hover {
210 + color: $color-chapter;
211 + }
212 +}
213 +
195 /* 214 /*
196 * Lists 215 * Lists
197 */ 216 */
......
...@@ -22,15 +22,6 @@ ...@@ -22,15 +22,6 @@
22 } 22 }
23 23
24 24
25 -
26 -.edit-area {
27 - height: 100%;
28 -}
29 -
30 -.page-style.editor {
31 - height: 100%;
32 -}
33 -
34 .mce-tinymce { 25 .mce-tinymce {
35 .mce-panel { 26 .mce-panel {
36 background-color: #FFF; 27 background-color: #FFF;
...@@ -39,3 +30,27 @@ ...@@ -39,3 +30,27 @@
39 background-color: #FFF; 30 background-color: #FFF;
40 } 31 }
41 } 32 }
33 +.mce-tinymce.mce-container.mce-panel {
34 + height: 100%;
35 + max-height: 100%;
36 + flex: 1;
37 + display: flex !important;
38 + flex-direction: column;
39 + align-items: stretch;
40 + margin: 0 -1px;
41 + > .mce-container-body {
42 + flex: 1;
43 + display: flex !important;
44 + flex-direction: column;
45 + align-items: stretch;
46 + > .mce-edit-area {
47 + flex: 1;
48 + display: flex !important;
49 + flex-direction: column;
50 + align-items: stretch;
51 + iframe {
52 + flex: 1;
53 + }
54 + }
55 + }
56 +}
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -36,6 +36,11 @@ $secondary: #e27b41; ...@@ -36,6 +36,11 @@ $secondary: #e27b41;
36 $positive: #52A256; 36 $positive: #52A256;
37 $negative: #D32F2F; 37 $negative: #D32F2F;
38 38
39 +// Item Colors
40 +$color-book: #009688;
41 +$color-chapter: #EF6C00;
42 +$color-page: $primary;
43 +
39 // Text colours 44 // Text colours
40 $text-dark: #444; 45 $text-dark: #444;
41 $text-light: #EEE; 46 $text-light: #EEE;
......
...@@ -23,6 +23,11 @@ header { ...@@ -23,6 +23,11 @@ header {
23 } 23 }
24 border-bottom: 1px solid #DDD; 24 border-bottom: 1px solid #DDD;
25 //margin-bottom: $-l; 25 //margin-bottom: $-l;
26 + .links {
27 + display: inline-block;
28 + vertical-align: top;
29 + margin-right: $-xl;
30 + }
26 .links a { 31 .links a {
27 display: inline-block; 32 display: inline-block;
28 padding: $-l; 33 padding: $-l;
...@@ -38,12 +43,19 @@ header { ...@@ -38,12 +43,19 @@ header {
38 display: inline-block; 43 display: inline-block;
39 } 44 }
40 .avatar { 45 .avatar {
41 - margin-top: $-l*0.8; 46 + margin-top: (45px/2);
47 + width: 30px;
48 + height: 30px;
42 } 49 }
43 .user-name { 50 .user-name {
44 vertical-align: top; 51 vertical-align: top;
45 - padding-top: $-l*1.1; 52 + padding-top: 25.5px;
46 padding-left: $-m; 53 padding-left: $-m;
54 + display: inline-block;
55 + cursor: pointer;
56 + i {
57 + padding-left: $-xs;
58 + }
47 } 59 }
48 } 60 }
49 61
...@@ -52,6 +64,40 @@ header { ...@@ -52,6 +64,40 @@ header {
52 position: relative; 64 position: relative;
53 } 65 }
54 66
67 +body.flexbox {
68 + display: flex;
69 + flex-direction: column;
70 + align-items: stretch;
71 + height: 100%;
72 + min-height: 100%;
73 + max-height: 100%;
74 + overflow: hidden;
75 + #content {
76 + flex: 1;
77 + display: flex;
78 + }
79 +}
80 +
81 +.flex-fill {
82 + display: flex;
83 + align-items: stretch;
84 + .flex, &.flex {
85 + flex: 1;
86 + }
87 +}
88 +
89 +.page-editor {
90 + display: flex;
91 + flex-direction: column;
92 + align-items: stretch;
93 + .faded-small {
94 + height: auto;
95 + }
96 + .edit-area {
97 + flex: 1;
98 + flex-direction: column;
99 + }
100 +}
55 101
56 .logo { 102 .logo {
57 display: inline-block; 103 display: inline-block;
...@@ -101,6 +147,9 @@ header { ...@@ -101,6 +147,9 @@ header {
101 h3 { 147 h3 {
102 margin: $-l 0; 148 margin: $-l 0;
103 } 149 }
150 + a.chapter {
151 + color: $color-chapter;
152 + }
104 .inset-list { 153 .inset-list {
105 display: block; 154 display: block;
106 overflow: hidden; 155 overflow: hidden;
...@@ -203,15 +252,9 @@ h1, h2, h3, h4, h5, h6 { ...@@ -203,15 +252,9 @@ h1, h2, h3, h4, h5, h6 {
203 } 252 }
204 } 253 }
205 254
206 -.breadcrumbs { 255 +.breadcrumbs span.sep {
207 - margin-top: $-s;
208 - i {
209 - padding-right: 4px;
210 - }
211 - span.sep {
212 color: #aaa; 256 color: #aaa;
213 padding: 0 $-xs; 257 padding: 0 $-xs;
214 - }
215 } 258 }
216 259
217 .faded { 260 .faded {
...@@ -235,14 +278,21 @@ h1, h2, h3, h4, h5, h6 { ...@@ -235,14 +278,21 @@ h1, h2, h3, h4, h5, h6 {
235 } 278 }
236 } 279 }
237 280
238 -.action-buttons { 281 +.breadcrumbs a, .action-buttons a {
239 - text-align: right;
240 - a {
241 display: inline-block; 282 display: inline-block;
242 padding: $-s; 283 padding: $-s;
243 &:last-child { 284 &:last-child {
244 padding-right: 0; 285 padding-right: 0;
245 } 286 }
287 +}
288 +.action-buttons {
289 + text-align: right;
290 + &.text-left {
291 + text-align: left;
292 + a {
293 + padding-right: $-m;
294 + padding-left: 0;
295 + }
246 } 296 }
247 } 297 }
248 298
...@@ -253,15 +303,19 @@ h1, h2, h3, h4, h5, h6 { ...@@ -253,15 +303,19 @@ h1, h2, h3, h4, h5, h6 {
253 padding-right: $-s; 303 padding-right: $-s;
254 } 304 }
255 } 305 }
306 +
307 +
256 // Sidebar list 308 // Sidebar list
257 .book-tree .sidebar-page-list { 309 .book-tree .sidebar-page-list {
258 list-style: none; 310 list-style: none;
259 margin: 0; 311 margin: 0;
260 margin-top: $-xl; 312 margin-top: $-xl;
261 - border-left: 5px solid #7BD06E; 313 + border-left: 5px solid $color-book;
262 li a { 314 li a {
263 display: block; 315 display: block;
264 border-bottom: none; 316 border-bottom: none;
317 + padding-left: $-s;
318 + padding: $-xs 0 $-xs $-s;
265 &:hover { 319 &:hover {
266 background-color: rgba(255, 255, 255, 0.2); 320 background-color: rgba(255, 255, 255, 0.2);
267 text-decoration: none; 321 text-decoration: none;
...@@ -277,23 +331,20 @@ h1, h2, h3, h4, h5, h6 { ...@@ -277,23 +331,20 @@ h1, h2, h3, h4, h5, h6 {
277 list-style: none; 331 list-style: none;
278 margin: 0; 332 margin: 0;
279 } 333 }
280 - ul li a {
281 - padding-left: $-xl;
282 - }
283 .book { 334 .book {
284 - color: #7BD06E !important; 335 + color: $color-book !important;
285 &.selected { 336 &.selected {
286 - background-color: rgba(123, 208, 110, 0.29); 337 + background-color: rgba($color-book, 0.29);
287 } 338 }
288 } 339 }
289 .chapter { 340 .chapter {
290 - color: #D2A64B !important; 341 + color: $color-chapter !important;
291 &.selected { 342 &.selected {
292 - background-color: rgba(239, 169, 42, 0.27); 343 + background-color: rgba($color-chapter, 0.12);
293 } 344 }
294 } 345 }
295 .list-item-chapter { 346 .list-item-chapter {
296 - border-left: 5px solid #D2A64B; 347 + border-left: 5px solid $color-chapter;
297 margin: 10px 10px; 348 margin: 10px 10px;
298 display: block; 349 display: block;
299 } 350 }
...@@ -301,35 +352,42 @@ h1, h2, h3, h4, h5, h6 { ...@@ -301,35 +352,42 @@ h1, h2, h3, h4, h5, h6 {
301 border-bottom: none; 352 border-bottom: none;
302 } 353 }
303 .page { 354 .page {
304 - color: #4599DC !important; 355 + color: $color-page !important;
305 - border-left: 5px solid #4599DC; 356 + border-left: 5px solid $color-page;
306 margin: 10px 10px; 357 margin: 10px 10px;
307 border-bottom: none; 358 border-bottom: none;
308 &.selected { 359 &.selected {
309 - background-color: rgba(118, 164, 202, 0.41); 360 + background-color: rgba($color-page, 0.1);
310 } 361 }
311 } 362 }
312 } 363 }
313 364
365 +// Sortable Lists
314 .sortable-page-list, .sortable-page-list ul { 366 .sortable-page-list, .sortable-page-list ul {
315 list-style: none; 367 list-style: none;
316 - //background-color: rgba(0, 0, 0, 0.04);
317 } 368 }
318 .sortable-page-list { 369 .sortable-page-list {
319 margin-left: 0; 370 margin-left: 0;
371 + box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
320 ul { 372 ul {
321 margin-bottom: 0; 373 margin-bottom: 0;
322 margin-top: 0; 374 margin-top: 0;
375 + box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
323 } 376 }
324 li { 377 li {
325 - border-bottom: 1px solid #BBB; 378 + border: 1px solid #DDD;
326 - border-left: 1px solid #BBB;
327 - border-right: 1px solid #BBB;
328 padding: $-xs $-s; 379 padding: $-xs $-s;
380 + margin-top: -1px;
381 + min-height: 38px;
382 + &.text-chapter {
383 + border-left: 2px solid $color-chapter;
384 + }
385 + &.text-page {
386 + border-left: 2px solid $color-page;
387 + }
329 } 388 }
330 li:first-child { 389 li:first-child {
331 margin-top: $-xs; 390 margin-top: $-xs;
332 - border-top: 1px solid #BBB;
333 } 391 }
334 } 392 }
335 393
...@@ -351,61 +409,14 @@ body.dragging, body.dragging * { ...@@ -351,61 +409,14 @@ body.dragging, body.dragging * {
351 position: absolute; 409 position: absolute;
352 } 410 }
353 411
354 -.image-cover {
355 - height: 100vh;
356 - width: 100%;
357 - overflow: hidden;
358 - background-size: cover;
359 - &.login {
360 - background-image: url('/images/bg-books.jpg');
361 - }
362 -}
363 -
364 -.sidebar-bg {
365 - background-image: url('/images/bg-books.jpg');
366 - background-size: cover;
367 - background-position: 50% 50%;
368 - position: absolute;
369 - top: 0;
370 - left: 0;
371 - width: 100%;
372 - height: 100%;
373 - z-index: -1;
374 - &:after{
375 - content: '';
376 - position: absolute;
377 - top: 0;
378 - left: 0;
379 - width: 100%;
380 - height: 100%;
381 - z-index: -1;
382 - background-color: rgba(0,0,0,0.85);
383 - display: block;
384 - }
385 -}
386 -
387 -.image-cover #sidebar {
388 - width: auto;
389 - border: 0;
390 - background-color: rgba(0, 0, 0, 0.38);
391 -}
392 -
393 .center-box { 412 .center-box {
394 - margin-top: 15vh; 413 + margin: 15vh auto 0 auto;
395 padding: $-m $-xxl $-xl*2 $-xxl; 414 padding: $-m $-xxl $-xl*2 $-xxl;
396 max-width: 346px; 415 max-width: 346px;
397 - h1, label { 416 + &.login {
398 - color: #EEE; 417 + background-color: #EEE;
399 - } 418 + box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
400 - h1 { 419 + border: 1px solid #DDD;
401 - margin-bottom: $-m;
402 - }
403 - .button {
404 - margin-top: $-xl;
405 - }
406 - input {
407 - background-color: transparent;
408 - color: #EEE;
409 } 420 }
410 } 421 }
411 422
...@@ -471,3 +482,43 @@ body.dragging, body.dragging * { ...@@ -471,3 +482,43 @@ body.dragging, body.dragging * {
471 } 482 }
472 } 483 }
473 } 484 }
485 +
486 +.dropdown-container {
487 + display: inline-block;
488 + vertical-align: top;
489 + position: relative;
490 +}
491 +ul.dropdown {
492 + display: none;
493 + position: absolute;
494 + z-index: 999;
495 + top: 0;
496 + left: 0;
497 + margin: $-m 0;
498 + background-color: #FFFFFF;
499 + list-style: none;
500 + box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
501 + border-radius: 1px;
502 + border: 1px solid #EEE;
503 + min-width: 180px;
504 + padding: $-xs 0;
505 + color: #555;
506 + a {
507 + display: block;
508 + padding: $-xs $-m;
509 + color: #555;
510 + &:hover {
511 + text-decoration: none;
512 + background-color: #EEE;
513 + }
514 + i {
515 + margin-right: $-m;
516 + padding-right: 0;
517 + display: inline;
518 + width: 22px;
519 + }
520 + }
521 + li.border-bottom {
522 + border-bottom: 1px solid #DDD;
523 + }
524 +}
...\ No newline at end of file ...\ No newline at end of file
......
1 @extends('public') 1 @extends('public')
2 2
3 -@section('body-class', 'image-cover login')
4 -
5 @section('sidebar') 3 @section('sidebar')
6 4
7 - 5 + <div class="center-box">
8 - {{--<div class="row faded-small">--}} 6 + <h1>Log In</h1>
9 - {{--<div class="col-md-6"></div>--}}
10 - {{--<div class="col-md-6 faded">--}}
11 - {{--<div class="action-buttons">--}}
12 - {{--<a href="/books/create" class="text-pos"><i class="zmdi zmdi-plus"></i>Add new book</a>--}}
13 - {{--</div>--}}
14 - {{--</div>--}}
15 - {{--</div>--}}
16 -
17 - <div class="text-center">
18 - <div class="center-box text-left">
19 - <h1>Login</h1>
20 7
21 <form action="/login" method="POST"> 8 <form action="/login" method="POST">
22 {!! csrf_field() !!} 9 {!! csrf_field() !!}
...@@ -33,10 +20,9 @@ ...@@ -33,10 +20,9 @@
33 </div> 20 </div>
34 21
35 <div class="from-group"> 22 <div class="from-group">
36 - <button class="button block pos">Login</button> 23 + <button class="button block pos">Sign In</button>
37 </div> 24 </div>
38 </form> 25 </form>
39 </div> 26 </div>
40 - </div>
41 27
42 @stop 28 @stop
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
35 35
36 @yield('head') 36 @yield('head')
37 </head> 37 </head>
38 -<body> 38 +<body class="@yield('body-class')">
39 39
40 @if(Session::has('success')) 40 @if(Session::has('success'))
41 <div class="notification anim pos"> 41 <div class="notification anim pos">
...@@ -52,36 +52,37 @@ ...@@ -52,36 +52,37 @@
52 <header id="header"> 52 <header id="header">
53 <div class="container"> 53 <div class="container">
54 <div class="row"> 54 <div class="row">
55 - <div class="col-md-4"> 55 + <div class="col-md-3">
56 <a href="/" class="logo">{{ Setting::get('app-name', 'BookStack') }}</a> 56 <a href="/" class="logo">{{ Setting::get('app-name', 'BookStack') }}</a>
57 </div> 57 </div>
58 - <div class="col-md-3"> 58 + <div class="col-md-9">
59 - <div class="search-box text-center" style="display: none"> 59 + <div class="float right">
60 - <form action="/pages/search/all" id="search-form" method="GET" style="display: none;"> 60 + <div class="links text-center">
61 - <input type="text" placeholder="Search all pages..." name="term" id="search-input"> 61 + <a href="/search"><i class="zmdi zmdi-search"></i></a>
62 - </form> 62 + <a href="/books"><i class="zmdi zmdi-book"></i>Books</a>
63 + @if($currentUser->can('settings-update'))
64 + <a href="/settings"><i class="zmdi zmdi-settings"></i>Settings</a>
65 + @endif
63 </div> 66 </div>
64 - <img class="avatar" src="{{Auth::user()->getAvatar(30)}}" alt="{{ Auth::user()->name }}"> 67 + <img class="avatar" src="{{$currentUser->getAvatar(30)}}" alt="{{ $currentUser->name }}">
65 - <span class="user-name"> 68 + <div class="dropdown-container" data-dropdown>
66 - {{ Auth::user()->name }} 69 + <span class="user-name" data-dropdown-toggle>
70 + {{ $currentUser->name }} <i class="zmdi zmdi-caret-down"></i>
67 </span> 71 </span>
72 + <ul class="dropdown">
73 + <li>
74 + <a href="/users/{{$currentUser->id}}" class="text-primary"><i class="zmdi zmdi-edit zmdi-hc-lg"></i>Edit Profile</a>
75 + </li>
76 + <li>
77 + <a href="/logout" class="text-neg"><i class="zmdi zmdi-run zmdi-hc-lg"></i>Logout</a>
78 + </li>
79 + </ul>
68 </div> 80 </div>
69 - <div class="col-md-5"> 81 +
70 - <div class="float right links">
71 - <a href="/search"><i class="zmdi zmdi-search"></i></a>
72 - <a href="/books"><i class="zmdi zmdi-book"></i>Books</a>
73 - <a href="/users"><i class="zmdi zmdi-accounts"></i>Users</a>
74 - <a href="/logout"><i class="zmdi zmdi-run zmdi-hc-flip-horizontal"></i>Logout</a>
75 </div> 82 </div>
76 </div> 83 </div>
77 </div> 84 </div>
78 </div> 85 </div>
79 - {{--@if(isset($book) && isset($current) && !isset($books))--}}
80 - {{--<div class="book-tree">--}}
81 - {{--@include('pages/sidebar-tree-list', ['book' => $book])--}}
82 - {{--</div>--}}
83 - {{--@endif--}}
84 - @yield('sidebar')
85 </header> 86 </header>
86 87
87 <section id="content"> 88 <section id="content">
...@@ -90,9 +91,26 @@ ...@@ -90,9 +91,26 @@
90 91
91 @yield('bottom') 92 @yield('bottom')
92 <script> 93 <script>
94 + $(function() {
95 +
93 $('.notification').click(function() { 96 $('.notification').click(function() {
94 $(this).fadeOut(100); 97 $(this).fadeOut(100);
95 }); 98 });
99 +
100 + // Dropdown toggles
101 + $('[data-dropdown-toggle]').click(function() {
102 + var toggleButton = $(this);
103 + var container = toggleButton.closest('[data-dropdown]');
104 + var dropdown = container.find('.dropdown');
105 + dropdown.show().addClass('anim menuIn');
106 +
107 + container.mouseleave(function() {
108 + dropdown.hide();
109 + dropdown.removeClass('anim menuIn');
110 + });
111 + });
112 +
113 + });
96 </script> 114 </script>
97 </body> 115 </body>
98 </html> 116 </html>
......
...@@ -2,8 +2,9 @@ ...@@ -2,8 +2,9 @@
2 2
3 @section('content') 3 @section('content')
4 4
5 - 5 + <div class="faded-small">
6 -<div class="row faded-small"> 6 + <div class="container">
7 + <div class="row">
7 <div class="col-md-6"></div> 8 <div class="col-md-6"></div>
8 <div class="col-md-6 faded"> 9 <div class="col-md-6 faded">
9 <div class="action-buttons"> 10 <div class="action-buttons">
...@@ -12,10 +13,13 @@ ...@@ -12,10 +13,13 @@
12 @endif 13 @endif
13 </div> 14 </div>
14 </div> 15 </div>
15 -</div> 16 + </div>
17 + </div>
18 + </div>
19 +
16 20
17 21
18 -<div class="page-content"> 22 + <div class="page-content">
19 <h1>Books</h1> 23 <h1>Books</h1>
20 @foreach($books as $book) 24 @foreach($books as $book)
21 <div class="book"> 25 <div class="book">
...@@ -24,10 +28,6 @@ ...@@ -24,10 +28,6 @@
24 </div> 28 </div>
25 <hr> 29 <hr>
26 @endforeach 30 @endforeach
27 -</div> 31 + </div>
28 -
29 -
30 -
31 -
32 32
33 @stop 33 @stop
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -39,20 +39,15 @@ ...@@ -39,20 +39,15 @@
39 @foreach($book->children() as $childElement) 39 @foreach($book->children() as $childElement)
40 <div class="book-child"> 40 <div class="book-child">
41 <h3> 41 <h3>
42 - <a href="{{ $childElement->getUrl() }}"> 42 + <a href="{{ $childElement->getUrl() }}" class="{{ $childElement->getName() }}">
43 - @if(is_a($childElement, 'Oxbow\Chapter')) 43 + <i class="zmdi {{ $childElement->isA('chapter') ? 'zmdi-collection-bookmark chapter-toggle':'zmdi-file-text'}}"></i>{{ $childElement->name }}
44 - <i class="zmdi zmdi-collection-bookmark chapter-toggle"></i>
45 - @else
46 - <i class="zmdi zmdi-file-text"></i>
47 - @endif
48 - {{ $childElement->name }}
49 </a> 44 </a>
50 </h3> 45 </h3>
51 <p class="text-muted"> 46 <p class="text-muted">
52 {{$childElement->getExcerpt()}} 47 {{$childElement->getExcerpt()}}
53 </p> 48 </p>
54 49
55 - @if(is_a($childElement, 'Oxbow\Chapter') && count($childElement->pages) > 0) 50 + @if($childElement->isA('chapter') && count($childElement->pages) > 0)
56 <div class="inset-list"> 51 <div class="inset-list">
57 @foreach($childElement->pages as $page) 52 @foreach($childElement->pages as $page)
58 <h4><a href="{{$page->getUrl()}}"><i class="zmdi zmdi-file-text"></i>{{$page->name}}</a></h4> 53 <h4><a href="{{$page->getUrl()}}"><i class="zmdi zmdi-file-text"></i>{{$page->name}}</a></h4>
......
...@@ -2,13 +2,15 @@ ...@@ -2,13 +2,15 @@
2 2
3 @section('content') 3 @section('content')
4 4
5 - <div class="row faded-small"> 5 + <div class="faded-small">
6 - <div class="col-md-6 faded"> 6 + <div class="container">
7 - <div class="breadcrumbs padded-horizontal"> 7 + <div class="row">
8 + <div class="col-md-4 faded">
9 + <div class="breadcrumbs">
8 <a href="{{$book->getUrl()}}"><i class="zmdi zmdi-book"></i>{{ $book->name }}</a> 10 <a href="{{$book->getUrl()}}"><i class="zmdi zmdi-book"></i>{{ $book->name }}</a>
9 </div> 11 </div>
10 </div> 12 </div>
11 - <div class="col-md-6 faded"> 13 + <div class="col-md-8 faded">
12 <div class="action-buttons"> 14 <div class="action-buttons">
13 @if($currentUser->can('chapter-create')) 15 @if($currentUser->can('chapter-create'))
14 <a href="{{$chapter->getUrl() . '/create-page'}}" class="text-pos"><i class="zmdi zmdi-plus"></i>New Page</a> 16 <a href="{{$chapter->getUrl() . '/create-page'}}" class="text-pos"><i class="zmdi zmdi-plus"></i>New Page</a>
...@@ -22,8 +24,16 @@ ...@@ -22,8 +24,16 @@
22 </div> 24 </div>
23 </div> 25 </div>
24 </div> 26 </div>
27 + </div>
28 + </div>
25 29
26 30
31 + <div class="container">
32 + <div class="row">
33 + <div class="col-md-3">
34 + @include('pages/sidebar-tree-list', ['book' => $book])
35 + </div>
36 + <div class="col-md-9">
27 <div class="page-content"> 37 <div class="page-content">
28 <h1>{{ $chapter->name }}</h1> 38 <h1>{{ $chapter->name }}</h1>
29 <p class="text-muted">{{ $chapter->description }}</p> 39 <p class="text-muted">{{ $chapter->description }}</p>
...@@ -55,6 +65,11 @@ ...@@ -55,6 +65,11 @@
55 Last Updated {{$chapter->updated_at->diffForHumans()}} @if($chapter->createdBy) by {{$chapter->updatedBy->name}} @endif 65 Last Updated {{$chapter->updated_at->diffForHumans()}} @if($chapter->createdBy) by {{$chapter->updatedBy->name}} @endif
56 </p> 66 </p>
57 </div> 67 </div>
68 + </div>
69 + </div>
70 + </div>
71 +
72 +
58 73
59 74
60 @stop 75 @stop
......
...@@ -4,13 +4,18 @@ ...@@ -4,13 +4,18 @@
4 <script src="/bower/tinymce-dist/tinymce.jquery.min.js"></script> 4 <script src="/bower/tinymce-dist/tinymce.jquery.min.js"></script>
5 @stop 5 @stop
6 6
7 +@section('body-class', 'flexbox')
8 +
7 @section('content') 9 @section('content')
8 - <form action="{{$book->getUrl() . '/page'}}" method="POST"> 10 +
11 + <div class="flex-fill flex">
12 + <form action="{{$book->getUrl() . '/page'}}" method="POST" class="flex flex-fill">
9 @include('pages/form') 13 @include('pages/form')
10 @if($chapter) 14 @if($chapter)
11 <input type="hidden" name="chapter" value="{{$chapter->id}}"> 15 <input type="hidden" name="chapter" value="{{$chapter->id}}">
12 @endif 16 @endif
13 </form> 17 </form>
18 + </div>
14 @stop 19 @stop
15 20
16 @section('bottom') 21 @section('bottom')
......
...@@ -4,12 +4,16 @@ ...@@ -4,12 +4,16 @@
4 <script src="/bower/tinymce-dist/tinymce.jquery.min.js"></script> 4 <script src="/bower/tinymce-dist/tinymce.jquery.min.js"></script>
5 @stop 5 @stop
6 6
7 +@section('body-class', 'flexbox')
8 +
7 @section('content') 9 @section('content')
8 10
9 - <form action="{{$page->getUrl()}}" method="POST"> 11 + <div class="flex-fill flex">
12 + <form action="{{$page->getUrl()}}" method="POST" class="flex flex-fill">
10 <input type="hidden" name="_method" value="PUT"> 13 <input type="hidden" name="_method" value="PUT">
11 @include('pages/form', ['model' => $page]) 14 @include('pages/form', ['model' => $page])
12 </form> 15 </form>
16 + </div>
13 17
14 @stop 18 @stop
15 19
......
1 1
2 2
3 3
4 -<div class="page-style editor"> 4 +<div class="page-editor flex-fill flex">
5 5
6 {{ csrf_field() }} 6 {{ csrf_field() }}
7 + <div class="faded-small">
8 + <div class="container">
9 + <div class="row">
10 + <div class="col-md-4 faded">
11 + <div class="action-buttons text-left">
12 + <a onclick="$('body>header').slideToggle();" class="text-primary"><i class="zmdi zmdi-swap-vertical"></i>Toggle Header</a>
13 + </div>
14 + </div>
15 + <div class="col-md-8 faded">
16 + <div class="action-buttons">
17 + <a onclick="window.history.back();" class="text-primary"><i class="zmdi zmdi-close"></i>Cancel</a>
18 + <a onclick="$(this).closest('form').submit();" type="submit" class="text-pos"><i class="zmdi zmdi-floppy"></i>Save Page</a>
19 + </div>
20 + </div>
21 + </div>
22 + </div>
23 + </div>
24 +
7 <div class="title-input page-title clearfix"> 25 <div class="title-input page-title clearfix">
8 <div class="input"> 26 <div class="input">
9 @include('form/text', ['name' => 'name', 'placeholder' => 'Page Title']) 27 @include('form/text', ['name' => 'name', 'placeholder' => 'Page Title'])
10 </div> 28 </div>
11 </div> 29 </div>
12 - <div class="edit-area"> 30 + <div class="edit-area flex-fill flex">
13 <textarea id="html" name="html" rows="5" 31 <textarea id="html" name="html" rows="5"
14 @if($errors->has('html')) class="neg" @endif>@if(isset($model) || old('html')){{htmlspecialchars( old('html') ? old('html') : $model->html)}}@endif</textarea> 32 @if($errors->has('html')) class="neg" @endif>@if(isset($model) || old('html')){{htmlspecialchars( old('html') ? old('html') : $model->html)}}@endif</textarea>
15 @if($errors->has('html')) 33 @if($errors->has('html'))
16 <div class="text-neg text-small">{{ $errors->first('html') }}</div> 34 <div class="text-neg text-small">{{ $errors->first('html') }}</div>
17 @endif 35 @endif
18 </div> 36 </div>
19 - <div class="margin-top large">
20 - <a onclick="window.history.back();" class="button muted">Cancel</a>
21 - <button type="submit" class="button pos">Save Page</button>
22 - </div>
23 </div> 37 </div>
24 38
25 39
...@@ -40,7 +54,7 @@ ...@@ -40,7 +54,7 @@
40 relative_urls: false, 54 relative_urls: false,
41 statusbar: false, 55 statusbar: false,
42 menubar: false, 56 menubar: false,
43 - height: 700, 57 + //height: 700,
44 extended_valid_elements: 'pre[*]', 58 extended_valid_elements: 'pre[*]',
45 plugins: "image table textcolor paste link imagetools fullscreen code", 59 plugins: "image table textcolor paste link imagetools fullscreen code",
46 toolbar: "code undo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image link | fullscreen", 60 toolbar: "code undo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image link | fullscreen",
......
...@@ -2,15 +2,20 @@ ...@@ -2,15 +2,20 @@
2 2
3 @section('content') 3 @section('content')
4 4
5 - <div class="row faded-small"> 5 + <div class="faded-small">
6 + <div class="container">
7 + <div class="row">
6 <div class="col-md-6 faded"> 8 <div class="col-md-6 faded">
7 - <div class="breadcrumbs padded-horizontal"> 9 + <div class="breadcrumbs">
8 <a href="{{$page->getUrl()}}" class="text-primary"><i class="zmdi zmdi-arrow-left"></i>Back to page</a> 10 <a href="{{$page->getUrl()}}" class="text-primary"><i class="zmdi zmdi-arrow-left"></i>Back to page</a>
9 </div> 11 </div>
10 </div> 12 </div>
11 <div class="col-md-6 faded"> 13 <div class="col-md-6 faded">
12 </div> 14 </div>
13 </div> 15 </div>
16 + </div>
17 + </div>
18 +
14 19
15 <div class="page-content"> 20 <div class="page-content">
16 <h1>Page Revisions <span class="subheader">For "{{ $page->name }}"</span></h1> 21 <h1>Page Revisions <span class="subheader">For "{{ $page->name }}"</span></h1>
......
...@@ -7,10 +7,10 @@ ...@@ -7,10 +7,10 @@
7 <div class="row"> 7 <div class="row">
8 <div class="col-md-6 faded"> 8 <div class="col-md-6 faded">
9 <div class="breadcrumbs"> 9 <div class="breadcrumbs">
10 - <a href="{{$book->getUrl()}}"><i class="zmdi zmdi-book"></i>{{ $book->name }}</a> 10 + <a href="{{$book->getUrl()}}" class="text-book"><i class="zmdi zmdi-book"></i>{{ $book->name }}</a>
11 @if($page->hasChapter()) 11 @if($page->hasChapter())
12 <span class="sep">&raquo;</span> 12 <span class="sep">&raquo;</span>
13 - <a href="{{ $page->chapter->getUrl() }}"> 13 + <a href="{{ $page->chapter->getUrl() }}" class="text-chapter">
14 <i class="zmdi zmdi-collection-bookmark"></i> 14 <i class="zmdi zmdi-collection-bookmark"></i>
15 {{$page->chapter->name}} 15 {{$page->chapter->name}}
16 </a> 16 </a>
...@@ -33,13 +33,17 @@ ...@@ -33,13 +33,17 @@
33 </div> 33 </div>
34 34
35 35
36 + <div class="container">
37 + <div class="row">
38 + <div class="col-md-3">
39 + @include('pages/sidebar-tree-list', ['book' => $book])
36 <div class="side-nav faded"> 40 <div class="side-nav faded">
37 <h4>Page Navigation</h4> 41 <h4>Page Navigation</h4>
38 <ul class="page-nav-list"> 42 <ul class="page-nav-list">
39 </ul> 43 </ul>
40 </div> 44 </div>
41 - 45 + </div>
42 - 46 + <div class="col-md-9">
43 <div class="page-content"> 47 <div class="page-content">
44 @include('pages/page-display') 48 @include('pages/page-display')
45 <hr> 49 <hr>
...@@ -49,6 +53,12 @@ ...@@ -49,6 +53,12 @@
49 Last Updated {{$page->updated_at->diffForHumans()}} @if($page->createdBy) by {{$page->updatedBy->name}} @endif 53 Last Updated {{$page->updated_at->diffForHumans()}} @if($page->createdBy) by {{$page->updatedBy->name}} @endif
50 </p> 54 </p>
51 </div> 55 </div>
56 + </div>
57 + </div>
58 + </div>
59 +
60 +
61 +
52 62
53 63
54 <script> 64 <script>
......
1 1
2 -<ul class="sidebar-page-list menu"> 2 +<div class="book-tree">
3 + <ul class="sidebar-page-list menu">
3 <li class="book-header"><a href="{{$book->getUrl()}}" class="book {{ $current->matches($book)? 'selected' : '' }}"><i class="zmdi zmdi-book"></i>{{$book->name}}</a></li> 4 <li class="book-header"><a href="{{$book->getUrl()}}" class="book {{ $current->matches($book)? 'selected' : '' }}"><i class="zmdi zmdi-book"></i>{{$book->name}}</a></li>
4 @foreach($book->children() as $bookChild) 5 @foreach($book->children() as $bookChild)
5 - <li class="list-item-{{is_a($bookChild, 'Oxbow\Chapter') ? 'chapter' : 'page' }}"> 6 + <li class="list-item-{{ $bookChild->getName() }}">
6 - <a href="{{$bookChild->getUrl()}}" class="{{is_a($bookChild, 'Oxbow\Chapter') ? 'chapter' : 'page' }} {{ $current->matches($bookChild)? 'selected' : '' }}"> 7 + <a href="{{$bookChild->getUrl()}}" class="{{ $bookChild->getName() }} {{ $current->matches($bookChild)? 'selected' : '' }}">
7 - @if(is_a($bookChild, 'Oxbow\Chapter')) 8 + @if($bookChild->isA('chapter'))<i class="zmdi zmdi-collection-bookmark chapter-toggle"></i>@else <i class="zmdi zmdi-file-text"></i>@endif{{ $bookChild->name }}
8 - <i class="zmdi zmdi-collection-bookmark chapter-toggle"></i>
9 - @else
10 - <i class="zmdi zmdi-file-text"></i>
11 - @endif
12 - {{ $bookChild->name }}
13 </a> 9 </a>
14 10
15 - @if(is_a($bookChild, 'Oxbow\Chapter') && count($bookChild->pages) > 0) 11 + @if($bookChild->isA('chapter') && count($bookChild->pages) > 0)
16 <ul class="menu"> 12 <ul class="menu">
17 @foreach($bookChild->pages as $childPage) 13 @foreach($bookChild->pages as $childPage)
18 <li class="list-item-page"> 14 <li class="list-item-page">
...@@ -25,4 +21,5 @@ ...@@ -25,4 +21,5 @@
25 @endif 21 @endif
26 </li> 22 </li>
27 @endforeach 23 @endforeach
28 -</ul>
...\ No newline at end of file ...\ No newline at end of file
24 + </ul>
25 +</div>
......
...@@ -3,16 +3,17 @@ ...@@ -3,16 +3,17 @@
3 @section('content') 3 @section('content')
4 4
5 <div class="page-content"> 5 <div class="page-content">
6 - <h1>{{ $book->name }} <span class="subheader">Sort Pages</span></h1> 6 + <h1>Sorting Pages & Chapters<span class="subheader">For {{ $book->name }}</span></h1>
7 7
8 <ul class="sortable-page-list" id="sort-list"> 8 <ul class="sortable-page-list" id="sort-list">
9 @foreach($book->children() as $bookChild) 9 @foreach($book->children() as $bookChild)
10 - <li data-id="{{$bookChild->id}}" data-type="{{ is_a($bookChild, 'Oxbow\Chapter') ? 'chapter' : 'page' }}"> 10 + <li data-id="{{$bookChild->id}}" data-type="{{ $bookChild->getName() }}" class="text-{{ $bookChild->getName() }}">
11 - {{ $bookChild->name }} 11 + <i class="zmdi {{ $bookChild->isA('chapter') ? 'zmdi-collection-bookmark':'zmdi-file-text'}}"></i>{{ $bookChild->name }}
12 - @if(is_a($bookChild, 'Oxbow\Chapter')) 12 + @if($bookChild->isA('chapter'))
13 <ul> 13 <ul>
14 @foreach($bookChild->pages as $page) 14 @foreach($bookChild->pages as $page)
15 - <li data-id="{{$page->id}}" data-type="page"> 15 + <li data-id="{{$page->id}}" class="text-page" data-type="page">
16 + <i class="zmdi zmdi-file-text"></i>
16 {{ $page->name }} 17 {{ $page->name }}
17 </li> 18 </li>
18 @endforeach 19 @endforeach
...@@ -28,7 +29,7 @@ ...@@ -28,7 +29,7 @@
28 <input type="hidden" id="sort-tree-input" name="sort-tree"> 29 <input type="hidden" id="sort-tree-input" name="sort-tree">
29 <div class="list"> 30 <div class="list">
30 <a href="{{$book->getUrl()}}" class="button muted">Cancel</a> 31 <a href="{{$book->getUrl()}}" class="button muted">Cancel</a>
31 - <button class="button pos" type="submit">Save Ordering</button> 32 + <button class="button pos" type="submit">Save Order</button>
32 </div> 33 </div>
33 </form> 34 </form>
34 35
......
...@@ -3,7 +3,9 @@ ...@@ -3,7 +3,9 @@
3 3
4 @section('content') 4 @section('content')
5 5
6 - <div class="row faded-small"> 6 + <div class="faded-small">
7 + <div class="container">
8 + <div class="row">
7 <div class="col-md-6"></div> 9 <div class="col-md-6"></div>
8 <div class="col-md-6 faded"> 10 <div class="col-md-6 faded">
9 <div class="action-buttons"> 11 <div class="action-buttons">
...@@ -11,8 +13,11 @@ ...@@ -11,8 +13,11 @@
11 </div> 13 </div>
12 </div> 14 </div>
13 </div> 15 </div>
16 + </div>
17 + </div>
18 +
19 +
14 20
15 - <div class="row">
16 <div class="page-content"> 21 <div class="page-content">
17 22
18 <div class="row"> 23 <div class="row">
...@@ -53,7 +58,6 @@ ...@@ -53,7 +58,6 @@
53 </div> 58 </div>
54 59
55 </div> 60 </div>
56 - </div>
57 61
58 62
59 @stop 63 @stop
......