Started design update

This commit is contained in:
Dan Brown 2017-08-19 18:32:24 +01:00
parent fba7ae923d
commit 295f520f21
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
10 changed files with 239 additions and 180 deletions

View File

@ -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;
}
}

View File

@ -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;

View File

@ -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 {

View File

@ -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;

View File

@ -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%;

View File

@ -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">

View File

@ -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">

View File

@ -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

View File

@ -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>

View 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