mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 05:36:00 +00:00
Started another major redsign
This commit is contained in:
parent
17f4aa4300
commit
505a22bc7b
@ -14,7 +14,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Button Specific Variables
|
// Button Specific Variables
|
||||||
$button-border-radius: 3px;
|
$button-border-radius: 2px;
|
||||||
|
|
||||||
.button-base {
|
.button-base {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
@ -24,11 +24,14 @@ $button-border-radius: 3px;
|
|||||||
margin: $-xs $-xs $-xs 0;
|
margin: $-xs $-xs $-xs 0;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border: none;
|
border: none;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: $text;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
border-radius: $button-border-radius;
|
border-radius: $button-border-radius;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all ease-in-out 80ms;
|
transition: all ease-in-out 120ms;
|
||||||
box-shadow: 0 0 0 0 #000;
|
text-transform: uppercase;
|
||||||
|
box-shadow: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.21);
|
||||||
@include generate-button-colors(#EEE, $primary);
|
@include generate-button-colors(#EEE, $primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -7,8 +7,8 @@ html {
|
|||||||
body {
|
body {
|
||||||
font-family: $text;
|
font-family: $text;
|
||||||
font-size: $fs-m;
|
font-size: $fs-m;
|
||||||
line-height: 1.4em;
|
line-height: 1.6;
|
||||||
color: #444;
|
color: #616161;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -28,7 +28,7 @@ h4 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4 {
|
h1, h2, h3, h4 {
|
||||||
font-weight: 500;
|
font-weight: 400;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
color: #555;
|
color: #555;
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
///////////////
|
///////////////
|
||||||
|
|
||||||
// Sizes
|
// Sizes
|
||||||
$max-width: 1100px;
|
$max-width: 1400px;
|
||||||
|
|
||||||
// Screen breakpoints
|
// Screen breakpoints
|
||||||
$xl: 1100px;
|
$xl: 1100px;
|
||||||
@ -26,14 +26,15 @@ $-xxs: 3px;
|
|||||||
// Fonts
|
// Fonts
|
||||||
$heading: 'Roboto', Helvetica, Arial, sans-serif;
|
$heading: 'Roboto', Helvetica, Arial, sans-serif;
|
||||||
$text: 'Roboto', Helvetica, Arial, sans-serif;
|
$text: 'Roboto', Helvetica, Arial, sans-serif;
|
||||||
$fs-m: 16px;
|
$fs-m: 15px;
|
||||||
$fs-s: 14px;
|
$fs-s: 14px;
|
||||||
|
|
||||||
// Colours
|
// Colours
|
||||||
$primary: #1c77c1;
|
$primary: #0288D1;
|
||||||
|
$primary-dark: #0288D1;
|
||||||
$secondary: #e27b41;
|
$secondary: #e27b41;
|
||||||
$positive: #409945;
|
$positive: #52A256;
|
||||||
$negative: #D35252;
|
$negative: #D32F2F;
|
||||||
|
|
||||||
// Text colours
|
// Text colours
|
||||||
$text-dark: #444;
|
$text-dark: #444;
|
||||||
|
@ -16,83 +16,51 @@ header {
|
|||||||
display: block;
|
display: block;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
background-color: $primary-dark;
|
||||||
|
color: #fff;
|
||||||
.padded {
|
.padded {
|
||||||
padding: $-m;
|
padding: $-m;
|
||||||
}
|
}
|
||||||
|
border-bottom: 1px solid #DDD;
|
||||||
//margin-bottom: $-l;
|
//margin-bottom: $-l;
|
||||||
}
|
.links a {
|
||||||
|
display: inline-block;
|
||||||
#sidebar {
|
padding: $-l;
|
||||||
position: fixed;
|
color: #FFF;
|
||||||
background-color: #444;
|
&:last-child {
|
||||||
color: #EEE;
|
padding-right: 0;
|
||||||
height: 100%;
|
}
|
||||||
top: 0;
|
}
|
||||||
z-index: 1;
|
.search-box {
|
||||||
//padding-top: $-m;
|
padding-top: $-l *0.8;
|
||||||
width: 340px;
|
}
|
||||||
border-right: 1px solid #DDD;
|
.avatar, .user-name {
|
||||||
h4, li, p, a {
|
display: inline-block;
|
||||||
color: #CCC;
|
}
|
||||||
|
.avatar {
|
||||||
|
margin-top: $-l*0.8;
|
||||||
|
}
|
||||||
|
.user-name {
|
||||||
|
vertical-align: top;
|
||||||
|
padding-top: $-l*1.1;
|
||||||
|
padding-left: $-m;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#content {
|
#content {
|
||||||
//margin-top: 63px;
|
|
||||||
margin-left: 340px;
|
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
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;
|
|
||||||
}
|
|
||||||
i {
|
|
||||||
padding-right: $-s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-overview {
|
|
||||||
margin-top: $-m;
|
|
||||||
.user-name {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: top;
|
|
||||||
padding: $-m $-s;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.search-box {
|
.logo {
|
||||||
input {
|
display: inline-block;
|
||||||
width: 100%;
|
font-size: 1.8em;
|
||||||
border-radius: 0;
|
color: #fff;
|
||||||
padding: $-m;
|
font-weight: 400;
|
||||||
background-color: rgba(0, 0, 0, 0.1);
|
padding: $-l $-l $-l 0;
|
||||||
border: none;
|
vertical-align: top;
|
||||||
border-top: 1px solid #333;
|
line-height: 1;
|
||||||
border-bottom: 1px solid #333;
|
|
||||||
color: #EEE;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
.col-md-4 {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
padding: $-m;
|
|
||||||
display: block;
|
|
||||||
border-bottom: 1px solid #3A3939;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-title input {
|
.page-title input {
|
||||||
@ -259,10 +227,11 @@ h1, h2, h3, h4, h5, h6 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.faded-small {
|
.faded-small {
|
||||||
color: #666;
|
color: #000;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
|
background-color: rgba(21, 101, 192, 0.15);
|
||||||
a, span {
|
a, span {
|
||||||
color: #666;
|
color: #000;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -271,6 +240,9 @@ h1, h2, h3, h4, h5, h6 {
|
|||||||
a {
|
a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: $-s;
|
padding: $-s;
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -488,16 +460,14 @@ body.dragging, body.dragging * {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.setting-nav {
|
.setting-nav {
|
||||||
margin-top: $-l;
|
text-align: center;
|
||||||
border-top: 1px solid #DDD;
|
|
||||||
border-bottom: 1px solid #DDD;
|
|
||||||
a {
|
a {
|
||||||
padding: $-m;
|
padding: $-m;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
//color: #666;
|
//color: #666;
|
||||||
&.selected {
|
&.selected {
|
||||||
//color: $primary;
|
//color: $primary;
|
||||||
background-color: #f8f8f8;
|
border-bottom: 2px solid $primary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -49,38 +49,40 @@
|
|||||||
</div>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
<section id="sidebar">
|
<header id="header">
|
||||||
<div class="sidebar-bg"><div class="overlay"></div></div>
|
<div class="container">
|
||||||
<header>
|
<div class="row">
|
||||||
<div class="padded row clearfix">
|
<div class="col-md-4">
|
||||||
<div class="col-md-12 logo-container">
|
|
||||||
<a href="/" class="logo">{{ Setting::get('app-name', 'BookStack') }}</a>
|
<a href="/" class="logo">{{ Setting::get('app-name', 'BookStack') }}</a>
|
||||||
<div class="user-overview">
|
</div>
|
||||||
<img class="avatar" src="{{Auth::user()->getAvatar(50)}}" alt="{{ Auth::user()->name }}">
|
<div class="col-md-3">
|
||||||
<span class="user-name">
|
<div class="search-box text-center" style="display: none">
|
||||||
{{ Auth::user()->name }}
|
<form action="/pages/search/all" id="search-form" method="GET" style="display: none;">
|
||||||
</span>
|
<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>
|
</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>
|
||||||
<div class="row menu">
|
{{--@if(isset($book) && isset($current) && !isset($books))--}}
|
||||||
<div class="col-md-4"><a href="/books"><i class="zmdi zmdi-book"></i>Books</a></div>
|
{{--<div class="book-tree">--}}
|
||||||
<div class="col-md-4"><a href="/users"><i class="zmdi zmdi-accounts"></i>Users</a></div>
|
{{--@include('pages/sidebar-tree-list', ['book' => $book])--}}
|
||||||
<div class="col-md-4"><a href="/logout"><i class="zmdi zmdi-run zmdi-hc-flip-horizontal"></i>Logout</a></div>
|
{{--</div>--}}
|
||||||
</div>
|
{{--@endif--}}
|
||||||
@if(isset($book) && isset($current) && !isset($books))
|
|
||||||
<div class="book-tree">
|
|
||||||
@include('pages/sidebar-tree-list', ['book' => $book])
|
|
||||||
</div>
|
|
||||||
@endif
|
|
||||||
@yield('sidebar')
|
@yield('sidebar')
|
||||||
</section>
|
</header>
|
||||||
|
|
||||||
<section id="content">
|
<section id="content">
|
||||||
@yield('content')
|
@yield('content')
|
||||||
|
@ -2,31 +2,35 @@
|
|||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
|
|
||||||
<div class="row faded-small">
|
<div class="faded-small">
|
||||||
<div class="col-md-6"></div>
|
<div class="container">
|
||||||
<div class="col-md-6">
|
<div class="row">
|
||||||
<div class="action-buttons faded">
|
<div class="col-md-12">
|
||||||
@if($currentUser->can('page-create'))
|
<div class="action-buttons faded">
|
||||||
<a href="{{$book->getUrl() . '/page/create'}}" class="text-pos"><i class="zmdi zmdi-plus"></i> New Page</a>
|
@if($currentUser->can('page-create'))
|
||||||
@endif
|
<a href="{{$book->getUrl() . '/page/create'}}" class="text-pos"><i class="zmdi zmdi-plus"></i> New Page</a>
|
||||||
@if($currentUser->can('chapter-create'))
|
@endif
|
||||||
<a href="{{$book->getUrl() . '/chapter/create'}}" class="text-pos"><i class="zmdi zmdi-plus"></i> New Chapter</a>
|
@if($currentUser->can('chapter-create'))
|
||||||
@endif
|
<a href="{{$book->getUrl() . '/chapter/create'}}" class="text-pos"><i class="zmdi zmdi-plus"></i> New Chapter</a>
|
||||||
@if($currentUser->can('book-update'))
|
@endif
|
||||||
<a href="{{$book->getEditUrl()}}" class="text-primary"><i class="zmdi zmdi-edit"></i>Edit</a>
|
@if($currentUser->can('book-update'))
|
||||||
<a href="{{ $book->getUrl() }}/sort" class="text-primary"><i class="zmdi zmdi-sort"></i>Sort</a>
|
<a href="{{$book->getEditUrl()}}" class="text-primary"><i class="zmdi zmdi-edit"></i>Edit</a>
|
||||||
@endif
|
<a href="{{ $book->getUrl() }}/sort" class="text-primary"><i class="zmdi zmdi-sort"></i>Sort</a>
|
||||||
@if($currentUser->can('book-delete'))
|
@endif
|
||||||
<a href="{{ $book->getUrl() }}/delete" class="text-neg"><i class="zmdi zmdi-delete"></i>Delete</a>
|
@if($currentUser->can('book-delete'))
|
||||||
@endif
|
<a href="{{ $book->getUrl() }}/delete" class="text-neg"><i class="zmdi zmdi-delete"></i>Delete</a>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</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>
|
<h1>{{$book->name}}</h1>
|
||||||
<p class="text-muted">{{$book->description}}</p>
|
<p class="text-muted">{{$book->description}}</p>
|
||||||
|
|
||||||
@ -51,7 +55,7 @@
|
|||||||
@if(is_a($childElement, 'Oxbow\Chapter') && count($childElement->pages) > 0)
|
@if(is_a($childElement, 'Oxbow\Chapter') && count($childElement->pages) > 0)
|
||||||
<div class="inset-list">
|
<div class="inset-list">
|
||||||
@foreach($childElement->pages as $page)
|
@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
|
@endforeach
|
||||||
</div>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
@ -66,18 +70,19 @@
|
|||||||
Last Updated {{$book->updated_at->diffForHumans()}} @if($book->createdBy) by {{$book->updatedBy->name}} @endif
|
Last Updated {{$book->updated_at->diffForHumans()}} @if($book->createdBy) by {{$book->updatedBy->name}} @endif
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
<div class="col-md-4 col-md-offset-1">
|
||||||
|
<div class="margin-top large"><br></div>
|
||||||
<div class="col-md-3 col-md-offset-1">
|
<h3>Recent Activity</h3>
|
||||||
<div class="margin-top large"><br></div>
|
@include('partials/activity-list', ['activity' => Activity::entityActivity($book, 20, 0)])
|
||||||
<h3>Recent Activity</h3>
|
</div>
|
||||||
@include('partials/activity-list', ['activity' => Activity::entityActivity($book, 20, 0)])
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
$(function() {
|
$(function() {
|
||||||
|
|
||||||
|
@ -2,9 +2,10 @@
|
|||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-6 col-md-offset-1">
|
<div class="container">
|
||||||
<div class="page-content">
|
<div class="row">
|
||||||
|
<div class="col-md-7">
|
||||||
<h2>Books</h2>
|
<h2>Books</h2>
|
||||||
@foreach($books as $book)
|
@foreach($books as $book)
|
||||||
<div class="book">
|
<div class="book">
|
||||||
@ -14,12 +15,13 @@
|
|||||||
<hr>
|
<hr>
|
||||||
@endforeach
|
@endforeach
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="col-md-4 col-md-offset-1">
|
||||||
<div class="col-md-3 col-md-offset-1">
|
<div class="margin-top large"> </div>
|
||||||
<div class="margin-top large"> </div>
|
<h3>Recent Activity</h3>
|
||||||
<h3>Recent Activity</h3>
|
@include('partials/activity-list', ['activity' => $activity])
|
||||||
@include('partials/activity-list', ['activity' => $activity])
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
@stop
|
@stop
|
@ -2,32 +2,37 @@
|
|||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
|
|
||||||
<div class="row faded-small">
|
<div class="faded-small">
|
||||||
<div class="col-md-6 faded">
|
<div class="container">
|
||||||
<div class="breadcrumbs padded-horizontal">
|
<div class="row">
|
||||||
<a href="{{$book->getUrl()}}"><i class="zmdi zmdi-book"></i>{{ $book->name }}</a>
|
<div class="col-md-6 faded">
|
||||||
@if($page->hasChapter())
|
<div class="breadcrumbs">
|
||||||
<span class="sep">»</span>
|
<a href="{{$book->getUrl()}}"><i class="zmdi zmdi-book"></i>{{ $book->name }}</a>
|
||||||
<a href="{{ $page->chapter->getUrl() }}">
|
@if($page->hasChapter())
|
||||||
<i class="zmdi zmdi-collection-bookmark"></i>
|
<span class="sep">»</span>
|
||||||
{{$page->chapter->name}}
|
<a href="{{ $page->chapter->getUrl() }}">
|
||||||
</a>
|
<i class="zmdi zmdi-collection-bookmark"></i>
|
||||||
@endif
|
{{$page->chapter->name}}
|
||||||
</div>
|
</a>
|
||||||
</div>
|
@endif
|
||||||
<div class="col-md-6 faded">
|
</div>
|
||||||
<div class="action-buttons">
|
</div>
|
||||||
@if($currentUser->can('page-update'))
|
<div class="col-md-6 faded">
|
||||||
<a href="{{$page->getUrl() . '/revisions'}}" class="text-primary"><i class="zmdi zmdi-replay"></i>Revisions</a>
|
<div class="action-buttons">
|
||||||
<a href="{{$page->getUrl() . '/edit'}}" class="text-primary" ><i class="zmdi zmdi-edit"></i>Edit</a>
|
@if($currentUser->can('page-update'))
|
||||||
@endif
|
<a href="{{$page->getUrl() . '/revisions'}}" class="text-primary"><i class="zmdi zmdi-replay"></i>Revisions</a>
|
||||||
@if($currentUser->can('page-delete'))
|
<a href="{{$page->getUrl() . '/edit'}}" class="text-primary" ><i class="zmdi zmdi-edit"></i>Edit</a>
|
||||||
<a href="{{$page->getUrl() . '/delete'}}" class="text-neg"><i class="zmdi zmdi-delete"></i>Delete</a>
|
@endif
|
||||||
@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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="side-nav faded">
|
<div class="side-nav faded">
|
||||||
<h4>Page Navigation</h4>
|
<h4>Page Navigation</h4>
|
||||||
<ul class="page-nav-list">
|
<ul class="page-nav-list">
|
||||||
|
@ -1,6 +1,11 @@
|
|||||||
<div class="row">
|
|
||||||
<div class="col-md-6 col-md-offset-3 setting-nav">
|
<div class="faded-small">
|
||||||
<a href="/settings" @if($selected == 'settings') class="selected" @endif><i class="zmdi zmdi-settings"></i>Settings</a>
|
<div class="container">
|
||||||
<a href="/users" @if($selected == 'users') class="selected" @endif><i class="zmdi zmdi-accounts"></i>Users</a>
|
<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>
|
||||||
</div>
|
</div>
|
Loading…
Reference in New Issue
Block a user