WIP sticky doc toc with sticky toc toolbox

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

@@ -10,13 +10,11 @@
 // https://documize.com
 
 import { Promise as EmberPromise } from 'rsvp';
-
 import { inject as service } from '@ember/service';
 import Controller from '@ember/controller';
-import NotifierMixin from '../../../mixins/notifier';
 import TooltipMixin from '../../../mixins/tooltip';
 
-export default Controller.extend(NotifierMixin, TooltipMixin, {
+export default Controller.extend(TooltipMixin, {
 	documentService: service('document'),
 	templateService: service('template'),
 	sectionService: service('section'),
@@ -43,7 +41,6 @@ export default Controller.extend(NotifierMixin, TooltipMixin, {
 		onCopyPage(pageId, targetDocumentId) {
 			let documentId = this.get('model.document.id');
 			this.get('documentService').copyPage(documentId, pageId, targetDocumentId).then(() => {
-				this.showNotification("Copied");
 
 				// refresh data if copied to same document
 				if (documentId === targetDocumentId) {
@@ -61,7 +58,6 @@ export default Controller.extend(NotifierMixin, TooltipMixin, {
 			let documentId = this.get('model.document.id');
 
 			this.get('documentService').copyPage(documentId, pageId, targetDocumentId).then(() => {
-				this.showNotification("Moved");
 				this.send('onPageDeleted', { id: pageId, children: false });
 			});
 		},
@@ -165,7 +161,6 @@ export default Controller.extend(NotifierMixin, TooltipMixin, {
 		onDeleteBlock(blockId) {
 			return new EmberPromise((resolve) => {
 				this.get('sectionService').deleteBlock(blockId).then(() => {
-					this.send("showNotification", "Deleted");
 					resolve();
 				});
 			});
@@ -174,7 +169,6 @@ export default Controller.extend(NotifierMixin, TooltipMixin, {
 		onSavePageAsBlock(block) {
 			return new EmberPromise((resolve) => {
 				this.get('sectionService').addBlock(block).then(() => {
-					this.showNotification("Published");
 					resolve();
 				});
 			});
@@ -182,7 +176,6 @@ export default Controller.extend(NotifierMixin, TooltipMixin, {
 
 		onDocumentDelete() {
 			this.get('documentService').deleteDocument(this.get('model.document.id')).then(() => {
-				this.send("showNotification", "Deleted");
 				this.transitionToRoute('folder', this.get('model.folder.id'), this.get('model.folder.slug'));
 			});
 		},

gui/app/services/session.js

@@ -10,7 +10,6 @@
 // https://documize.com
 
 import { inject as service } from '@ember/service';
-
 import { computed } from '@ember/object';
 import SimpleAuthSession from 'ember-simple-auth/services/session';
 

gui/app/styles/app.scss

@@ -30,3 +30,12 @@
 @import "section/code.scss";
 @import "section/papertrail.scss";
 @import "section/wysiwyg.scss";
+
+// Bootstrap override that removes gutter space on smaller screens
+@media (max-width: 1200px) {
+    .container {
+        width: 100%;
+        max-width: none;
+    }
+}
+

gui/app/styles/base.scss

@@ -16,7 +16,7 @@ html {
 	height: 100%;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
-	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
+    -ms-overflow-style: -ms-autohiding-scrollbar;
 }
 
 body {

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

@@ -1,12 +1,19 @@
 .document-toc {
     @include border-radius(3px);
 	margin: 30px 0 30px 0;
-    padding: 20px 20px;
+    padding: 0 20px 20px 20px;
     background-color: $color-off-white;
-    // background-color: $color-primary-light;
     border: 1px solid $color-border;
     overflow: scroll;
 
+    > .header {
+        @include sticky();
+        flex-direction: column;
+        top: 0;
+        padding-top: 20px;
+        margin: 0;
+        background-color: $color-off-white;
+
         > .title {
             color: $color-gray;
             font-weight: bold;
@@ -16,7 +23,7 @@
         }
 
         > .toc-controls {
-        margin: 10px 0 0 0;
+            margin: 0 0 0 0;
             text-align: center;
             
             > .disabled {
@@ -27,6 +34,8 @@
                 }
             }
         }
+    }
+
 
     > .index-list {
         padding: 0;
@@ -70,7 +79,7 @@
 .document-toc-desktop {
     display: inline-block;
     position: fixed;
-    left: 20px;
+    right: 30px;
     z-index: 777;    
 }
 

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

@@ -1,4 +1,5 @@
 <div id="doc-toc" class="document-toc {{if isDesktop 'document-toc-desktop' 'document-toc-small'}}">
+    <div class="header">
         <div class="title">Table of contents</div>
         {{#if session.authenticated}}
             {{#if permissions.documentEdit}}
@@ -23,6 +24,7 @@
                 {{/unless}}
             {{/if}}
         {{/if}}
+    </div>
 
     <ul class="index-list">
         {{#each pages key="id" as |page index|}}

gui/app/templates/components/document/page-heading.hbs

@@ -1,4 +1,4 @@
-<div class="row no-gutters">
+<div class="row no-gutters align-items-center">
 
 	<div class="col-10">
 		<div class="document-structure">