Зуев Егор / 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 @@
}
// 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 {
.logo {
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;
}
}
}
\ No newline at end of file
......
......@@ -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>
......@@ -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,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">&nbsp;</div>
<h3>Recent Activity</h3>
@include('partials/activity-list', ['activity' => $activity])
</div>
</div>
</div>
@stop
\ No newline at end of file
......
......@@ -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">&raquo;</span>
......@@ -27,6 +29,9 @@
</div>
</div>
</div>
</div>
</div>
<div class="side-nav faded">
<h4>Page Navigation</h4>
......
<div class="row">
<div class="col-md-6 col-md-offset-3 setting-nav">
<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
......