]> BookStack Code Mirror - bookstack/commitdiff
Started another major redsign
authorDan Brown <redacted>
Sun, 30 Aug 2015 16:53:30 +0000 (17:53 +0100)
committerDan Brown <redacted>
Sun, 30 Aug 2015 16:53:30 +0000 (17:53 +0100)
resources/assets/sass/_buttons.scss
resources/assets/sass/_html.scss
resources/assets/sass/_text.scss
resources/assets/sass/_variables.scss
resources/assets/sass/styles.scss
resources/views/base.blade.php
resources/views/books/show.blade.php
resources/views/home.blade.php
resources/views/pages/show.blade.php
resources/views/settings/navbar.blade.php

index d9a45709bccb91a2e2a42d8339bef066e23ddc3e..df4712e32bfb188506cd1f4727fa599b904603af 100644 (file)
@@ -14,7 +14,7 @@
 }
 
 // Button Specific Variables
-$button-border-radius: 3px;
+$button-border-radius: 2px;
 
 .button-base {
   text-decoration: none;
@@ -24,11 +24,14 @@ $button-border-radius: 3px;
   margin: $-xs $-xs $-xs 0;
   display: inline-block;
   border: none;
+  font-weight: 500;
+  font-family: $text;
   outline: 0;
   border-radius: $button-border-radius;
   cursor: pointer;
-  transition: all ease-in-out 80ms;
-  box-shadow: 0 0 0 0 #000;
+  transition: all ease-in-out 120ms;
+  text-transform: uppercase;
+  box-shadow: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.21);
   @include generate-button-colors(#EEE, $primary);
 }
 
index 5071b32967897e3d8f4d4e3057fc0f14098cd0f8..d8587aaf1ecb3d36f8d0dda53c6df77e111d5668 100644 (file)
@@ -7,8 +7,8 @@ html {
 body {
        font-family: $text;
        font-size: $fs-m;
-       line-height: 1.4em;
-       color: #444;
+       line-height: 1.6;
+       color: #616161;
        -webkit-font-smoothing: antialiased;
 }
 
index 8d7950e2cb6326f3bfa4811b7578a8b9f48550b5..c9eabf79209f917a75ae368083abecd561b690ba 100644 (file)
@@ -28,7 +28,7 @@ h4 {
 }
 
 h1, h2, h3, h4 {
-  font-weight: 500;
+  font-weight: 400;
   position: relative;
   display: block;
   color: #555;
index 7e67e8a3da3f7cbcd4f238fb2c915bec698a1d64..d886dcfca37f7165954127283a9db7cac7924808 100644 (file)
@@ -2,7 +2,7 @@
 ///////////////
 
 // Sizes
-$max-width: 1100px;
+$max-width: 1400px;
 
 // Screen breakpoints
 $xl: 1100px;
@@ -26,14 +26,15 @@ $-xxs: 3px;
 // Fonts
 $heading:  'Roboto', Helvetica, Arial, sans-serif;
 $text: 'Roboto', Helvetica, Arial, sans-serif;
-$fs-m: 16px;
+$fs-m: 15px;
 $fs-s: 14px;
 
 // Colours
-$primary: #1c77c1;
+$primary: #0288D1;
+$primary-dark: #0288D1;
 $secondary: #e27b41;
-$positive: #409945;
-$negative: #D35252;
+$positive: #52A256;
+$negative: #D32F2F;
 
 // Text colours
 $text-dark: #444;
index d6534789aceb989e25de3db928c3fbf6fc6bc33d..62d0e7ad1fccf1bc360667bafe4fb9db60a17d44 100644 (file)
@@ -16,83 +16,51 @@ header {
   display: block;
   z-index: 2;
   top: 0;
+  background-color: $primary-dark;
+  color: #fff;
   .padded {
     padding: $-m;
   }
+  border-bottom: 1px solid #DDD;
   //margin-bottom: $-l;
-}
-
-#sidebar {
-  position: fixed;
-  background-color: #444;
-  color: #EEE;
-  height: 100%;
-  top: 0;
-  z-index: 1;
-  //padding-top: $-m;
-  width: 340px;
-  border-right: 1px solid #DDD;
-  h4, li, p, a {
-    color: #CCC;
+  .links a {
+    display: inline-block;
+    padding: $-l;
+    color: #FFF;
+    &:last-child {
+      padding-right: 0;
+    }
   }
-}
-
-#content {
-  //margin-top: 63px;
-  margin-left: 340px;
-  display: block;
-  position: relative;
-  padding: 0 16px;
-}
-
-.logo-container {
-  padding: $-l $-s 0 $-s;
-  color: #CCC;
-  .logo {
-    display: block;
-    font-size: 2em;
-    font-weight: bold;
-    padding: $-m 0;
+  .search-box {
+    padding-top: $-l *0.8;
   }
-  i {
-    padding-right: $-s;
+  .avatar, .user-name {
+    display: inline-block;
+  }
+  .avatar {
+    margin-top: $-l*0.8;
   }
-}
-
-.user-overview {
-  margin-top: $-m;
   .user-name {
-    display: inline-block;
     vertical-align: top;
-    padding: $-m $-s;
+    padding-top: $-l*1.1;
+    padding-left: $-m;
   }
 }
 
-
-.search-box {
-  input {
-    width: 100%;
-    border-radius: 0;
-    padding: $-m;
-    background-color: rgba(0, 0, 0, 0.1);
-    border: none;
-    border-top: 1px solid #333;
-    border-bottom: 1px solid #333;
-    color: #EEE;
-  }
+#content {
+  display: block;
+  position: relative;
 }
 
-.menu {
-  list-style: none;
-  margin: 0;
-  .col-md-4 {
-    padding: 0;
-  }
-  a {
-    padding: $-m;
-    display: block;
-    border-bottom: 1px solid #3A3939;
-  }
+
+.logo {
+  display: inline-block;
+  font-size: 1.8em;
+  color: #fff;
+  font-weight: 400;
+  padding: $-l $-l $-l 0;
+  vertical-align: top;
+  line-height: 1;
 }
 
 .page-title input {
@@ -259,10 +227,11 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .faded-small {
-  color: #666;
+  color: #000;
   font-size: 0.9em;
+  background-color: rgba(21, 101, 192, 0.15);
   a, span {
-    color: #666;
+    color: #000;
   }
 }
 
@@ -271,6 +240,9 @@ h1, h2, h3, h4, h5, h6 {
   a {
     display: inline-block;
     padding: $-s;
+    &:last-child {
+      padding-right: 0;
+    }
   }
 }
 
@@ -488,16 +460,14 @@ body.dragging, body.dragging * {
 }
 
 .setting-nav {
-  margin-top: $-l;
-  border-top: 1px solid #DDD;
-  border-bottom: 1px solid #DDD;
+  text-align: center;
   a {
     padding: $-m;
     display: inline-block;
     //color: #666;
     &.selected {
       //color: $primary;
-      background-color: #f8f8f8;
+      border-bottom: 2px solid $primary;
     }
   }
 }
\ No newline at end of file
index 4e1e74398b44c706ae05b5f6ccc9f69ecafca45a..0e787d2ca768b3bcc8947e1040723f99b9502bfc 100644 (file)
         </div>
     @endif
 
-    <section id="sidebar">
-        <div class="sidebar-bg"><div class="overlay"></div></div>
-        <header>
-            <div class="padded row clearfix">
-                <div class="col-md-12 logo-container">
+    <header id="header">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-4">
                     <a href="/" class="logo">{{ Setting::get('app-name', 'BookStack') }}</a>
-                    <div class="user-overview">
-                        <img class="avatar" src="{{Auth::user()->getAvatar(50)}}" alt="{{ Auth::user()->name }}">
-                        <span class="user-name">
-                            {{ Auth::user()->name }}
-                        </span>
+                </div>
+                <div class="col-md-3">
+                    <div class="search-box text-center" style="display: none">
+                        <form action="/pages/search/all" id="search-form" method="GET" style="display: none;">
+                            <input type="text" placeholder="Search all pages..." name="term" id="search-input">
+                        </form>
+                    </div>
+                    <img class="avatar" src="{{Auth::user()->getAvatar(30)}}" alt="{{ Auth::user()->name }}">
+                <span class="user-name">
+                    {{ Auth::user()->name }}
+                </span>
+                </div>
+                <div class="col-md-5">
+                    <div class="float right links">
+                        <a href="/search"><i class="zmdi zmdi-search"></i></a>
+                        <a href="/books"><i class="zmdi zmdi-book"></i>Books</a>
+                        <a href="/users"><i class="zmdi zmdi-accounts"></i>Users</a>
+                        <a href="/logout"><i class="zmdi zmdi-run zmdi-hc-flip-horizontal"></i>Logout</a>
                     </div>
                 </div>
             </div>
-        </header>
-        <div class="search-box">
-            <form action="/pages/search/all" id="search-form" method="GET">
-                <input type="text" placeholder="Search all pages..." name="term" id="search-input">
-            </form>
         </div>
-        <div class="row menu">
-            <div class="col-md-4"><a href="/books"><i class="zmdi zmdi-book"></i>Books</a></div>
-            <div class="col-md-4"><a href="/users"><i class="zmdi zmdi-accounts"></i>Users</a></div>
-            <div class="col-md-4"><a href="/logout"><i class="zmdi zmdi-run zmdi-hc-flip-horizontal"></i>Logout</a></div>
-        </div>
-        @if(isset($book) && isset($current) && !isset($books))
-            <div class="book-tree">
-                @include('pages/sidebar-tree-list', ['book' => $book])
-            </div>
-        @endif
+        {{--@if(isset($book) && isset($current) && !isset($books))--}}
+            {{--<div class="book-tree">--}}
+                {{--@include('pages/sidebar-tree-list', ['book' => $book])--}}
+            {{--</div>--}}
+        {{--@endif--}}
         @yield('sidebar')
-    </section>
+    </header>
 
     <section id="content">
         @yield('content')
index d80cc09e1b5450657e674d991cf54df241913a06..88db4b18de741d10480e414f7667f905ddaa9091 100644 (file)
@@ -2,31 +2,35 @@
 
 @section('content')
 
-    <div class="row faded-small">
-        <div class="col-md-6"></div>
-        <div class="col-md-6">
-            <div class="action-buttons faded">
-                @if($currentUser->can('page-create'))
-                    <a href="{{$book->getUrl() . '/page/create'}}" class="text-pos"><i class="zmdi zmdi-plus"></i> New Page</a>
-                @endif
-                @if($currentUser->can('chapter-create'))
-                    <a href="{{$book->getUrl() . '/chapter/create'}}" class="text-pos"><i class="zmdi zmdi-plus"></i> New Chapter</a>
-                @endif
-                @if($currentUser->can('book-update'))
-                    <a href="{{$book->getEditUrl()}}" class="text-primary"><i class="zmdi zmdi-edit"></i>Edit</a>
-                    <a href="{{ $book->getUrl() }}/sort" class="text-primary"><i class="zmdi zmdi-sort"></i>Sort</a>
-                @endif
-                @if($currentUser->can('book-delete'))
-                    <a href="{{ $book->getUrl() }}/delete" class="text-neg"><i class="zmdi zmdi-delete"></i>Delete</a>
-                @endif
+    <div class="faded-small">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-12">
+                    <div class="action-buttons faded">
+                        @if($currentUser->can('page-create'))
+                            <a href="{{$book->getUrl() . '/page/create'}}" class="text-pos"><i class="zmdi zmdi-plus"></i> New Page</a>
+                        @endif
+                        @if($currentUser->can('chapter-create'))
+                            <a href="{{$book->getUrl() . '/chapter/create'}}" class="text-pos"><i class="zmdi zmdi-plus"></i> New Chapter</a>
+                        @endif
+                        @if($currentUser->can('book-update'))
+                            <a href="{{$book->getEditUrl()}}" class="text-primary"><i class="zmdi zmdi-edit"></i>Edit</a>
+                            <a href="{{ $book->getUrl() }}/sort" class="text-primary"><i class="zmdi zmdi-sort"></i>Sort</a>
+                        @endif
+                        @if($currentUser->can('book-delete'))
+                            <a href="{{ $book->getUrl() }}/delete" class="text-neg"><i class="zmdi zmdi-delete"></i>Delete</a>
+                        @endif
+                    </div>
+                </div>
             </div>
         </div>
     </div>
 
-    <div class="row">
-        <div class="col-md-6 col-md-offset-1">
 
-            <div class="page-content">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-7">
+
                 <h1>{{$book->name}}</h1>
                 <p class="text-muted">{{$book->description}}</p>
 
@@ -51,7 +55,7 @@
                             @if(is_a($childElement, 'Oxbow\Chapter') && count($childElement->pages) > 0)
                                 <div class="inset-list">
                                     @foreach($childElement->pages as $page)
-                                        <h4><a href="{{$page->getUrl()}}"><i class="zmdi zmdi-file-text"></i> {{$page->name}}</a></h4>
+                                        <h4><a href="{{$page->getUrl()}}"><i class="zmdi zmdi-file-text"></i>{{$page->name}}</a></h4>
                                     @endforeach
                                 </div>
                             @endif
                     Last Updated {{$book->updated_at->diffForHumans()}} @if($book->createdBy) by {{$book->updatedBy->name}} @endif
                 </p>
 
-            </div>
 
-        </div>
+            </div>
 
-        <div class="col-md-3 col-md-offset-1">
-            <div class="margin-top large"><br></div>
-            <h3>Recent Activity</h3>
-            @include('partials/activity-list', ['activity' => Activity::entityActivity($book, 20, 0)])
+            <div class="col-md-4 col-md-offset-1">
+                <div class="margin-top large"><br></div>
+                <h3>Recent Activity</h3>
+                @include('partials/activity-list', ['activity' => Activity::entityActivity($book, 20, 0)])
+            </div>
         </div>
     </div>
 
 
+
     <script>
         $(function() {
 
index 13017b4cd51306c32e2ee22687a7df4c81929f15..746ac406f926fb538391175b14ccaf67fd687300 100644 (file)
@@ -2,9 +2,10 @@
 
 @section('content')
 
-    <div class="row">
-        <div class="col-md-6 col-md-offset-1">
-            <div class="page-content">
+
+    <div class="container">
+        <div class="row">
+            <div class="col-md-7">
                 <h2>Books</h2>
                 @foreach($books as $book)
                     <div class="book">
                     <hr>
                 @endforeach
             </div>
-        </div>
-        <div class="col-md-3 col-md-offset-1">
-            <div class="margin-top large">&nbsp;</div>
-            <h3>Recent Activity</h3>
-            @include('partials/activity-list', ['activity' => $activity])
+            <div class="col-md-4 col-md-offset-1">
+                <div class="margin-top large">&nbsp;</div>
+                <h3>Recent Activity</h3>
+                @include('partials/activity-list', ['activity' => $activity])
+            </div>
         </div>
     </div>
 
+
 @stop
\ No newline at end of file
index 3757d6c04a9c789082b09937689c4a999ce3ce0f..93387384dbfa51e57c820e1d200c4fbccec45b8a 100644 (file)
@@ -2,32 +2,37 @@
 
 @section('content')
 
-    <div class="row faded-small">
-        <div class="col-md-6 faded">
-            <div class="breadcrumbs padded-horizontal">
-                <a href="{{$book->getUrl()}}"><i class="zmdi zmdi-book"></i>{{ $book->name }}</a>
-                @if($page->hasChapter())
-                    <span class="sep">&raquo;</span>
-                    <a href="{{ $page->chapter->getUrl() }}">
-                        <i class="zmdi zmdi-collection-bookmark"></i>
-                        {{$page->chapter->name}}
-                    </a>
-                @endif
-            </div>
-        </div>
-        <div class="col-md-6 faded">
-            <div class="action-buttons">
-                @if($currentUser->can('page-update'))
-                    <a href="{{$page->getUrl() . '/revisions'}}" class="text-primary"><i class="zmdi zmdi-replay"></i>Revisions</a>
-                    <a href="{{$page->getUrl() . '/edit'}}" class="text-primary" ><i class="zmdi zmdi-edit"></i>Edit</a>
-                @endif
-                @if($currentUser->can('page-delete'))
-                        <a href="{{$page->getUrl() . '/delete'}}" class="text-neg"><i class="zmdi zmdi-delete"></i>Delete</a>
-                @endif
+    <div class="faded-small">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6 faded">
+                    <div class="breadcrumbs">
+                        <a href="{{$book->getUrl()}}"><i class="zmdi zmdi-book"></i>{{ $book->name }}</a>
+                        @if($page->hasChapter())
+                            <span class="sep">&raquo;</span>
+                            <a href="{{ $page->chapter->getUrl() }}">
+                                <i class="zmdi zmdi-collection-bookmark"></i>
+                                {{$page->chapter->name}}
+                            </a>
+                        @endif
+                    </div>
+                </div>
+                <div class="col-md-6 faded">
+                    <div class="action-buttons">
+                        @if($currentUser->can('page-update'))
+                            <a href="{{$page->getUrl() . '/revisions'}}" class="text-primary"><i class="zmdi zmdi-replay"></i>Revisions</a>
+                            <a href="{{$page->getUrl() . '/edit'}}" class="text-primary" ><i class="zmdi zmdi-edit"></i>Edit</a>
+                        @endif
+                        @if($currentUser->can('page-delete'))
+                            <a href="{{$page->getUrl() . '/delete'}}" class="text-neg"><i class="zmdi zmdi-delete"></i>Delete</a>
+                        @endif
+                    </div>
+                </div>
             </div>
         </div>
     </div>
 
+
     <div class="side-nav faded">
         <h4>Page Navigation</h4>
         <ul class="page-nav-list">
index 3934a3c9c5b1d63907dca23ed320b8ba317923c4..2824089e427cfb7a8a0450a63733e616a72e2ed5 100644 (file)
@@ -1,6 +1,11 @@
-<div class="row">
-    <div class="col-md-6 col-md-offset-3 setting-nav">
-        <a href="/settings" @if($selected == 'settings') class="selected" @endif><i class="zmdi zmdi-settings"></i>Settings</a>
-        <a href="/users" @if($selected == 'users') class="selected" @endif><i class="zmdi zmdi-accounts"></i>Users</a>
+
+<div class="faded-small">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12 setting-nav">
+                <a href="/settings" @if($selected == 'settings') class="selected" @endif><i class="zmdi zmdi-settings"></i>Settings</a>
+                <a href="/users" @if($selected == 'users') class="selected" @endif><i class="zmdi zmdi-accounts"></i>Users</a>
+            </div>
+        </div>
     </div>
 </div>
\ No newline at end of file