Improve document sidebar flexbox CSS

Maximum widths to control table of contents wrapping.

gui/app/pods/document/index/template.hbs

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

gui/app/styles/layout/layout-master.scss

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

gui/app/styles/layout/layout-sidebar.scss

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

gui/app/templates/components/document/document-toc.hbs

@@ -1,47 +1,51 @@
-{{#unless emptyState}}
+<div id="sidebar" class="sidebar-white document-sidebar">
-	<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>
 
-			<ul class="index-list">
+	<div class="sidebar-view-switcher d-flex align-items-center justify-content-center">
-				{{#each pages key="id" as |item index|}}
+		<i class="material-icons">reorder</i>
-					<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>
-{{/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>