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

Go to a project
Toggle navigation
Toggle navigation pinning
Dan Brown
505a22bc 1 parent 17f4aa43

Started another major redsign

Inline Side-by-side
Showing 10 changed files with 160 additions and 167 deletions
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
14 } 14 }
15 15
16 // Button Specific Variables 16 // Button Specific Variables
17 -$button-border-radius: 3px; 17 +$button-border-radius: 2px;
18 18
19 .button-base { 19 .button-base {
20 text-decoration: none; 20 text-decoration: none;
...@@ -24,11 +24,14 @@ $button-border-radius: 3px; ...@@ -24,11 +24,14 @@ $button-border-radius: 3px;
24 margin: $-xs $-xs $-xs 0; 24 margin: $-xs $-xs $-xs 0;
25 display: inline-block; 25 display: inline-block;
26 border: none; 26 border: none;
27 + font-weight: 500;
28 + font-family: $text;
27 outline: 0; 29 outline: 0;
28 border-radius: $button-border-radius; 30 border-radius: $button-border-radius;
29 cursor: pointer; 31 cursor: pointer;
30 - transition: all ease-in-out 80ms; 32 + transition: all ease-in-out 120ms;
31 - box-shadow: 0 0 0 0 #000; 33 + text-transform: uppercase;
34 + box-shadow: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.21);
32 @include generate-button-colors(#EEE, $primary); 35 @include generate-button-colors(#EEE, $primary);
33 } 36 }
34 37
......
...@@ -7,8 +7,8 @@ html { ...@@ -7,8 +7,8 @@ html {
7 body { 7 body {
8 font-family: $text; 8 font-family: $text;
9 font-size: $fs-m; 9 font-size: $fs-m;
10 - line-height: 1.4em; 10 + line-height: 1.6;
11 - color: #444; 11 + color: #616161;
12 -webkit-font-smoothing: antialiased; 12 -webkit-font-smoothing: antialiased;
13 } 13 }
14 14
......
...@@ -28,7 +28,7 @@ h4 { ...@@ -28,7 +28,7 @@ h4 {
28 } 28 }
29 29
30 h1, h2, h3, h4 { 30 h1, h2, h3, h4 {
31 - font-weight: 500; 31 + font-weight: 400;
32 position: relative; 32 position: relative;
33 display: block; 33 display: block;
34 color: #555; 34 color: #555;
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 /////////////// 2 ///////////////
3 3
4 // Sizes 4 // Sizes
5 -$max-width: 1100px; 5 +$max-width: 1400px;
6 6
7 // Screen breakpoints 7 // Screen breakpoints
8 $xl: 1100px; 8 $xl: 1100px;
...@@ -26,14 +26,15 @@ $-xxs: 3px; ...@@ -26,14 +26,15 @@ $-xxs: 3px;
26 // Fonts 26 // Fonts
27 $heading: 'Roboto', Helvetica, Arial, sans-serif; 27 $heading: 'Roboto', Helvetica, Arial, sans-serif;
28 $text: 'Roboto', Helvetica, Arial, sans-serif; 28 $text: 'Roboto', Helvetica, Arial, sans-serif;
29 -$fs-m: 16px; 29 +$fs-m: 15px;
30 $fs-s: 14px; 30 $fs-s: 14px;
31 31
32 // Colours 32 // Colours
33 -$primary: #1c77c1; 33 +$primary: #0288D1;
34 +$primary-dark: #0288D1;
34 $secondary: #e27b41; 35 $secondary: #e27b41;
35 -$positive: #409945; 36 +$positive: #52A256;
36 -$negative: #D35252; 37 +$negative: #D32F2F;
37 38
38 // Text colours 39 // Text colours
39 $text-dark: #444; 40 $text-dark: #444;
......
...@@ -16,83 +16,51 @@ header { ...@@ -16,83 +16,51 @@ header {
16 display: block; 16 display: block;
17 z-index: 2; 17 z-index: 2;
18 top: 0; 18 top: 0;
19 + background-color: $primary-dark;
20 + color: #fff;
19 .padded { 21 .padded {
20 padding: $-m; 22 padding: $-m;
21 } 23 }
24 + border-bottom: 1px solid #DDD;
22 //margin-bottom: $-l; 25 //margin-bottom: $-l;
23 -} 26 + .links a {
24 - 27 + display: inline-block;
25 -#sidebar { 28 + padding: $-l;
26 - position: fixed; 29 + color: #FFF;
27 - background-color: #444; 30 + &:last-child {
28 - color: #EEE; 31 + padding-right: 0;
29 - height: 100%; 32 + }
30 - top: 0;
31 - z-index: 1;
32 - //padding-top: $-m;
33 - width: 340px;
34 - border-right: 1px solid #DDD;
35 - h4, li, p, a {
36 - color: #CCC;
37 } 33 }
38 -} 34 + .search-box {
39 - 35 + padding-top: $-l *0.8;
40 -#content {
41 - //margin-top: 63px;
42 - margin-left: 340px;
43 - display: block;
44 - position: relative;
45 - padding: 0 16px;
46 -}
47 -
48 -.logo-container {
49 - padding: $-l $-s 0 $-s;
50 - color: #CCC;
51 - .logo {
52 - display: block;
53 - font-size: 2em;
54 - font-weight: bold;
55 - padding: $-m 0;
56 } 36 }
57 - i { 37 + .avatar, .user-name {
58 - padding-right: $-s; 38 + display: inline-block;
39 + }
40 + .avatar {
41 + margin-top: $-l*0.8;
59 } 42 }
60 -}
61 -
62 -.user-overview {
63 - margin-top: $-m;
64 .user-name { 43 .user-name {
65 - display: inline-block;
66 vertical-align: top; 44 vertical-align: top;
67 - padding: $-m $-s; 45 + padding-top: $-l*1.1;
46 + padding-left: $-m;
68 } 47 }
69 } 48 }
70 49
71 - 50 +#content {
72 -.search-box { 51 + display: block;
73 - input { 52 + position: relative;
74 - width: 100%;
75 - border-radius: 0;
76 - padding: $-m;
77 - background-color: rgba(0, 0, 0, 0.1);
78 - border: none;
79 - border-top: 1px solid #333;
80 - border-bottom: 1px solid #333;
81 - color: #EEE;
82 - }
83 } 53 }
84 54
85 -.menu { 55 +
86 - list-style: none; 56 +.logo {
87 - margin: 0; 57 + display: inline-block;
88 - .col-md-4 { 58 + font-size: 1.8em;
89 - padding: 0; 59 + color: #fff;
90 - } 60 + font-weight: 400;
91 - a { 61 + padding: $-l $-l $-l 0;
92 - padding: $-m; 62 + vertical-align: top;
93 - display: block; 63 + line-height: 1;
94 - border-bottom: 1px solid #3A3939;
95 - }
96 } 64 }
97 65
98 .page-title input { 66 .page-title input {
...@@ -259,10 +227,11 @@ h1, h2, h3, h4, h5, h6 { ...@@ -259,10 +227,11 @@ h1, h2, h3, h4, h5, h6 {
259 } 227 }
260 228
261 .faded-small { 229 .faded-small {
262 - color: #666; 230 + color: #000;
263 font-size: 0.9em; 231 font-size: 0.9em;
232 + background-color: rgba(21, 101, 192, 0.15);
264 a, span { 233 a, span {
265 - color: #666; 234 + color: #000;
266 } 235 }
267 } 236 }
268 237
...@@ -271,6 +240,9 @@ h1, h2, h3, h4, h5, h6 { ...@@ -271,6 +240,9 @@ h1, h2, h3, h4, h5, h6 {
271 a { 240 a {
272 display: inline-block; 241 display: inline-block;
273 padding: $-s; 242 padding: $-s;
243 + &:last-child {
244 + padding-right: 0;
245 + }
274 } 246 }
275 } 247 }
276 248
...@@ -488,16 +460,14 @@ body.dragging, body.dragging * { ...@@ -488,16 +460,14 @@ body.dragging, body.dragging * {
488 } 460 }
489 461
490 .setting-nav { 462 .setting-nav {
491 - margin-top: $-l; 463 + text-align: center;
492 - border-top: 1px solid #DDD;
493 - border-bottom: 1px solid #DDD;
494 a { 464 a {
495 padding: $-m; 465 padding: $-m;
496 display: inline-block; 466 display: inline-block;
497 //color: #666; 467 //color: #666;
498 &.selected { 468 &.selected {
499 //color: $primary; 469 //color: $primary;
500 - background-color: #f8f8f8; 470 + border-bottom: 2px solid $primary;
501 } 471 }
502 } 472 }
503 } 473 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -49,38 +49,40 @@ ...@@ -49,38 +49,40 @@
49 </div> 49 </div>
50 @endif 50 @endif
51 51
52 - <section id="sidebar"> 52 + <header id="header">
53 - <div class="sidebar-bg"><div class="overlay"></div></div> 53 + <div class="container">
54 - <header> 54 + <div class="row">
55 - <div class="padded row clearfix"> 55 + <div class="col-md-4">
56 - <div class="col-md-12 logo-container">
57 <a href="/" class="logo">{{ Setting::get('app-name', 'BookStack') }}</a> 56 <a href="/" class="logo">{{ Setting::get('app-name', 'BookStack') }}</a>
58 - <div class="user-overview"> 57 + </div>
59 - <img class="avatar" src="{{Auth::user()->getAvatar(50)}}" alt="{{ Auth::user()->name }}"> 58 + <div class="col-md-3">
60 - <span class="user-name"> 59 + <div class="search-box text-center" style="display: none">
61 - {{ Auth::user()->name }} 60 + <form action="/pages/search/all" id="search-form" method="GET" style="display: none;">
62 - </span> 61 + <input type="text" placeholder="Search all pages..." name="term" id="search-input">
62 + </form>
63 + </div>
64 + <img class="avatar" src="{{Auth::user()->getAvatar(30)}}" alt="{{ Auth::user()->name }}">
65 + <span class="user-name">
66 + {{ Auth::user()->name }}
67 + </span>
68 + </div>
69 + <div class="col-md-5">
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>
63 </div> 75 </div>
64 </div> 76 </div>
65 </div> 77 </div>
66 - </header>
67 - <div class="search-box">
68 - <form action="/pages/search/all" id="search-form" method="GET">
69 - <input type="text" placeholder="Search all pages..." name="term" id="search-input">
70 - </form>
71 </div> 78 </div>
72 - <div class="row menu"> 79 + {{--@if(isset($book) && isset($current) && !isset($books))--}}
73 - <div class="col-md-4"><a href="/books"><i class="zmdi zmdi-book"></i>Books</a></div> 80 + {{--<div class="book-tree">--}}
74 - <div class="col-md-4"><a href="/users"><i class="zmdi zmdi-accounts"></i>Users</a></div> 81 + {{--@include('pages/sidebar-tree-list', ['book' => $book])--}}
75 - <div class="col-md-4"><a href="/logout"><i class="zmdi zmdi-run zmdi-hc-flip-horizontal"></i>Logout</a></div> 82 + {{--</div>--}}
76 - </div> 83 + {{--@endif--}}
77 - @if(isset($book) && isset($current) && !isset($books))
78 - <div class="book-tree">
79 - @include('pages/sidebar-tree-list', ['book' => $book])
80 - </div>
81 - @endif
82 @yield('sidebar') 84 @yield('sidebar')
83 - </section> 85 + </header>
84 86
85 <section id="content"> 87 <section id="content">
86 @yield('content') 88 @yield('content')
......
...@@ -2,31 +2,35 @@ ...@@ -2,31 +2,35 @@
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"></div> 6 + <div class="container">
7 - <div class="col-md-6"> 7 + <div class="row">
8 - <div class="action-buttons faded"> 8 + <div class="col-md-12">
9 - @if($currentUser->can('page-create')) 9 + <div class="action-buttons faded">
10 - <a href="{{$book->getUrl() . '/page/create'}}" class="text-pos"><i class="zmdi zmdi-plus"></i> New Page</a> 10 + @if($currentUser->can('page-create'))
11 - @endif 11 + <a href="{{$book->getUrl() . '/page/create'}}" class="text-pos"><i class="zmdi zmdi-plus"></i> New Page</a>
12 - @if($currentUser->can('chapter-create')) 12 + @endif
13 - <a href="{{$book->getUrl() . '/chapter/create'}}" class="text-pos"><i class="zmdi zmdi-plus"></i> New Chapter</a> 13 + @if($currentUser->can('chapter-create'))
14 - @endif 14 + <a href="{{$book->getUrl() . '/chapter/create'}}" class="text-pos"><i class="zmdi zmdi-plus"></i> New Chapter</a>
15 - @if($currentUser->can('book-update')) 15 + @endif
16 - <a href="{{$book->getEditUrl()}}" class="text-primary"><i class="zmdi zmdi-edit"></i>Edit</a> 16 + @if($currentUser->can('book-update'))
17 - <a href="{{ $book->getUrl() }}/sort" class="text-primary"><i class="zmdi zmdi-sort"></i>Sort</a> 17 + <a href="{{$book->getEditUrl()}}" class="text-primary"><i class="zmdi zmdi-edit"></i>Edit</a>
18 - @endif 18 + <a href="{{ $book->getUrl() }}/sort" class="text-primary"><i class="zmdi zmdi-sort"></i>Sort</a>
19 - @if($currentUser->can('book-delete')) 19 + @endif
20 - <a href="{{ $book->getUrl() }}/delete" class="text-neg"><i class="zmdi zmdi-delete"></i>Delete</a> 20 + @if($currentUser->can('book-delete'))
21 - @endif 21 + <a href="{{ $book->getUrl() }}/delete" class="text-neg"><i class="zmdi zmdi-delete"></i>Delete</a>
22 + @endif
23 + </div>
24 + </div>
22 </div> 25 </div>
23 </div> 26 </div>
24 </div> 27 </div>
25 28
26 - <div class="row">
27 - <div class="col-md-6 col-md-offset-1">
28 29
29 - <div class="page-content"> 30 + <div class="container">
31 + <div class="row">
32 + <div class="col-md-7">
33 +
30 <h1>{{$book->name}}</h1> 34 <h1>{{$book->name}}</h1>
31 <p class="text-muted">{{$book->description}}</p> 35 <p class="text-muted">{{$book->description}}</p>
32 36
...@@ -51,7 +55,7 @@ ...@@ -51,7 +55,7 @@
51 @if(is_a($childElement, 'Oxbow\Chapter') && count($childElement->pages) > 0) 55 @if(is_a($childElement, 'Oxbow\Chapter') && count($childElement->pages) > 0)
52 <div class="inset-list"> 56 <div class="inset-list">
53 @foreach($childElement->pages as $page) 57 @foreach($childElement->pages as $page)
54 - <h4><a href="{{$page->getUrl()}}"><i class="zmdi zmdi-file-text"></i> {{$page->name}}</a></h4> 58 + <h4><a href="{{$page->getUrl()}}"><i class="zmdi zmdi-file-text"></i>{{$page->name}}</a></h4>
55 @endforeach 59 @endforeach
56 </div> 60 </div>
57 @endif 61 @endif
...@@ -66,18 +70,19 @@ ...@@ -66,18 +70,19 @@
66 Last Updated {{$book->updated_at->diffForHumans()}} @if($book->createdBy) by {{$book->updatedBy->name}} @endif 70 Last Updated {{$book->updated_at->diffForHumans()}} @if($book->createdBy) by {{$book->updatedBy->name}} @endif
67 </p> 71 </p>
68 72
69 - </div>
70 73
71 - </div> 74 + </div>
72 75
73 - <div class="col-md-3 col-md-offset-1"> 76 + <div class="col-md-4 col-md-offset-1">
74 - <div class="margin-top large"><br></div> 77 + <div class="margin-top large"><br></div>
75 - <h3>Recent Activity</h3> 78 + <h3>Recent Activity</h3>
76 - @include('partials/activity-list', ['activity' => Activity::entityActivity($book, 20, 0)]) 79 + @include('partials/activity-list', ['activity' => Activity::entityActivity($book, 20, 0)])
80 + </div>
77 </div> 81 </div>
78 </div> 82 </div>
79 83
80 84
85 +
81 <script> 86 <script>
82 $(function() { 87 $(function() {
83 88
......
...@@ -2,9 +2,10 @@ ...@@ -2,9 +2,10 @@
2 2
3 @section('content') 3 @section('content')
4 4
5 - <div class="row"> 5 +
6 - <div class="col-md-6 col-md-offset-1"> 6 + <div class="container">
7 - <div class="page-content"> 7 + <div class="row">
8 + <div class="col-md-7">
8 <h2>Books</h2> 9 <h2>Books</h2>
9 @foreach($books as $book) 10 @foreach($books as $book)
10 <div class="book"> 11 <div class="book">
...@@ -14,12 +15,13 @@ ...@@ -14,12 +15,13 @@
14 <hr> 15 <hr>
15 @endforeach 16 @endforeach
16 </div> 17 </div>
17 - </div> 18 + <div class="col-md-4 col-md-offset-1">
18 - <div class="col-md-3 col-md-offset-1"> 19 + <div class="margin-top large">&nbsp;</div>
19 - <div class="margin-top large">&nbsp;</div> 20 + <h3>Recent Activity</h3>
20 - <h3>Recent Activity</h3> 21 + @include('partials/activity-list', ['activity' => $activity])
21 - @include('partials/activity-list', ['activity' => $activity]) 22 + </div>
22 </div> 23 </div>
23 </div> 24 </div>
24 25
26 +
25 @stop 27 @stop
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -2,32 +2,37 @@ ...@@ -2,32 +2,37 @@
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 - <a href="{{$book->getUrl()}}"><i class="zmdi zmdi-book"></i>{{ $book->name }}</a> 8 + <div class="col-md-6 faded">
9 - @if($page->hasChapter()) 9 + <div class="breadcrumbs">
10 - <span class="sep">&raquo;</span> 10 + <a href="{{$book->getUrl()}}"><i class="zmdi zmdi-book"></i>{{ $book->name }}</a>
11 - <a href="{{ $page->chapter->getUrl() }}"> 11 + @if($page->hasChapter())
12 - <i class="zmdi zmdi-collection-bookmark"></i> 12 + <span class="sep">&raquo;</span>
13 - {{$page->chapter->name}} 13 + <a href="{{ $page->chapter->getUrl() }}">
14 - </a> 14 + <i class="zmdi zmdi-collection-bookmark"></i>
15 - @endif 15 + {{$page->chapter->name}}
16 - </div> 16 + </a>
17 - </div> 17 + @endif
18 - <div class="col-md-6 faded"> 18 + </div>
19 - <div class="action-buttons"> 19 + </div>
20 - @if($currentUser->can('page-update')) 20 + <div class="col-md-6 faded">
21 - <a href="{{$page->getUrl() . '/revisions'}}" class="text-primary"><i class="zmdi zmdi-replay"></i>Revisions</a> 21 + <div class="action-buttons">
22 - <a href="{{$page->getUrl() . '/edit'}}" class="text-primary" ><i class="zmdi zmdi-edit"></i>Edit</a> 22 + @if($currentUser->can('page-update'))
23 - @endif 23 + <a href="{{$page->getUrl() . '/revisions'}}" class="text-primary"><i class="zmdi zmdi-replay"></i>Revisions</a>
24 - @if($currentUser->can('page-delete')) 24 + <a href="{{$page->getUrl() . '/edit'}}" class="text-primary" ><i class="zmdi zmdi-edit"></i>Edit</a>
25 - <a href="{{$page->getUrl() . '/delete'}}" class="text-neg"><i class="zmdi zmdi-delete"></i>Delete</a> 25 + @endif
26 - @endif 26 + @if($currentUser->can('page-delete'))
27 + <a href="{{$page->getUrl() . '/delete'}}" class="text-neg"><i class="zmdi zmdi-delete"></i>Delete</a>
28 + @endif
29 + </div>
30 + </div>
27 </div> 31 </div>
28 </div> 32 </div>
29 </div> 33 </div>
30 34
35 +
31 <div class="side-nav faded"> 36 <div class="side-nav faded">
32 <h4>Page Navigation</h4> 37 <h4>Page Navigation</h4>
33 <ul class="page-nav-list"> 38 <ul class="page-nav-list">
......
1 -<div class="row"> 1 +
2 - <div class="col-md-6 col-md-offset-3 setting-nav"> 2 +<div class="faded-small">
3 - <a href="/settings" @if($selected == 'settings') class="selected" @endif><i class="zmdi zmdi-settings"></i>Settings</a> 3 + <div class="container">
4 - <a href="/users" @if($selected == 'users') class="selected" @endif><i class="zmdi zmdi-accounts"></i>Users</a> 4 + <div class="row">
5 + <div class="col-md-12 setting-nav">
6 + <a href="/settings" @if($selected == 'settings') class="selected" @endif><i class="zmdi zmdi-settings"></i>Settings</a>
7 + <a href="/users" @if($selected == 'users') class="selected" @endif><i class="zmdi zmdi-accounts"></i>Users</a>
8 + </div>
9 + </div>
5 </div> 10 </div>
6 </div> 11 </div>
...\ No newline at end of file ...\ No newline at end of file
......