WIP document TOC for widescreen displays

gui/app/components/document/document-toc.js

@@ -29,6 +29,7 @@ export default Component.extend(NotifierMixin, {
 	emptyState: computed('pages', function () {
 		return this.get('pages.length') === 0;
 	}),
+	isDesktop: true,
 
 	didReceiveAttrs() {
 		this._super(...arguments);
@@ -43,21 +44,45 @@ export default Component.extend(NotifierMixin, {
 	didInsertElement() {
 		this._super(...arguments);
 
+		this.setSize();
+
 		this.eventBus.subscribe('documentPageAdded', this, 'onDocumentPageAdded');
+		this.eventBus.subscribe('resized', this, 'onResize');
 	},
 
 	willDestroyElement() {
 		this._super(...arguments);
 
 		this.eventBus.unsubscribe('documentPageAdded');
+		this.eventBus.unsubscribe('resized');
 	},
 
 	onDocumentPageAdded(pageId) {
 		this.send('onEntryClick', pageId);
+		this.setSize();
 	},
 
-	// Controls what user can do with the toc (left sidebar).
+	onResize() {
-	// Identifies the target pages.
+		this.setSize();
+	},
+
+	setSize() {
+		this.set('isDesktop', $(window).width() >= 1800);
+
+		let h = $(window).height() - $("#nav-bar").height() - 140;
+		$("#doc-toc").css('max-height', h);
+
+		let i = $("#doc-view").offset();
+
+		if (is.not.undefined(i)) {
+			let l = i.left - 100;
+			if (l > 350) l = 350;
+			$("#doc-toc").width(l);
+		}
+	},
+
+	// Controls what user can do with the toc (left sidebar)
+	// Identifies the target pages
 	setState(pageId) {
 		this.set('currentPageId', pageId);
 
@@ -74,7 +99,7 @@ export default Component.extend(NotifierMixin, {
 	},
 
 	actions: {
-		// Page up - above pages shunt down.
+		// Page up -- above pages shunt down
 		pageUp() {
 			if (this.get('state.upDisabled')) {
 				return;
@@ -93,7 +118,7 @@ export default Component.extend(NotifierMixin, {
 			}
 		},
 
-		// Move down -- pages below shift up.
+		// Move down -- pages below shift up
 		pageDown() {
 			if (this.get('state.downDisabled')) {
 				return;
@@ -112,7 +137,7 @@ export default Component.extend(NotifierMixin, {
 			}
 		},
 
-		// Indent - changes a page from H2 to H3, etc.
+		// Indent -- changes a page from H2 to H3, etc.
 		pageIndent() {
 			if (this.get('state.indentDisabled')) {
 				return;
@@ -131,7 +156,7 @@ export default Component.extend(NotifierMixin, {
 			}
 		},
 
-		// Outdent - changes a page from H3 to H2, etc.
+		// Outdent -- changes a page from H3 to H2, etc.
 		pageOutdent() {
 			if (this.get('state.outdentDisabled')) {
 				return;
@@ -156,3 +181,44 @@ export default Component.extend(NotifierMixin, {
 		}
 	}
 });
+
+/*
+	Specs
+	-----
+
+	1. Must max max height to prevent off screen problems
+	2. Must be usable on mobile and desktop
+	3. Must be sticky and always visible (at least desktop)
+	4. Must set width or leave to grid system
+
+	Solution
+	--------
+
+	1. max-height calc on insert/repaint
+	1. overflow: scroll
+
+	2. on mobile/sm/md/lg we can put in little box to side of doc meta
+	   and then set to fixed height based on screen size
+	2. on xl we can put into sidebar
+
+	3. sticky on xl desktop is fine as sidebar uses fixed position
+	   and content has max-height with overflow
+	3. sticky on col/sm/md/lg is not available
+
+	Notes
+	-----
+
+	We could go with container-fluid and use full width of screen.
+	This would work on all devices and take more space on 
+
+	$(window).width() needs to be 1800 or more for sticky sidebar...
+	$("#nav-bar").height()
+	$(window).height() - $("#nav-bar").height() - 100
+
+	Two choices:
+
+	if width >= 1800 then sidebar sticky outside container
+	if widht < 1800 then switch to container-fluid?
+		...but what about height?
+		...put next to doc--meta
+*/

gui/app/pods/document/index/route.js

@@ -10,7 +10,6 @@
 // https://documize.com
 
 import { hash } from 'rsvp';
-
 import { inject as service } from '@ember/service';
 import Route from '@ember/routing/route';
 import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';

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

@@ -1,17 +1,13 @@
 {{toolbar/nav-bar}}
 
-<div class="container-fluid">
+<div class="d-none d-xl-block">
+	{{document/document-toc document=model.document folder=model.folder pages=model.pages page=model.page permissions=model.permissions
+		onPageSequenceChange=(action 'onPageSequenceChange') onPageLevelChange=(action 'onPageLevelChange') onGotoPage=(action 'onGotoPage')}}
+</div>
 
+<div id="doc-view" class="container">
 	<div class="row">
-
+		<div class="col-12">
-		<div class="col-12 col-md-4">
-
-			{{document/document-toc document=model.document folder=model.folder pages=model.pages page=model.page permissions=model.permissions
-				onPageSequenceChange=(action 'onPageSequenceChange') onPageLevelChange=(action 'onPageLevelChange') onGotoPage=(action 'onGotoPage')}}
-
-		</div>
-
-		<div class="col-12 col-md-8">
 
 			{{toolbar/for-document document=model.document spaces=model.folders space=model.folder permissions=model.permissions
 				onDocumentDelete=(action 'onDocumentDelete') onSaveTemplate=(action 'onSaveTemplate')}}
@@ -22,12 +18,14 @@
 			{{document/document-meta document=model.document folder=model.folder folders=model.folders permissions=model.permissions
 				onSaveDocument=(action 'onSaveDocument')}}
 
-			<ul class="tabnav-control">
+			<div class="mb-5 text-center">
-				<li class="tab {{if (eq tab 'content') 'selected'}}" {{action 'onTabChange' 'content'}}>Content</li>
+				<ul class="tabnav-control">
-				<li class="tab {{if (eq tab 'attachment') 'selected'}}" {{action 'onTabChange' 'attachment'}}>Attachments</li>
+					<li class="tab {{if (eq tab 'content') 'selected'}}" {{action 'onTabChange' 'content'}}>Content</li>
-				<li class="tab {{if (eq tab 'activity') 'selected'}}" {{action 'onTabChange' 'activity'}}>Activity</li>
+					<li class="tab {{if (eq tab 'attachment') 'selected'}}" {{action 'onTabChange' 'attachment'}}>Attachments</li>
-				<li class="tab {{if (eq tab 'revision') 'selected'}}" {{action 'onTabChange' 'revision'}}>Revisions</li>
+					<li class="tab {{if (eq tab 'activity') 'selected'}}" {{action 'onTabChange' 'activity'}}>Activity</li>
-			</ul>
+					<li class="tab {{if (eq tab 'revision') 'selected'}}" {{action 'onTabChange' 'revision'}}>Revisions</li>
+				</ul>
+			</div>
 
 			{{#if (eq tab 'content')}}
 				{{document/view-content

gui/app/styles/view/document/doc-structure.scss

@@ -5,7 +5,7 @@
 		margin: 0 0 0.7rem 0;
 
 		> .page-number {
-			color: $color-dark;
+			color: $color-gray;
 			background-color: $color-gray-light2;
 			padding: 0.2rem 1rem;
 			font-size: 1.8rem;

gui/app/styles/view/document/doc-toc.scss

@@ -1,24 +1,22 @@
 .document-toc {
     @include border-radius(3px);
-	margin: 20px 0;
+	margin: 30px 0 30px 0;
-    padding: 10px 20px;
+    padding: 20px 20px;
     background-color: $color-off-white;
+    // background-color: $color-primary-light;
     border: 1px solid $color-border;
-    display: inline-block;
+    overflow: scroll;
-    position: fixed;
-    left: 20px;
-    z-index: 777;
 
     > .title {
-        color: $color-off-black;
+        color: $color-gray;
         font-weight: bold;
-        font-size: 1rem;
+        font-size: 1.1rem;
-        margin-bottom: 10px;
+        margin-bottom: 20px;
         text-align: center;
     }
 
     > .toc-controls {
-        margin: 0;
+        margin: 10px 0 0 0;
         text-align: center;
         
         > .disabled {
@@ -36,7 +34,7 @@
         font-size: 0.9rem;
         overflow-x: hidden;
         list-style-type: none;
-        margin: 20px 0 0;
+        margin: 0 0 0 0;
 
         .item {
             @extend .no-select;
@@ -53,15 +51,29 @@
                 &:hover {
                     color: $color-link;
                 }
+
+                > .numbering {
+                    color: $color-gray;
+                    font-weight: bold;
+                    display: inline-block;
+                    margin-right: 10px;
+                }
             }
 
             > .selected {
                 color: $color-link;
-                // font-weight: bold;
             }
         }
     }
 }
 
+.document-toc-desktop {
+    display: inline-block;
+    position: fixed;
+    left: 20px;
+    z-index: 777;    
+}
 
-
+.document-toc-small {
+    display: block;
+}

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

@@ -1,9 +1,9 @@
-<div class="document-toc">
+<div id="doc-toc" class="document-toc {{if isDesktop 'document-toc-desktop' 'document-toc-small'}}">
     <div class="title">Table of contents</div>
     {{#if session.authenticated}}
 		{{#if permissions.documentEdit}}
             {{#unless emptyState}}
-                <div id="tocToolbar" class="hidden-xs hidden-sm toc-controls {{if state.actionablePage 'current-page' ''}}">
+                <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>
@@ -28,7 +28,7 @@
         {{#each pages key="id" as |page index|}}
             <li class="item">
                 <a id="index-{{page.id}}" {{action 'onEntryClick' page.id}} class="link toc-index-item {{page.tocIndentCss}} {{if (eq page.id currentPageId) 'selected'}}">
-                    {{page.numbering}}. {{page.title}}
+                    <span class="numbering">{{page.numbering}}</span>{{page.title}}
                 </a>
             </li>
         {{/each}}