mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-05-29 09:21:20 +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;
|
||||
.links a {
|
||||
display: inline-block;
|
||||
padding: $-l;
|
||||
color: #FFF;
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
.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;
|
||||
font-size: 1.8em;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
padding: $-l $-l $-l 0;
|
||||
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;
|
||||
}
|
||||
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 }}">
|
||||
</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>
|
||||
</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,9 +2,10 @@
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="row faded-small">
|
||||
<div class="col-md-6"></div>
|
||||
<div class="col-md-6">
|
||||
<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>
|
||||
@ -22,11 +23,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-md-offset-1">
|
||||
<div class="col-md-7">
|
||||
|
||||
<div class="page-content">
|
||||
<h1>{{$book->name}}</h1>
|
||||
<p class="text-muted">{{$book->description}}</p>
|
||||
|
||||
@ -66,16 +70,17 @@
|
||||
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="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>
|
||||
|
||||
@ -2,9 +2,10 @@
|
||||
|
||||
@section('content')
|
||||
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-md-offset-1">
|
||||
<div class="page-content">
|
||||
<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="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,9 +2,11 @@
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="row faded-small">
|
||||
<div class="faded-small">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 faded">
|
||||
<div class="breadcrumbs padded-horizontal">
|
||||
<div class="breadcrumbs">
|
||||
<a href="{{$book->getUrl()}}"><i class="zmdi zmdi-book"></i>{{ $book->name }}</a>
|
||||
@if($page->hasChapter())
|
||||
<span class="sep">»</span>
|
||||
@ -27,6 +29,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="side-nav faded">
|
||||
<h4>Page Navigation</h4>
|
||||
|
||||
@ -1,6 +1,11 @@
|
||||
|
||||
<div class="faded-small">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-md-offset-3 setting-nav">
|
||||
<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