Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-24 07:39:43 +02:00
Code Releases Activity

Improve document sidebar flexbox CSS

Browse source 
Maximum widths to control table of contents wrapping.
This commit is contained in:
McMatts 2018-05-31 17:03:59 +01:00
parent 25fd13bd3f
commit 983b84235c
4 changed files with 80 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

4
gui/app/pods/document/index/template.hbs
View file

@ -12,6 +12,7 @@
{{/layout/top-bar}}
{{#layout/middle-zone}}
{{#layout/middle-zone-content}}
{{toolbar/for-document
@ -67,6 +68,7 @@
{{/layout/middle-zone-content}}
{{#layout/middle-zone-sidebar}}
{{document/document-toc
document=document
folder=folder
@ -79,7 +81,9 @@
onShowPage=(action 'onShowPage')
onPageSequenceChange=(action 'onPageSequenceChange')
onPageLevelChange=(action 'onPageLevelChange')}}
{{/layout/middle-zone-sidebar}}
{{/layout/middle-zone}}
{{#layout/bottom-bar}}

5
gui/app/styles/layout/layout-master.scss
View file

@ -40,6 +40,7 @@ footer {
.layout-sidebar {
flex: 0 0 200px;
width: 200px;
height: calc(100vh - 140px);
@include sticky();
top: 2rem;
@ -59,6 +60,7 @@ footer {
.layout-sidebar {
flex: 0 0 300px;
width: 300px;
}
.layout-content {
@ -75,6 +77,7 @@ footer {
.layout-sidebar {
flex: 0 0 400px;
width: 400px;
}
.layout-content {
@ -91,6 +94,7 @@ footer {
.layout-sidebar {
flex: 0 0 450px;
width: 450px;
}
.layout-content {
@ -107,6 +111,7 @@ footer {
.layout-sidebar {
flex: 0 0 500px;
width: 500px;
}
.layout-content {

22
gui/app/styles/layout/layout-sidebar.scss
View file

@ -34,3 +34,25 @@
margin: 20px 20px;
}
}
.sidebar-view-switcher {
color: $color-primary;
background-color: $color-primary-light;
padding: 5px 20px;
text-align: center;
height: 50px;
> i {
font-size: 2rem;
cursor: pointer;
@include ease-in();
&:hover {
color: $color-link;
}
}
> .divider {
margin: 0 10px;
}
}

94
gui/app/templates/components/document/document-toc.hbs
View file

@ -1,47 +1,51 @@
{{#unless emptyState}}
<div id="sidebar" class="sidebar-white document-sidebar">
<div id="doc-toc" class="document-toc {{if isDesktop 'document-toc-desktop'}}">
<div class="header">
{{#if canEdit}}
<div id="tocToolbar" class="toc-controls {{if state.actionablePage 'current-page'}}">
<div id="toc-up-button" class="button-icon-green button-icon-small {{if state.upDisabled 'disabled'}}" {{action 'pageUp'}}>
<i class="material-icons">arrow_upward</i>
</div>
<div class="button-icon-gap" />
<div id="toc-down-button" class="button-icon-green button-icon-small {{if state.downDisabled 'disabled'}}" {{action 'pageDown'}}>
<i class="material-icons">arrow_downward</i>
</div>
<div class="button-icon-gap" />
<div id="toc-outdent-button" class="button-icon-green button-icon-small {{if state.outdentDisabled 'disabled'}}" {{action 'pageOutdent'}}>
<i class="material-icons">arrow_back</i>
</div>
<div class="button-icon-gap" />
<div id="toc-indent-button" class="button-icon-green button-icon-small {{if state.indentDisabled 'disabled'}}" {{action 'pageIndent'}}>
<i class="material-icons">arrow_forward</i>
</div>
</div>
{{/if}}
</div>
<div id="sidebar" class="sidebar-white document-sidebar">
<ul class="index-list">
{{#each pages key="id" as |item index|}}
<li class="item">
<a id="index-{{item.page.id}}" {{action 'onGotoPage' item.page.id}}
class="link toc-index-item {{item.page.tocIndentCss}} {{if (eq item.page.id state.pageId) 'selected'}}">
<span class="numbering">{{item.page.numbering}}</span>
{{#if (or item.userHasChangePending userHasNewPagePending)}}
<span class="color-red" title="Pending approval" data-toggle="tooltip" data-placement="top">[*]&nbsp;</span>
{{/if}}
{{#if (or permissions.documentApprove roles.documentApprove)}}
{{#if item.changeAwaitingReview}}
<span class="color-green" title="Awaiting approval" data-toggle="tooltip" data-placement="top">[*]&nbsp;</span>
{{/if}}
{{/if}}
{{item.page.title}}
</a>
</li>
{{/each}}
</ul>
</div>
<div class="sidebar-view-switcher d-flex align-items-center justify-content-center">
<i class="material-icons">reorder</i>
</div>
{{/unless}}
<div id="doc-toc" class="document-toc {{if isDesktop 'document-toc-desktop'}}">
<div class="header">
{{#if canEdit}}
<div id="tocToolbar" class="toc-controls {{if state.actionablePage 'current-page'}}">
<div id="toc-up-button" class="button-icon-green button-icon-small {{if state.upDisabled 'disabled'}}" {{action 'pageUp'}}>
<i class="material-icons">arrow_upward</i>
</div>
<div class="button-icon-gap" />
<div id="toc-down-button" class="button-icon-green button-icon-small {{if state.downDisabled 'disabled'}}" {{action 'pageDown'}}>
<i class="material-icons">arrow_downward</i>
</div>
<div class="button-icon-gap" />
<div id="toc-outdent-button" class="button-icon-green button-icon-small {{if state.outdentDisabled 'disabled'}}" {{action 'pageOutdent'}}>
<i class="material-icons">arrow_back</i>
</div>
<div class="button-icon-gap" />
<div id="toc-indent-button" class="button-icon-green button-icon-small {{if state.indentDisabled 'disabled'}}" {{action 'pageIndent'}}>
<i class="material-icons">arrow_forward</i>
</div>
</div>
{{/if}}
</div>
<ul class="index-list">
{{#each pages key="id" as |item index|}}
<li class="item">
<a id="index-{{item.page.id}}" {{action 'onGotoPage' item.page.id}}
class="link toc-index-item {{item.page.tocIndentCss}} {{if (eq item.page.id state.pageId) 'selected'}}"
title={{item.page.title}}>
<span class="numbering">{{item.page.numbering}}</span>
{{#if (or item.userHasChangePending userHasNewPagePending)}}
<span class="color-red" title="Pending approval" data-toggle="tooltip" data-placement="top">[*]&nbsp;</span>
{{/if}}
{{#if (or permissions.documentApprove roles.documentApprove)}}
{{#if item.changeAwaitingReview}}
<span class="color-green" title="Awaiting approval" data-toggle="tooltip" data-placement="top">[*]&nbsp;</span>
{{/if}}
{{/if}}
{{item.page.title}}
</a>
</li>
{{/each}}
</ul>
</div>
</div>