Зуев Егор / 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 110 additions and 117 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; 33 + }
31 - z-index: 1; 34 + .search-box {
32 - //padding-top: $-m; 35 + padding-top: $-l *0.8;
33 - width: 340px; 36 + }
34 - border-right: 1px solid #DDD; 37 + .avatar, .user-name {
35 - h4, li, p, a { 38 + display: inline-block;
36 - color: #CCC; 39 + }
40 + .avatar {
41 + margin-top: $-l*0.8;
42 + }
43 + .user-name {
44 + vertical-align: top;
45 + padding-top: $-l*1.1;
46 + padding-left: $-m;
37 } 47 }
38 } 48 }
39 49
40 #content { 50 #content {
41 - //margin-top: 63px;
42 - margin-left: 340px;
43 display: block; 51 display: block;
44 position: relative; 52 position: relative;
45 - padding: 0 16px;
46 } 53 }
47 54
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 - }
57 - i {
58 - padding-right: $-s;
59 - }
60 -}
61 55
62 -.user-overview { 56 +.logo {
63 - margin-top: $-m;
64 - .user-name {
65 display: inline-block; 57 display: inline-block;
58 + font-size: 1.8em;
59 + color: #fff;
60 + font-weight: 400;
61 + padding: $-l $-l $-l 0;
66 vertical-align: top; 62 vertical-align: top;
67 - padding: $-m $-s; 63 + line-height: 1;
68 - }
69 -}
70 -
71 -
72 -.search-box {
73 - input {
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 -}
84 -
85 -.menu {
86 - list-style: none;
87 - margin: 0;
88 - .col-md-4 {
89 - padding: 0;
90 - }
91 - a {
92 - padding: $-m;
93 - display: block;
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">
59 + <div class="search-box text-center" style="display: none">
60 + <form action="/pages/search/all" id="search-form" method="GET" style="display: none;">
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 }}">
60 <span class="user-name"> 65 <span class="user-name">
61 {{ Auth::user()->name }} 66 {{ Auth::user()->name }}
62 </span> 67 </span>
63 </div> 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>
64 </div> 75 </div>
65 </div> 76 </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>
72 - <div class="row menu">
73 - <div class="col-md-4"><a href="/books"><i class="zmdi zmdi-book"></i>Books</a></div>
74 - <div class="col-md-4"><a href="/users"><i class="zmdi zmdi-accounts"></i>Users</a></div>
75 - <div class="col-md-4"><a href="/logout"><i class="zmdi zmdi-run zmdi-hc-flip-horizontal"></i>Logout</a></div>
76 </div> 77 </div>
77 - @if(isset($book) && isset($current) && !isset($books))
78 - <div class="book-tree">
79 - @include('pages/sidebar-tree-list', ['book' => $book])
80 </div> 78 </div>
81 - @endif 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--}}
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,9 +2,10 @@ ...@@ -2,9 +2,10 @@
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="col-md-12">
8 <div class="action-buttons faded"> 9 <div class="action-buttons faded">
9 @if($currentUser->can('page-create')) 10 @if($currentUser->can('page-create'))
10 <a href="{{$book->getUrl() . '/page/create'}}" class="text-pos"><i class="zmdi zmdi-plus"></i> New Page</a> 11 <a href="{{$book->getUrl() . '/page/create'}}" class="text-pos"><i class="zmdi zmdi-plus"></i> New Page</a>
...@@ -22,11 +23,14 @@ ...@@ -22,11 +23,14 @@
22 </div> 23 </div>
23 </div> 24 </div>
24 </div> 25 </div>
26 + </div>
27 + </div>
28 +
25 29
30 + <div class="container">
26 <div class="row"> 31 <div class="row">
27 - <div class="col-md-6 col-md-offset-1"> 32 + <div class="col-md-7">
28 33
29 - <div class="page-content">
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,16 +70,17 @@ ...@@ -66,16 +70,17 @@
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)])
77 </div> 80 </div>
78 </div> 81 </div>
82 + </div>
83 +
79 84
80 85
81 <script> 86 <script>
......
...@@ -2,9 +2,10 @@ ...@@ -2,9 +2,10 @@
2 2
3 @section('content') 3 @section('content')
4 4
5 +
6 + <div class="container">
5 <div class="row"> 7 <div class="row">
6 - <div class="col-md-6 col-md-offset-1"> 8 + <div class="col-md-7">
7 - <div class="page-content">
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>
25 +
24 26
25 @stop 27 @stop
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -2,9 +2,11 @@ ...@@ -2,9 +2,11 @@
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="{{$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 @if($page->hasChapter()) 11 @if($page->hasChapter())
10 <span class="sep">&raquo;</span> 12 <span class="sep">&raquo;</span>
...@@ -27,6 +29,9 @@ ...@@ -27,6 +29,9 @@
27 </div> 29 </div>
28 </div> 30 </div>
29 </div> 31 </div>
32 + </div>
33 + </div>
34 +
30 35
31 <div class="side-nav faded"> 36 <div class="side-nav faded">
32 <h4>Page Navigation</h4> 37 <h4>Page Navigation</h4>
......
1 -<div class="row"> 1 +
2 - <div class="col-md-6 col-md-offset-3 setting-nav"> 2 +<div class="faded-small">
3 + <div class="container">
4 + <div class="row">
5 + <div class="col-md-12 setting-nav">
3 <a href="/settings" @if($selected == 'settings') class="selected" @endif><i class="zmdi zmdi-settings"></i>Settings</a> 6 <a href="/settings" @if($selected == 'settings') class="selected" @endif><i class="zmdi zmdi-settings"></i>Settings</a>
4 <a href="/users" @if($selected == 'users') class="selected" @endif><i class="zmdi zmdi-accounts"></i>Users</a> 7 <a href="/users" @if($selected == 'users') class="selected" @endif><i class="zmdi zmdi-accounts"></i>Users</a>
5 </div> 8 </div>
9 + </div>
10 + </div>
6 </div> 11 </div>
...\ No newline at end of file ...\ No newline at end of file
......