mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 05:36:00 +00:00
Started design update
This commit is contained in:
parent
fba7ae923d
commit
295f520f21
@ -181,3 +181,21 @@
|
||||
content: '\f1f1';
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: $-m;
|
||||
background-color: #FFF;
|
||||
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2);
|
||||
h3 {
|
||||
padding: $-m;
|
||||
border-bottom: 1px solid #E8E8E8;
|
||||
margin: 0;
|
||||
font-size: $fs-s;
|
||||
color: #888;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.body {
|
||||
padding: $-m;
|
||||
}
|
||||
}
|
@ -392,7 +392,7 @@ span.CodeMirror-selectedtext { background: none; }
|
||||
}
|
||||
.cm-s-base16-light .CodeMirror-gutters { background: #f5f5f5; border-right: 1px solid #DDD; }
|
||||
|
||||
.flex-fill .CodeMirror {
|
||||
.code-fill .CodeMirror {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
@ -20,19 +20,46 @@ body.flexbox {
|
||||
align-items: stretch;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
.flex, &.flex {
|
||||
&.rows {
|
||||
flex-direction: row;
|
||||
}
|
||||
&.columns {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.flex {
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flex.scroll {
|
||||
//overflow-y: auto;
|
||||
display: flex;
|
||||
&.sidebar {
|
||||
margin-right: -14px;
|
||||
}
|
||||
}
|
||||
.flex.scroll .scroll-body {
|
||||
overflow-y: scroll;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flex-child > div {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
//body.ie .flex-child > div {
|
||||
// flex: 1 0 0px;
|
||||
//}
|
||||
.flex.sidebar {
|
||||
flex: 1;
|
||||
background-color: #F2F2F2;
|
||||
max-width: 360px;
|
||||
min-height: 90vh;
|
||||
}
|
||||
.flex.sidebar + .flex.content {
|
||||
flex: 3;
|
||||
background-color: #FFFFFF;
|
||||
border-left: 1px solid #DDD;
|
||||
}
|
||||
|
||||
/** Rules for all columns */
|
||||
div[class^="col-"] img {
|
||||
|
@ -86,24 +86,18 @@
|
||||
|
||||
// Sidebar list
|
||||
.book-tree {
|
||||
padding: $-xs 0 0 0;
|
||||
position: relative;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transition: ease-in-out 240ms;
|
||||
transition-property: right, border;
|
||||
border-left: 0px solid #FFF;
|
||||
background-color: #FFF;
|
||||
max-width: 320px;
|
||||
&.fixed {
|
||||
background-color: #FFF;
|
||||
z-index: 5;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
padding-left: $-l;
|
||||
padding-right: $-l + 15;
|
||||
padding-right: $-l + 5px;
|
||||
width: 30%;
|
||||
right: -15px;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
-ms-overflow-style: none;
|
||||
|
@ -1,12 +1,3 @@
|
||||
#page-show {
|
||||
>.row .col-md-9 {
|
||||
z-index: 2;
|
||||
}
|
||||
>.row .col-md-3 {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.page-editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -36,6 +27,8 @@
|
||||
|
||||
.page-content {
|
||||
max-width: 840px;
|
||||
margin: 0 auto;
|
||||
margin-top: $-xxl;
|
||||
overflow-wrap: break-word;
|
||||
.align-left {
|
||||
text-align: left;
|
||||
@ -252,8 +245,6 @@
|
||||
}
|
||||
|
||||
.tag-display {
|
||||
width: 100%;
|
||||
//opacity: 0.7;
|
||||
position: relative;
|
||||
table {
|
||||
width: 100%;
|
||||
|
@ -34,7 +34,7 @@
|
||||
@include('partials/notifications')
|
||||
|
||||
<header id="header">
|
||||
<div class="container">
|
||||
<div class="container fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-4" ng-non-bindable>
|
||||
<a href="{{ baseUrl('/') }}" class="logo">
|
||||
|
@ -74,7 +74,7 @@
|
||||
|
||||
{{--Markdown Editor--}}
|
||||
@if(setting('app-editor') === 'markdown')
|
||||
<div id="markdown-editor" markdown-editor class="flex-fill flex">
|
||||
<div id="markdown-editor" markdown-editor class="flex-fill flex code-fill">
|
||||
|
||||
<div class="markdown-editor-wrap">
|
||||
<div class="editor-toolbar">
|
||||
|
@ -1,10 +1,6 @@
|
||||
@extends('base')
|
||||
@extends('sidebar-layout')
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="faded-small toolbar">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
@section('toolbar')
|
||||
<div class="col-sm-8 col-xs-5 faded">
|
||||
@include('pages._breadcrumbs', ['page' => $page])
|
||||
</div>
|
||||
@ -41,36 +37,9 @@
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@stop
|
||||
|
||||
|
||||
<div class="container" id="page-show">
|
||||
<div class="row">
|
||||
<div class="col-md-9 print-full-width">
|
||||
<div class="page-content" ng-non-bindable>
|
||||
|
||||
<div class="pointer-container" id="pointer">
|
||||
<div class="pointer anim" >
|
||||
<span class="icon text-primary"><i class="zmdi zmdi-link"></i></span>
|
||||
<input readonly="readonly" type="text" id="pointer-url" placeholder="url">
|
||||
<button class="button icon" data-clipboard-target="#pointer-url" type="button" title="{{ trans('entities.pages_copy_link') }}"><i class="zmdi zmdi-copy"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@include('pages/page-display')
|
||||
|
||||
<hr>
|
||||
|
||||
@include('partials.entity-meta', ['entity' => $page])
|
||||
|
||||
</div>
|
||||
@include('comments/comments', ['pageId' => $page->id])
|
||||
</div>
|
||||
|
||||
<div class="col-md-3 print-hidden">
|
||||
<div class="margin-top large"></div>
|
||||
@section('sidebar')
|
||||
@if($book->restricted || ($page->chapter && $page->chapter->restricted) || $page->restricted)
|
||||
<div class="text-muted">
|
||||
|
||||
@ -103,12 +72,29 @@
|
||||
</div>
|
||||
@endif
|
||||
|
||||
|
||||
|
||||
@include('pages/sidebar-tree-list', ['book' => $book, 'sidebarTree' => $sidebarTree, 'pageNav' => $pageNav])
|
||||
@stop
|
||||
|
||||
@section('body')
|
||||
<div class="page-content" ng-non-bindable>
|
||||
|
||||
<div class="pointer-container" id="pointer">
|
||||
<div class="pointer anim" >
|
||||
<span class="icon text-primary"><i class="zmdi zmdi-link"></i></span>
|
||||
<input readonly="readonly" type="text" id="pointer-url" placeholder="url">
|
||||
<button class="button icon" data-clipboard-target="#pointer-url" type="button" title="{{ trans('entities.pages_copy_link') }}"><i class="zmdi zmdi-copy"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@include('pages/page-display')
|
||||
|
||||
<hr>
|
||||
|
||||
@include('partials.entity-meta', ['entity' => $page])
|
||||
|
||||
</div>
|
||||
<div class="container small">
|
||||
@include('comments/comments', ['pageId' => $page->id])
|
||||
</div>
|
||||
@stop
|
||||
|
||||
|
@ -2,8 +2,9 @@
|
||||
<div class="book-tree" ng-non-bindable>
|
||||
|
||||
@if(isset($page) && $page->tags->count() > 0)
|
||||
<div class="tag-display">
|
||||
<h6 class="text-muted">{{ trans('entities.page_tags') }}</h6>
|
||||
<div class="card tag-display">
|
||||
<h3><i class="zmdi zmdi-tag"></i> {{ trans('entities.page_tags') }}</h3>
|
||||
<div class="body">
|
||||
<table>
|
||||
<tbody>
|
||||
@foreach($page->tags as $tag)
|
||||
@ -15,19 +16,26 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if (isset($page) && $page->attachments->count() > 0)
|
||||
<h6 class="text-muted">{{ trans('entities.pages_attachments') }}</h6>
|
||||
<div class="card">
|
||||
<h3><i class="zmdi zmdi-attachment-alt"></i> {{ trans('entities.pages_attachments') }}</h3>
|
||||
<div class="body">
|
||||
@foreach($page->attachments as $attachment)
|
||||
<div class="attachment">
|
||||
<a href="{{ $attachment->getUrl() }}" @if($attachment->external) target="_blank" @endif><i class="zmdi zmdi-{{ $attachment->external ? 'open-in-new' : 'file' }}"></i>{{ $attachment->name }}</a>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if (isset($pageNav) && count($pageNav))
|
||||
<h6 class="text-muted">{{ trans('entities.pages_navigation') }}</h6>
|
||||
<div class="card">
|
||||
<h3><i class="zmdi zmdi-compass"></i> {{ trans('entities.pages_navigation') }}</h3>
|
||||
<div class="body">
|
||||
<div class="sidebar-page-nav menu">
|
||||
@foreach($pageNav as $navItem)
|
||||
<li class="page-nav-item h{{ $navItem['level'] }}">
|
||||
@ -35,9 +43,13 @@
|
||||
</li>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<h6 class="text-muted">{{ trans('entities.books_navigation') }}</h6>
|
||||
<div class="card">
|
||||
<h3><i class="zmdi zmdi-book"></i> {{ trans('entities.books_navigation') }}</h3>
|
||||
<div class="body">
|
||||
<ul class="sidebar-page-list menu">
|
||||
|
||||
@if (userCan('view', $book))
|
||||
@ -68,7 +80,8 @@
|
||||
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
30
resources/views/sidebar-layout.blade.php
Normal file
30
resources/views/sidebar-layout.blade.php
Normal file
@ -0,0 +1,30 @@
|
||||
@extends('base')
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="faded-small toolbar">
|
||||
<div class="container fluid">
|
||||
<div class="row">
|
||||
@yield('toolbar')
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex-fill flex">
|
||||
|
||||
<div class="sidebar flex print-hidden">
|
||||
<div class="scroll-body">
|
||||
@yield('sidebar')
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content flex">
|
||||
<div class="scroll-body">
|
||||
@yield('body')
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@stop
|
Loading…
Reference in New Issue
Block a user