mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-05-27 22:01:08 +03:00
Started another major redsign
This commit is contained in:
Dan Brown
parent
17f4aa4300
commit
505a22bc7b
@ -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);
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -28,7 +28,7 @@ h4 {
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-weight: 500;
|
||||
font-weight: 400;
|
||||
position: relative;
|
||||
display: block;
|
||||
color: #555;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
.search-box {
|
||||
padding-top: $-l *0.8;
|
||||
}
|
||||
.avatar, .user-name {
|
||||
display: inline-block;
|
||||
}
|
||||
.avatar {
|
||||
margin-top: $-l*0.8;
|
||||
}
|
||||
.user-name {
|
||||
vertical-align: top;
|
||||
padding-top: $-l*1.1;
|
||||
padding-left: $-m;
|
||||
}
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
i {
|
||||
padding-right: $-s;
|
||||
}
|
||||
}
|
||||
|
||||
.user-overview {
|
||||
margin-top: $-m;
|
||||
.user-name {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding: $-m $-s;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -49,38 +49,40 @@
|
||||
</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')
|
||||
|
||||
@ -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
|
||||
@ -66,18 +70,19 @@
|
||||
Last Updated {{$book->updated_at->diffForHumans()}} @if($book->createdBy) by {{$book->updatedBy->name}} @endif
|
||||
</p>
|
||||
|
||||
|
||||
</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() {
|
||||
|
||||
|
||||
@ -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">
|
||||
@ -14,12 +15,13 @@
|
||||
<hr>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-md-offset-1">
|
||||
<div class="margin-top large"> </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"> </div>
|
||||
<h3>Recent Activity</h3>
|
||||
@include('partials/activity-list', ['activity' => $activity])
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@stop
|
||||
@ -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">»</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">»</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">
|
||||
|
||||
@ -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>
|
||||
Loading…
x
Reference in New Issue
Block a user