Merge pull request #41 from documize/doc-toolbar-ux

Doc toolbar ux

.gitattributes

@@ -2,4 +2,11 @@
 * text=auto
 
 # These files are text and should be normalized (convert crlf > lf)
-*.hbs text
+*.hbs text eol=lf
+*.js text eol=lf
+*.html text eol=lf
+*.go text eol=lf
+*.sql text eol=lf
+*.scss text eol=lf
+*.js text eol=lf
+*.json text eol=lf

app/.editorconfig

@@ -10,8 +10,8 @@ end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
-indent_style = space
+indent_style = tab
-indent_size = 2
+indent_size = 4
 
 [*.hbs]
 insert_final_newline = false

app/.jshintrc

@@ -18,7 +18,8 @@
     "Drop",
 	"Dropzone",
 	"dragula",
-  "datetimepicker"
+  	"datetimepicker",
+	"Waypoint"
   ],
   "browser": true,
   "boss": true,

app/app/components/back-to-home.js

@@ -11,4 +11,5 @@
 
 import Ember from 'ember';
 
-export default Ember.Component.extend({});
+export default Ember.Component.extend({
+});

app/app/components/back-to-space.js

@@ -0,0 +1,15 @@
+// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
+//
+// This software (Documize Community Edition) is licensed under
+// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
+//
+// You can operate outside the AGPL restrictions by purchasing
+// Documize Enterprise Edition and obtaining a commercial license
+// by contacting <sales@documize.com>.
+//
+// https://documize.com
+
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+});

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

@@ -45,27 +45,29 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 
     didInsertElement() {
         this.eventBus.subscribe('documentPageAdded', this, 'onDocumentPageAdded');
-
+	},
-        var s = $(".document-structure");
-        var pos = s.position();
-
-        $(window).scroll(function() {
-            var windowpos = $(window).scrollTop();
-            if (windowpos - 200 >= pos.top) {
-                s.addClass("stick");
-                s.css('width', s.parent().width());
-            } else {
-                s.removeClass("stick");
-                s.css('width', 'auto');
-            }
-        });
-    },
 
     willDestroyElement() {
         this.eventBus.unsubscribe('documentPageAdded');
 		this.destroyTooltips();
     },
 
+	// positionToc() {
+	// 	let s = $(".document-structure");
+    //     let pos = s.position();
+	//
+	// 	$(window).scroll(_.throttle(function() {
+	// 		let windowpos = $(window).scrollTop();
+    //         if (windowpos - 200 >= pos.top) {
+    //             s.addClass("stuck-toc");
+    //             s.css('width', s.parent().width());
+    //         } else {
+    //             s.removeClass("stuck-toc");
+    //             s.css('width', 'auto');
+    //         }
+    //     }, 50));
+	// },
+
     onDocumentPageAdded(pageId) {
         this.send('onEntryClick', pageId);
     },

app/app/components/document/document-sidebar.js

@@ -11,23 +11,51 @@
 
 import Ember from 'ember';
 import TooltipMixin from '../../mixins/tooltip';
+import NotifierMixin from '../../mixins/notifier';
 
-export default Ember.Component.extend(TooltipMixin, {
+export default Ember.Component.extend(TooltipMixin, NotifierMixin, {
     documentService: Ember.inject.service('document'),
     document: {},
     folder: {},
 	showToc: true,
 	showViews: false,
 	showContributions: false,
+	showSections: false,
+	showScrollTool: false,
+	showingSections: false,
 
 	didRender() {
 		if (this.session.authenticated) {
             this.addTooltip(document.getElementById("owner-avatar"));
+			this.addTooltip(document.getElementById("section-tool"));
         }
 	},
 
-	willDestroyElements() {
+	didInsertElement() {
-		this.destroyElements();
+        this.eventBus.subscribe('resized', this, 'positionTool');
+		this.eventBus.subscribe('scrolled', this, 'positionTool');
+	},
+
+	willDestroyElement() {
+		this.destroyTooltips();
+	},
+
+	positionTool() {
+		if (this.get('isDestroyed') || this.get('isDestroying')) {
+			return;
+		}
+
+		let s = $(".scroll-tool");
+		let windowpos = $(window).scrollTop();
+
+		if (windowpos >= 300) {
+			this.set('showScrollTool', true);
+			s.addClass("stuck-tool");
+			s.css('left', parseInt($(".zone-sidebar").css('width')) - 18 + 'px');
+		} else {
+			this.set('showScrollTool', false);
+			s.removeClass("stuck-tool");
+		}
 	},
 
     actions: {
@@ -45,27 +73,55 @@ export default Ember.Component.extend(TooltipMixin, {
             return this.attrs.gotoPage(id);
         },
 
-		// close dialog
-        close() {
-            return true;
-        },
-
 		showToc() {
 			this.set('showToc', true);
 			this.set('showViews', false);
 			this.set('showContributions', false);
+			this.set('showSections', false);
+			this.set('showingSections', false);
 		},
 
 		showViews() {
 			this.set('showToc', false);
 			this.set('showViews', true);
 			this.set('showContributions', false);
+			this.set('showSections', false);
+			this.set('showingSections', false);
 		},
 
 		showContributions() {
 			this.set('showToc', false);
 			this.set('showViews', false);
 			this.set('showContributions', true);
+			this.set('showSections', false);
+			this.set('showingSections', false);
+		},
+
+		showSections() {
+			this.set('showToc', false);
+			this.set('showViews', false);
+			this.set('showContributions', false);
+			this.set('showSections', true);
+			this.set('showingSections', true);
+		},
+
+		onCancel() {
+			this.send('showToc');
+			this.set('showingSections', false);
+		},
+
+		onAddSection(section) {
+			this.attrs.onAddSection(section);
+
+			this.set('showingSections', false);
+		},
+
+		scrollTop() {
+			this.set('showScrollTool', false);
+
+			$("html,body").animate({
+				scrollTop: 0
+			}, 500, "linear");
 		}
     }
 });

app/app/components/document/document-toolbar.js

@@ -35,7 +35,6 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 			this.addTooltip(document.getElementById("save-template-button"));
 			this.addTooltip(document.getElementById("set-meta-button"));
 			this.addTooltip(document.getElementById("delete-document-button"));
-			this.addTooltip(document.getElementById("add-section-button"));
 		}
 
 		this.addTooltip(document.getElementById("print-document-button"));
@@ -139,4 +138,4 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 			return true;
 		},
 	}
-});
+});

app/app/components/document/document-view.js

@@ -133,4 +133,4 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 			this.get('documentService').save(doc);
 		}
 	}
-});
+});

app/app/components/document/page-wizard.js

@@ -13,9 +13,18 @@ import Ember from 'ember';
 import NotifierMixin from '../../mixins/notifier';
 
 export default Ember.Component.extend(NotifierMixin, {
+	sectionService: Ember.inject.service('section'),
+
+	didReceiveAttrs() {
+		let self = this;
+		this.get('sectionService').getAll().then(function(sections) {
+			self.set('sections', sections);
+		});
+	},
 
 	didRender() {
         let self = this;
+
         Mousetrap.bind('esc', function() {
             self.send('onCancel');
             return false;
@@ -28,12 +37,6 @@ export default Ember.Component.extend(NotifierMixin, {
 		},
 
         addSection(section) {
-
-            if (section.preview) {
-                this.showNotification("Coming soon!");
-                return;
-            }
-
             this.attrs.onAction(section);
         }
     }

app/app/components/folder/folder-toolbar.js

@@ -18,32 +18,24 @@ const {
 } = Ember;
 
 export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
+	folderService: Ember.inject.service('folder'),
     documentService: Ember.inject.service('document'),
-    templateService: Ember.inject.service('template'),
-    folderService: Ember.inject.service('folder'),
     session: Ember.inject.service(),
+	appMeta: Ember.inject.service(),
 
+	showToolbar: false,
     folder: {},
     busy: false,
     importedDocuments: [],
-    savedTemplates: [],
     isFolderOwner: computed.equal('folder.userId', 'session.user.id'),
     moveFolderId: "",
+	drop: null,
 
     didReceiveAttrs() {
         this.set('isFolderOwner', this.get('folder.userId') === this.get("session.user.id"));
 
-        let self = this;
+		let show = this.get('isFolderOwner') || this.get('hasSelectedDocuments') || this.get('folderService').get('canEditCurrentFolder');
-
+		this.set('showToolbar', show);
-        this.get('templateService').getSavedTemplates().then(function(saved) {
-            let emptyTemplate = {
-                id: "0",
-                title: "Empty document",
-                selected: true
-            };
-            saved.unshiftObject(emptyTemplate);
-            self.set('savedTemplates', saved);
-        });
 
         let targets = _.reject(this.get('folders'), {
             id: this.get('folder').get('id')
@@ -62,34 +54,67 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
                 this.addTooltip(document.getElementById("folder-settings-button"));
             }
             if (this.get('folderService').get('canEditCurrentFolder')) {
-                this.addTooltip(document.getElementById("start-document-button"));
+				this.addTooltip(document.getElementById("import-document-button"));
             }
         }
-    },
+    
+        if (this.get('folderService').get('canEditCurrentFolder')) {
+			let self = this;
+			let folderId = this.get('folder.id');
+			let url = this.get('appMeta.endpoint');
+			let importUrl = `${url}/import/folder/${folderId}`;
+
+			let dzone = new Dropzone("#import-document-button > i", {
+				headers: {
+					'Authorization': 'Bearer ' + self.get('session.session.content.authenticated.token')
+				},
+				url: importUrl,
+				method: "post",
+				paramName: 'attachment',
+				acceptedFiles: ".doc,.docx,.txt,.md,.markdown",
+				clickable: true,
+				maxFilesize: 10,
+				parallelUploads: 3,
+				uploadMultiple: false,
+				addRemoveLinks: false,
+				autoProcessQueue: true,
+
+				init: function () {
+					this.on("success", function (document) {
+						self.send('onDocumentImported', document.name, document);
+					});
+
+					this.on("error", function (x) {
+						console.log("Conversion failed for ", x.name, " obj ", x); // TODO proper error handling
+					});
+
+					this.on("queuecomplete", function () {});
+
+					this.on("addedfile", function (file) {
+						self.send('onDocumentImporting', file.name);
+						self.audit.record('converted-document');
+					});
+				}
+			});
+
+			dzone.on("complete", function (file) {
+				dzone.removeFile(file);
+			});
+
+			this.set('drop', dzone);
+		}
+	},
 
     willDestroyElement() {
+		if (is.not.null(this.get('drop'))) {
+			this.get('drop').destroy();
+			this.set('drop', null);
+		}
+
         this.destroyTooltips();
     },
 
-    navigateToDocument(document) {
-        this.attrs.showDocument(this.get('folder'), document);
-    },
-
     actions: {
-        onEditTemplate(template) {
-            this.navigateToDocument(template);
-        },
-
-        onDocumentTemplate(id /*, title, type*/ ) {
-            let self = this;
-
-            this.send("showNotification", "Creating");
-
-            this.get('templateService').importSavedTemplate(this.folder.get('id'), id).then(function(document) {
-                self.navigateToDocument(document);
-            });
-        },
-
         onDocumentImporting(filename) {
             this.send("showNotification", `Importing ${filename}`);
 

app/app/components/folder/folders-list.js

@@ -12,22 +12,53 @@
 import Ember from 'ember';
 import constants from '../../utils/constants';
 import TooltipMixin from '../../mixins/tooltip';
+import NotifierMixin from '../../mixins/notifier';
 
-export default Ember.Component.extend(TooltipMixin, {
+export default Ember.Component.extend(TooltipMixin, NotifierMixin, {
 	folderService: Ember.inject.service('folder'),
+	templateService: Ember.inject.service('template'),
 	publicFolders: [],
 	protectedFolders: [],
 	privateFolders: [],
+	savedTemplates: [],
 	hasPublicFolders: false,
 	hasProtectedFolders: false,
 	hasPrivateFolders: false,
 	newFolder: "",
+	showScrollTool: false,
+	showingDocument: false,
+	showingList: true,
+
+	init() {
+		this._super(...arguments);
+
+		let _this = this;
+		this.get('templateService').getSavedTemplates().then(function(saved) {
+            let emptyTemplate = {
+                id: "0",
+                title: "Empty",
+				description: "An empty canvas for your words",
+				img: "template-blank",
+            };
+
+			saved.forEach(function(t) {
+				t.img = "template-saved";
+			});
+
+            saved.unshiftObject(emptyTemplate);
+            _this.set('savedTemplates', saved);
+        });
+	},
+
+	didRender() {
+		if (this.get('folderService').get('canEditCurrentFolder')) {
+			this.addTooltip(document.getElementById("start-document-button"));
+		}
+	},
 
 	didInsertElement() {
-		this._super(...arguments);
+		this.eventBus.subscribe('resized', this, 'positionTool');
-		if (this.session.authenticated) {
+		this.eventBus.subscribe('scrolled', this, 'positionTool');
-			this.addTooltip(document.getElementById("add-folder-button"));
-		}
 	},
 
 	didReceiveAttrs() {
@@ -65,7 +96,37 @@ export default Ember.Component.extend(TooltipMixin, {
 		this.destroyTooltips();
 	},
 
+	positionTool() {
+		if (this.get('isDestroyed') || this.get('isDestroying')) {
+			return;
+		}
+
+		let s = $(".scroll-space-tool");
+		let windowpos = $(window).scrollTop();
+
+		if (windowpos >= 300) {
+			this.set('showScrollTool', true);
+			s.addClass("stuck-space-tool");
+			s.css('left', parseInt($(".zone-sidebar").css('width')) - 18 + 'px');
+		} else {
+			this.set('showScrollTool', false);
+			s.removeClass("stuck-space-tool");
+		}
+	},
+
+	navigateToDocument(document) {
+        this.attrs.showDocument(this.get('folder'), document);
+    },
+
 	actions: {
+		scrollTop() {
+			this.set('showScrollTool', false);
+
+			$("html,body").animate({
+				scrollTop: 0
+			}, 500, "linear");
+		},
+
 		addFolder() {
 			var folderName = this.get('newFolder');
 
@@ -78,6 +139,30 @@ export default Ember.Component.extend(TooltipMixin, {
 
 			this.set('newFolder', "");
 			return true;
-		}
+		},
+
+		showDocument() {
+			this.set('showingDocument', true);
+			this.set('showingList', false);
+		},
+
+		showList() {
+			this.set('showingDocument', false);
+			this.set('showingList', true);
+		},
+
+		onEditTemplate(template) {
+            this.navigateToDocument(template);
+        },
+
+        onDocumentTemplate(id /*, title, type*/ ) {
+            let self = this;
+
+            this.send("showNotification", "Creating");
+
+            this.get('templateService').importSavedTemplate(this.folder.get('id'), id).then(function(document) {
+                self.navigateToDocument(document);
+            });
+        }
 	}
 });

app/app/components/folder/start-document.js

@@ -14,108 +14,21 @@ import NotifierMixin from '../../mixins/notifier';
 
 export default Ember.Component.extend(NotifierMixin, {
 	localStorage: Ember.inject.service(),
-	tagName: 'span',
-	selectedTemplate: {
-		id: "0"
-	},
 	canEditTemplate: "",
-	drop: null,
-	appMeta: Ember.inject.service(),
-
-	didReceiveAttrs() {
-		this.send('setTemplate', this.get('savedTemplates')[0]);
-	},
-
-	willDestroyElement() {
-		if (is.not.null(this.get('drop'))) {
-			this.get('drop').destroy();
-			this.set('drop', null);
-		}
-	},
 
 	actions: {
-		setTemplate(chosen) {
+		editTemplate(template) {
-			if (is.undefined(chosen)) {
-				return;
-			}
-
-			this.set('selectedTemplate', chosen);
-			this.set('canEditTemplate', chosen.id !== "0" ? "Edit" : "");
-
-			let templates = this.get('savedTemplates');
-
-			templates.forEach(template => {
-				Ember.set(template, 'selected', template.id === chosen.id);
-			});
-		},
-
-		editTemplate() {
-			let template = this.get('selectedTemplate');
-
 			this.audit.record('edited-saved-template');
 			this.attrs.onEditTemplate(template);
 
 			return true;
 		},
 
-		startDocument() {
+		startDocument(template) {
-			let template = this.get('selectedTemplate');
-
 			this.audit.record('used-saved-template');
 			this.attrs.onDocumentTemplate(template.id, template.title, "private");
+
 			return true;
-		},
-
-		onOpenCallback() {
-			if (is.not.null(this.get('drop'))) {
-				return;
-			}
-
-			let self = this;
-			let folderId = this.get('folder.id');
-			let url = this.get('appMeta.endpoint');
-			let importUrl = `${url}/import/folder/${folderId}`;
-
-			Dropzone.options.uploadDocuments = false;
-
-			let dzone = new Dropzone("#upload-documents", {
-				headers: {
-					'Authorization': 'Bearer ' + self.get('session.session.content.authenticated.token')
-				},
-				url: importUrl,
-				method: "post",
-				paramName: 'attachment',
-				acceptedFiles: ".doc,.docx,.txt,.md,.markdown",
-				clickable: true,
-				maxFilesize: 10,
-				parallelUploads: 3,
-				uploadMultiple: false,
-				addRemoveLinks: false,
-				autoProcessQueue: true,
-
-				init: function () {
-					this.on("success", function (document) {
-						self.attrs.onDocumentImported(document.name, document);
-					});
-
-					this.on("error", function (x) {
-						console.log("Conversion failed for ", x.name, " obj ", x); // TODO proper error handling
-					});
-
-					this.on("queuecomplete", function () {});
-
-					this.on("addedfile", function (file) {
-						self.attrs.onDocumentImporting(file.name);
-						self.audit.record('converted-document');
-					});
-				}
-			});
-
-			dzone.on("complete", function (file) {
-				dzone.removeFile(file);
-			});
-
-			this.set('drop', dzone);
 		}
 	}
-});
+});

app/app/helpers/document/file-icon.js

@@ -107,7 +107,7 @@ export function documentFileIcon(params) {
         case "xslt":
     }
 
-    return new Ember.Handlebars.SafeString(html);
+    return new Ember.String.htmlSafe(html);
 }
 
 export default Ember.Helper.helper(documentFileIcon);

app/app/pods/customize/template.hbs

@@ -1,12 +1,8 @@
 {{#layout/zone-container}}
 
 	{{layout/zone-navigation}}
-
-	{{#layout/zone-header title="Documize Settings" message="General options, space management, user management"}}
-		{{layout/button-home}}
-	{{/layout/zone-header}}
-
 	{{#layout/zone-sidebar}}
+		{{back-to-home}}
 		<div class="sidebar-menu">
 			<ul class="options">
 				{{#link-to 'customize.general' activeClass='selected' class="option" tagName="li"}}General{{/link-to}}

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

@@ -193,15 +193,42 @@ export default Ember.Controller.extend(NotifierMixin, {
 			});
 		},
 
-		onAddPage(page) {
+		onAddSection(section) {
-			let self = this;
+			this.audit.record("added-section");
+			this.audit.record("added-section-" + section.get('contentType'));
 
-			this.get('documentService').addPage(this.get('model.id'), page).then(function (newPage) {
+			let page = {
-				self.transitionToRoute('document.edit',
+				documentId: this.get('model.id'),
-					self.get('folder.id'),
+				title: `${section.get('title')} Section`,
-					self.get('folder.slug'),
+				level: 1,
-					self.get('model.id'),
+				sequence: 2048,
-					self.get('model.slug'),
+				body: "",
+				contentType: section.get('contentType')
+			};
+
+			let data = this.get('store').normalize('page', page);
+			let pageData = this.get('store').push(data);
+
+			let meta = {
+				documentId: this.get('model.id'),
+				rawBody: "",
+				config: ""
+			};
+
+			let pageMeta = this.get('store').normalize('page-meta', meta);
+			let pageMetaData = this.get('store').push(pageMeta);
+
+			let model = {
+				page: pageData,
+				meta: pageMetaData
+			};
+
+			this.get('documentService').addPage(this.get('model.id'), model).then((newPage) => {
+				this.transitionToRoute('document.edit',
+					this.get('folder.id'),
+					this.get('folder.slug'),
+					this.get('model.id'),
+					this.get('model.slug'),
 					newPage.id);
 			});
 		},

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

@@ -2,24 +2,22 @@
 
 	{{layout/zone-navigation}}
 
-	{{#layout/zone-header title=model.name message=model.excerpt}}
-		{{document/document-toolbar document=model pages=pages folder=folder owner=owner 
-			isEditor=isEditor users=users
-			onSaveTemplate=(action 'onSaveTemplate')
-			onDocumentChange=(action 'onDocumentChange')
-			onAttachmentUpload=(action 'onAttachmentUpload')
-			onDocumentDelete=(action 'onDocumentDelete')}}
-	{{/layout/zone-header}}
-
 	{{#layout/zone-sidebar}}
 		{{document/document-sidebar document=model meta=meta folder=folder pages=pages page=page owner=owner isEditor=isEditor
-			onAddPage=(action 'onAddPage')
+			onAddSection=(action 'onAddSection')
 			changePageSequence=(action 'onPageSequenceChange')
 			changePageLevel=(action 'onPageLevelChange')
 			gotoPage=(action 'gotoPage')}}
 	{{/layout/zone-sidebar}}
 
 	{{#layout/zone-content}}
+		{{document/document-toolbar document=model pages=pages folder=folder owner=owner
+			isEditor=isEditor users=users
+			onSaveTemplate=(action 'onSaveTemplate')
+			onDocumentChange=(action 'onDocumentChange')
+			onAttachmentUpload=(action 'onAttachmentUpload')
+			onDocumentDelete=(action 'onDocumentDelete')}}
+
 		{{document/document-view document=model pages=pages attachments=attachments folder=folder folders=folders
 			isEditor=isEditor
 			onAttachmentDeleted=(action 'onAttachmentDeleted')

app/app/pods/folders/folder/template.hbs

@@ -2,22 +2,21 @@
 
 	{{layout/zone-navigation}}
 
-	{{#layout/zone-header title=model.folder.name message="A space provides a place for related content"}}
+	{{#layout/zone-sidebar}}
+		{{folder/folders-list folders=model.folders folder=model.folder
+			onFolderAdd=(action 'onFolderAdd')
+			showDocument=(action 'showDocument')}}
+	{{/layout/zone-sidebar}}
+
+	{{#layout/zone-content}}
 		{{folder/folder-toolbar
 			folders=model.folders
 			folder=model.folder
 			hasSelectedDocuments=hasSelectedDocuments
 			refresh=(action 'refresh')
 			onDeleteDocument=(action 'onDeleteDocument')
-			onMoveDocument=(action 'onMoveDocument')
+			onMoveDocument=(action 'onMoveDocument')}}
-			showDocument=(action 'showDocument')}}
-	{{/layout/zone-header}}
 
-	{{#layout/zone-sidebar}}
-		{{folder/folders-list folders=model.folders onFolderAdd=(action 'onFolderAdd')}}
-	{{/layout/zone-sidebar}}
-
-	{{#layout/zone-content}}
 		{{folder/documents-list documents=model.documents folder=model.folder isFolderOwner=isFolderOwner onDocumentsChecked=(action 'onDocumentsChecked') }}
 	{{/layout/zone-content}}
 

app/app/pods/folders/settings/route.js

@@ -113,7 +113,6 @@ export default Ember.Route.extend(NotifierMixin, {
 		},
 
 		onRemove(moveId) {
-
 			this.get('folderService').remove(this.folder.get('id'), moveId).then(() => { /* jshint ignore:line */
 				this.showNotification("Deleted");
 				this.get('localStorage').clearSessionItem('folder');
@@ -125,8 +124,7 @@ export default Ember.Route.extend(NotifierMixin, {
 			});
 		},
 
-		onShare: function (invitation) {
+		onShare: function(invitation) {
-
 			this.get('folderService').share(this.folder.get('id'), invitation).then(() => {
 				this.showNotification("Shared");
 			});

app/app/pods/folders/settings/template.hbs

@@ -2,16 +2,8 @@
 
 	{{layout/zone-navigation}}
 
-	{{#layout/zone-header title=model.name message="Settings, sharing, permissions and deletion"}}
-		{{#link-to 'folders.folder' model.id model.slug}}
-			<div class="regular-button button-white">
-				<i class="material-icons">arrow_back</i>
-				<div class="name">space</div>
-			</div>
-		{{/link-to}}
-	{{/layout/zone-header}}
-
 	{{#layout/zone-sidebar}}
+		{{back-to-space folder=model}}
 		<div class="sidebar-menu">
 			<ul class="options">
 				<li class="option {{if tabGeneral "selected"}}" {{action 'selectTab' 'tabGeneral'}}>General</li>

app/app/pods/profile/template.hbs

@@ -2,11 +2,8 @@
 
 	{{layout/zone-navigation}}
 
-	{{#layout/zone-header title=session.user.fullname message="Your Documize profile"}}
-		{{layout/button-home}}
-	{{/layout/zone-header}}
-
 	{{#layout/zone-sidebar}}
+		{{back-to-home}}
 		<div class="sidebar-menu">
 			<div class="avatar-large">{{session.user.initials}}</div>
 		</div>

app/app/routes/application.js

@@ -22,12 +22,12 @@ export default Ember.Route.extend(ApplicationRouteMixin, {
 	session: service(),
 
 	beforeModel(transition) {
+		// start TODO: ugly hack
 		let MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
-
 		let observer = new MutationObserver(function(/*mutations, observer*/) {
 		    // fired when a mutation occurs
 		    // console.log(mutations, observer);
-			$("#zone-sidebar").css('height', $(document).height() - $("#zone-navigation").height() - $("#zone-header").height() - 35);
+			$("#zone-sidebar").css('height', $(document).height() - $("#zone-navigation").height());
 		});
 
 		observer.observe(document, {
@@ -35,6 +35,7 @@ export default Ember.Route.extend(ApplicationRouteMixin, {
 			attributes: false,
 			childList: true
 		});
+		// end TODO: ugly hack
 
 		return this.get('appMeta').boot(transition.targetName).then(data => {
 			if (this.get('session.session.authenticator') !== "authenticator:documize" && data.allowAnonymousAccess) {
@@ -46,8 +47,7 @@ export default Ember.Route.extend(ApplicationRouteMixin, {
 	},
 
 	actions: {
-		willTransition: function ( /*transition*/ ) {
+		willTransition: function( /*transition*/ ) {
-			$("#zone-sidebar").css('height', 'auto');
 			Mousetrap.reset();
 		},
 

app/app/services/app-meta.js

@@ -34,7 +34,7 @@ export default Ember.Service.extend({
 		return [this.get('endpoint'), endpoint].join('/');
 	},
 
-	boot(/*requestedUrl*/) {
+	boot(requestedUrl) { // jshint ignore:line
 		let dbhash;
 		if (is.not.null(document.head.querySelector("[property=dbhash]"))) {
 			dbhash = document.head.querySelector("[property=dbhash]").content;

app/app/services/document.js

@@ -189,7 +189,6 @@ export default Ember.Service.extend({
 
 	// document meta referes to number of views, edits, approvals, etc.
 	getMeta(documentId) {
-
 		return this.get('ajax').request(`documents/${documentId}/meta`, {
 			method: "GET"
 		});

app/app/services/event-bus.js

@@ -1,17 +1,29 @@
 // Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
 //
-// This software (Documize Community Edition) is licensed under 
+// This software (Documize Community Edition) is licensed under
 // GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
 //
 // You can operate outside the AGPL restrictions by purchasing
 // Documize Enterprise Edition and obtaining a commercial license
-// by contacting <sales@documize.com>. 
+// by contacting <sales@documize.com>.
 //
 // https://documize.com
 
 import Ember from 'ember';
 
 export default Ember.Service.extend(Ember.Evented, {
+	init() {
+		let _this = this;
+
+		window.addEventListener("scroll", _.throttle(function() {
+			_this.publish('scrolled', null);
+		}, 100));
+
+		window.addEventListener("resize", _.debounce(function() {
+			_this.publish('resized', null);
+		}, 100));
+	},
+
     publish: function() {
         return this.trigger.apply(this, arguments);
     },
@@ -23,4 +35,4 @@ export default Ember.Service.extend(Ember.Evented, {
     unsubscribe: function() {
         return this.off.apply(this, arguments);
     }
-});
+});

app/app/styles/app.scss

@@ -17,17 +17,16 @@
 @import "view/layout.scss";
 @import "view/page-search.scss";
 @import "view/page-documents.scss";
-@import "view/page-folder-settings.scss";
 @import "view/page-settings.scss";
 @import "view/page-auth.scss";
 @import "view/page-onboard.scss";
 @import "view/page-exceptions.scss";
-@import "view/document/toolbar.scss";
 @import "view/document/sidebar.scss";
 @import "view/document/content.scss";
 @import "view/document/wysiwyg.scss";
 @import "view/document/editor.scss";
 @import "view/document/wizard.scss";
+@import "view/common.scss";
 @import "vendor.scss";
 @import "responsive.scss";
 @import "print.scss";

app/app/styles/base.scss

@@ -17,6 +17,7 @@
 .text-left { text-align: left; }
 .text-right { text-align: right; }
 .text-center { text-align: center; }
+.center { margin: 0 auto; }
 .bold { font-weight: bold; }
 .italic { font-style: italic; }
 .text-uppercase { text-transform: uppercase; }
@@ -52,7 +53,7 @@ a {
 	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
 
 	a:hover, a:focus {
-		text-decoration: underline;
+		text-decoration: none;
 	}
 }
 

app/app/styles/color.scss

@@ -10,26 +10,26 @@
 // https://documize.com
 
 $color-off-white: #f5f5f5;
-$color-off-black: #333333;
+$color-off-black: #393939;
 $color-black: #000000;
 $color-white: #ffffff;
-$color-primary: #115a97;
+$color-primary: #2667af;
 $color-red: #d04134;
 $color-green: #4caf50;
-$color-blue: #115a97;
+$color-blue: #2667af;
 $color-gray: #8b9096;
 $color-goldy: #cc9933;
 
 $color-header: #f3f5f8;
 $color-link: #0092d3;
-$color-border: #e1e1e1;
+$color-border: #f3f5f8;
 
 $color-input: #5a5a5a;
 $color-stroke: #e1e1e1;
 
 $color-tooltip: #a1a1a1;
 $color-toast: #4c4c4c;
-$color-checkbox: #115a97;
+$color-checkbox: #2667af;
 $color-card-active: #f7fcff;
 
 $color-chip: #98A2AB;
@@ -37,39 +37,39 @@ $color-chip: #dff0f9;
 $color-chip-border: #daeaf3;
 $color-chip-text: #1b88e3;
 
-.background-color-white {
-	background-color: $color-white;
-}
 .color-white {
-	color: $color-white;
+	color: $color-white !important;
 }
 .color-off-white {
-	color: $color-off-white;
+	color: $color-off-white !important;
 }
 .color-black {
-	color: $color-black;
+	color: $color-black !important;
 }
 .color-off-black {
-	color: $color-off-black;
+	color: $color-off-black !important;
-}
-.background-color-primary {
-	background-color: $color-primary;
 }
 .color-primary {
-	color: $color-primary;
+	color: $color-primary !important;
 }
 .color-link {
-	color: $color-link;
+	color: $color-link !important;
 }
 .color-blue {
-	color: $color-blue;
+	color: $color-blue !important;
 }
 .color-red {
-	color: $color-red;
+	color: $color-red !important;
 }
 .color-green {
-	color: $color-green;
+	color: $color-green !important;
 }
 .color-gray {
-	color: $color-gray;
+	color: $color-gray !important;
+}
+.background-color-white {
+	background-color: $color-white !important;
+}
+.background-color-primary {
+	background-color: $color-primary !important;
 }

app/app/styles/functions.scss

@@ -137,3 +137,32 @@
       $opacity-ie: $opacity * 100;
       filter: alpha(opacity=$opacity-ie); //IE8
 }
+
+@keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Internet Explorer */
+@-ms-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Opera < 12.1 */
+@-o-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}

app/app/styles/view/common.scss

@@ -0,0 +1,21 @@
+.space-button {
+	width: 100%;
+}
+
+.space-name {
+	max-width: 90%;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+}
+
+.back-to-home-button {
+	width: 100%;
+}
+
+.back-to-home-name {
+	max-width: 90%;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+}

app/app/styles/view/document/content.scss

@@ -20,7 +20,7 @@
 
 		> .list {
 			margin: 0;
-			padding: 7px;
+			padding: 7px 0;
 
 			> .item {
 				color: $color-off-black;
@@ -31,7 +31,6 @@
 				padding-bottom: 10px;
 
 				> .icon {
-					vertical-align: text-top;
 					margin-right: 10px;
 				}
 
@@ -43,16 +42,16 @@
 					}
 
 					> .file {
-						font-size: 0.9rem;
+						font-size: 1rem;
 					}
 				}
 
 				> .action {
 					float: right;
-					margin-top: -8px;
+					margin-top: -2px;
 					margin-right: 5px;
 					@extend .cursor-pointer;
-					opacity: 0.3;
+					opacity: 0.5;
 					@extend .transition-all;
 					display: none;
 					color: $color-stroke;

app/app/styles/view/document/sidebar.scss

@@ -1,9 +1,10 @@
 .document-sidebar {
 	@extend .no-select;
+	width: 100%;
 
 	> .summary-line {
 		color: $color-gray;
-		margin: 20px 0 30px 0;
+		margin: 30px 0;
 
 		>.items {
 			padding: 0;
@@ -43,12 +44,54 @@
 					}
 				}
 			}
+
+			> .active {
+				> .metric {
+					color: $color-link;
+				}
+			}
 		}
 	}
 
-	.stick {
+	.stuck-toc {
 	    position: fixed;
-	    top: 10px;
+	    top: 20px;
+		-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
+      	-moz-animation: fadein 1s; /* Firefox < 16 */
+       	-ms-animation: fadein 1s; /* Internet Explorer */
+        -o-animation: fadein 1s; /* Opera < 12.1 */
+        animation: fadein 1s;
+	}
+
+	.section-tool {
+		position: absolute;
+		top: 150px;
+		right: -18px;
+		z-index: 999;
+	}
+
+	.scroll-tool {
+		position: absolute;
+		top: 150px;
+		right: -18px;
+		z-index: 888;
+		-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
+      	-moz-animation: fadein 1s; /* Firefox < 16 */
+       	-ms-animation: fadein 1s; /* Internet Explorer */
+        -o-animation: fadein 1s; /* Opera < 12.1 */
+        animation: fadein 1s;
+	}
+
+	.stuck-tool {
+		position: fixed !important;
+		top: 150px !important;
+		right: 0;
+		left: 0;
+		-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
+      	-moz-animation: fadein 1s; /* Firefox < 16 */
+       	-ms-animation: fadein 1s; /* Internet Explorer */
+        -o-animation: fadein 1s; /* Opera < 12.1 */
+        animation: fadein 1s;
 	}
 
 	.close-action {

app/app/styles/view/document/toolbar.scss

@@ -1,8 +0,0 @@
-.document-toolbar {
-	.space-name {
-		max-width: 200px;
-		text-overflow: ellipsis;
-		overflow: hidden;
-		white-space: nowrap;
-	}
-}

app/app/styles/view/document/wizard.scss

@@ -1,9 +1,8 @@
 .section-wizard {
-	margin: 30px;
+	margin: 20px 0 30px 0;
 
 	> .canvas {
 		padding: 0;
-		margin: 30px 0;
 
 		> .list {
 			margin: 0;
@@ -11,61 +10,55 @@
 
 			> .item {
 				list-style: none;
-				float: left;
 				cursor: pointer;
-				width: 400px;
+				padding: 10px 0;
-				height: 80px;
+				margin: 5px 0;
-				background-color: $color-white;
+				@include ease-in();
-				border: 1px solid $color-border;
-				border-radius: 3px;
-				margin: 0 30px 30px 0;
 
 				&:hover {
-			        background-color: $color-card-active;
+					@include ease-in();
-			        border: 1px solid $color-border;
+
-			        transition: 0.2s all ease;
+					> .details {
+						> .title {
+							color: $color-primary;
+						}
+
+						> .desc {
+							color: $color-primary;
+						}
+					}
 			    }
 
 				.icon {
 					text-align: center;
 					display: inline-block;
+					width: 50px;
 
 					> .img {
+						float: left;
 						text-align: center;
-						margin: 17px 10px 0 20px;
 						display: inline-block;
-						height: 45px;
+						height: 40px;
-						width: 45px;
+						width: 40px;
 					}
 				}
 
 				> .details {
 					vertical-align: top;
 					display: inline-block;
+					width: 80%;
 
 					> .title {
 						font-size: 1rem;
 						font-weight: bold;
 						color: $color-off-black;
-						margin-top: 18px;
 						letter-spacing: 0.5px;
-
-						.preview {
-							font-size: 0.7rem;
-							color: $color-goldy;
-							display: inline-block;
-							margin-left: 10px;
-						}
 					}
 
 					> .desc {
 						color: $color-gray;
-						font-size: 0.8rem;
+						font-size: 0.9rem;
 						margin-top: 5px;
-						max-width: 300px;
-						overflow: hidden;
-						white-space: nowrap;
-						text-overflow: ellipsis;
 					}
 				}
 			}

app/app/styles/view/document/wysiwyg.scss

@@ -45,8 +45,8 @@
 
 	h1
 	{
-		font-size: 2em;
+		font-size: 1.6em;
-		font-weight: bold;
+		font-family: open_sansregular;
 		color:$color-off-black;
 		margin: 30px 0 20px 0;
 	}
@@ -134,7 +134,7 @@
 		  border-width: 2px;
 		}
 		th {
-		  background: #e6e6e6;
+		  background: #efefef;
 		}
 	}
 }

app/app/styles/view/layout.scss

@@ -9,7 +9,8 @@
 	margin: 0;
 	width: 100%;
 	font-size: 1rem;
-	padding: 15px 40px 15px 40px;
+	padding: 10px 40px 10px 40px;
+
 	.content {
 		> .title {
 			padding-left: 15px;
@@ -49,6 +50,7 @@
 			}
 		}
 	}
+
 	.header-button {
 		display: inline-block;
 		position: relative;
@@ -63,14 +65,21 @@
 		vertical-align: middle;
 		background-color: $color-white;
 		text-align: center;
+
 		&:hover {
 			@extend .z-depth-1;
 		}
+
+		&:before {
+			border-radius: 0;
+		}
+
 		> .material-icons {
 			color: $color-primary;
 			text-align: center;
 			font-size: 1.4em;
 		}
+
 		> .initials {
 			color: $color-primary;
 			text-align: center;
@@ -79,15 +88,12 @@
 			line-height: 2.6rem;
 			font-family: open_sansregular;
 		}
-		&:before {
-			border-radius: 0;
-		}
 	}
 }
 
 .zone-header {
 	background-color: $color-header;
-	padding: 0 40px 0 40px;
+	padding: 30px 40px 30px 40px;
 	> .info {
 		padding: 20px 0 20px 0;
 		> .title {
@@ -106,10 +112,10 @@
 }
 
 .zone-sidebar {
+	background-color: $color-header;
 	height: 100%;
 	min-height: 100%;
-	padding: 0 40px 0 40px;
+	padding: 40px 40px 0 40px;
-	border-right: 1px solid $color-border;
 	float: left;
 }
 

app/app/styles/view/page-documents.scss

@@ -1,12 +1,39 @@
-
+.space-tools {
-.folders-list {
+	.doc-tool {
-	> .add-space-action {
+		position: absolute;
-		text-align: center;
+		top: 150px;
-		margin-bottom: 30px;
+		right: -18px;
+		z-index: 999;
 	}
 
+	.scroll-space-tool {
+		position: absolute;
+		top: 150px;
+		right: -18px;
+		z-index: 888;
+		-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
+		-moz-animation: fadein 1s; /* Firefox < 16 */
+		-ms-animation: fadein 1s; /* Internet Explorer */
+		-o-animation: fadein 1s; /* Opera < 12.1 */
+		animation: fadein 1s;
+	}
+
+	.stuck-space-tool {
+		position: fixed !important;
+		top: 150px !important;
+		right: 0;
+		left: 0;
+		-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
+		-moz-animation: fadein 1s; /* Firefox < 16 */
+		-ms-animation: fadein 1s; /* Internet Explorer */
+		-o-animation: fadein 1s; /* Opera < 12.1 */
+		animation: fadein 1s;
+	}
+}
+
+.folders-list {
 	> .section {
-		margin: 0 0 20px 0;
+		margin: 30px 0 10px 0;
 
 		> .heading {
 			font-size: 0.9rem;
@@ -57,6 +84,7 @@
 		width: 100%;
 		position: relative;
 		transition: .3s;
+		border-bottom: 1px solid $color-border;
 
 		&:hover {
 			> .link {
@@ -145,11 +173,6 @@
 	}
 }
 
-.upload-container {
-	text-align: center;
-	margin: 2rem 0;
-}
-
 .no-documents {
 	margin-top: 50px;
 	text-align: center;
@@ -172,3 +195,67 @@
 		}
 	}
 }
+
+.templates-list {
+	margin: 0;
+
+	> .list {
+		margin: 0;
+		padding: 0;
+
+		> .item {
+			list-style: none;
+			cursor: pointer;
+			padding: 10px 5px;
+			margin: 5px 0;
+			@include ease-in();
+
+			&:hover {
+				@include ease-in();
+
+				> .details {
+					> .title {
+						color: $color-primary;
+					}
+
+					> .desc {
+						color: $color-primary;
+					}
+				}
+		    }
+
+			.icon {
+				text-align: center;
+				display: inline-block;
+				width: 50px;
+
+				> .img {
+					float: left;
+					text-align: center;
+					display: inline-block;
+					height: 40px;
+					width: 40px;
+				}
+			}
+
+			> .details {
+				vertical-align: top;
+				display: inline-block;
+				width: 80%;
+
+				> .title {
+					font-size: 1rem;
+					font-weight: bold;
+					color: $color-off-black;
+					letter-spacing: 0.5px;
+				}
+
+				> .desc {
+					color: $color-gray;
+					font-size: 0.9rem;
+					margin-top: 5px;
+				}
+			}
+		}
+	}
+}

app/app/styles/widget/widget-button.scss

@@ -50,7 +50,7 @@
     transition: .3s;
     cursor: pointer;
     vertical-align: middle;
-    border: 1px solid $color-gray;
+    border: 1px solid $color-stroke;
     text-align: center;
 	@extend .no-select;
 	@include ease-in();
@@ -61,8 +61,9 @@
     }
 
     i {
-        color: $color-gray;
+        color: $color-stroke;
         text-align: center;
+		width: 100%;
     }
 
     &:before {

app/app/styles/widget/widget-sidebar-menu.scss

@@ -1,5 +1,5 @@
 .sidebar-menu {
-	margin: 30px 0;
+	margin: 30px 0 0 0;
 
 	> .options {
 		padding: 0;
@@ -11,7 +11,7 @@
 			list-style: none;
 			cursor: pointer;
 			@extend .no-select;
-			color: $color-gray;
+			color: $color-off-black;
 
 			&:hover {
 				color: $color-link;

app/app/templates/components/back-to-home.hbs

@@ -0,0 +1,6 @@
+{{#link-to 'application' }}
+	<div class="regular-button button-white back-to-home-button">
+		<i class="material-icons">arrow_back</i>
+		<div class="name back-to-home-name">home</div>
+	</div>
+{{/link-to}}

app/app/templates/components/back-to-space.hbs

@@ -0,0 +1,6 @@
+{{#link-to 'folders.folder' folder.id folder.slug}}
+	<div class="regular-button button-white space-button">
+		<i class="material-icons">arrow_back</i>
+		<div class="name space-name">{{folder.name}}</div>
+	</div>
+{{/link-to}}

app/app/templates/components/document/document-sidebar.hbs

@@ -1,22 +1,24 @@
 <div class="document-sidebar">
+	{{back-to-space folder=folder}}
+
 	{{#if session.authenticated}}
 		<div class="summary-line hidden-xs hidden-sm">
 			<ul class="items">
-				<li class="item" {{action 'showToc'}}>
+				<li class="item {{if showToc "active"}}" {{action 'showToc'}}>
 					<div class="metric">
 						<div class="number">{{pages.length}}</div>
 			            <div class="label">sections</div>
 					</div>
 		        </li>
 				<li class="divider" />
-		        <li class="item" {{action 'showViews'}}>
+		        <li class="item {{if showViews "active"}}" {{action 'showViews'}}>
 					<div class="metric">
 						<div class="number">{{meta.viewers.length}}</div>
 			            <div class="label">views</div>
 					</div>
 		        </li>
 				<li class="divider" />
-		        <li class="item" {{action 'showContributions'}}>
+		        <li class="item {{if showContributions "active"}}" {{action 'showContributions'}}>
 					<div class="metric">
 						<div class="number">{{meta.editors.length}}</div>
 			            <div class="label">activity</div>
@@ -28,6 +30,23 @@
 		<div class="margin-top-40" />
 	{{/if}}
 
+	{{#if isEditor}}
+		<div {{action 'showSections'}} id="section-tool" class="round-button round-button-mono button-white section-tool" data-tooltip="Content" data-tooltip-position="top center">
+			<i class="material-icons color-green">add</i>
+		</div>
+		{{#if showingSections}}
+			<div {{action 'onCancel'}} id="cancel-tool" class="round-button round-button-mono button-white section-tool">
+				<i class="material-icons color-gray">close</i>
+			</div>
+		{{/if}}
+	{{/if}}
+
+	{{#if showScrollTool}}
+		<div {{action 'scrollTop'}} id="scroll-tool" class="round-button round-button-mono button-white scroll-tool" data-tooltip="Back to top" data-tooltip-position="top center">
+			<i class="material-icons color-gray">vertical_align_top</i>
+		</div>
+	{{/if}}
+
 	{{#if showToc}}
 		{{document/document-sidebar-toc document=model folder=folder pages=pages page=page isEditor=isEditor
 			changePageSequence=(action 'onPageSequenceChange') changePageLevel=(action 'onPageLevelChange')
@@ -39,4 +58,7 @@
 	{{#if showContributions}}
 		{{document/document-sidebar-edits pages=pages meta=meta}}
 	{{/if}}
+	{{#if showSections}}
+		{{document/page-wizard document=document folder=folder onCancel=(action 'onCancel') onAction=(action 'onAddSection')}}
+	{{/if}}
 </div>

app/app/templates/components/document/document-toolbar.hbs

@@ -1,43 +1,29 @@
-<div>
+<div class="pull-right hidden-xs hidden-sm">
-	{{#link-to 'folders.folder' folder.id folder.slug}}
-		<div class="regular-button button-white">
-			<i class="material-icons">arrow_back</i>
-			<div class="name space-name">{{folder.name}}</div>
-		</div>
-	{{/link-to}}
-
     {{#if isEditor}}
 		<div class="button-gap"></div>
-		<div class="square-button-white" id="set-meta-button" data-tooltip="Set meta" data-tooltip-position="top center">
+		<div class="round-button-mono" id="set-meta-button" data-tooltip="Set meta" data-tooltip-position="top center">
-			<i class="material-icons">settings</i>
+			<i class="material-icons color-gray">settings</i>
 		</div>
 		<div class="button-gap"></div>
-		<div class="square-button-white" id="attachment-button" data-tooltip="Attach file" data-tooltip-position="top center">
+		<div class="round-button-mono" id="attachment-button" data-tooltip="Attach file" data-tooltip-position="top center">
-			<i class="material-icons">attach_file</i>
+			<i class="material-icons color-gray">attach_file</i>
 		</div>
 		<div class="button-gap"></div>
-		<div class="square-button-white" id="save-template-button" data-tooltip="Save as template" data-tooltip-position="top center">
+		<div class="round-button-mono" id="save-template-button" data-tooltip="Save as template" data-tooltip-position="top center">
-			<i class="material-icons">content_copy</i>
+			<i class="material-icons color-gray">content_copy</i>
 		</div>
 		<div class="button-gap"></div>
     {{/if}}
 
-	<div class="square-button-white" id="print-document-button" data-tooltip="Print me" data-tooltip-position="top center" {{action 'printDocument'}}>
+	<div class="round-button-mono" id="print-document-button" data-tooltip="Print me" data-tooltip-position="top center" {{action 'printDocument'}}>
-		<i class="material-icons">print</i>
+		<i class="material-icons color-gray">print</i>
 	</div>
 
 	{{#if isEditor}}
 		<div class="button-gap"></div>
-		<div class="square-button-white button-red-text" id="delete-document-button" data-tooltip="Delete content" data-tooltip-position="top center">
+		<div class="round-button-mono button-red-text" id="delete-document-button" data-tooltip="Delete content" data-tooltip-position="top center">
-			<i class="material-icons">delete</i>
+			<i class="material-icons color-gray">delete</i>
 		</div>
-		<div class="button-gap"></div>
-		{{#link-to 'document.wizard' folder.id folder.slug document.id document.slug}}
-			<div class="regular-button button-green" id="add-section-button" data-tooltip="Add section" data-tooltip-position="top center">
-				<i class="material-icons">add</i>
-				<div class="name">section</div>
-			</div>
-		{{/link-to}}
 	{{/if}}
 
 	{{#if isEditor}}
@@ -85,3 +71,4 @@
 		{{/dropdown-dialog}}
 	{{/if}}
 </div>
+<div class="margin-bottom-20 clearfix" />

app/app/templates/components/document/document-view.hbs

@@ -1,4 +1,9 @@
 <div class="document-view">
+	
+	<div class="wysiwyg">
+		<h1>{{document.name}}</h1>
+	</div>
+
 	{{#if document.template}}
 		<div class="is-template">TEMPLATE</div>
 	{{/if}}

app/app/templates/components/document/page-wizard.hbs

@@ -1,8 +1,4 @@
 <div class="section-wizard">
-	<div class="buttons pull-right">
-		<div class="flat-button flat-gray" {{action 'onCancel'}}>Cancel</div>
-	</div>
-	<div class="clearfix"></div>
 	<div class="canvas">
 		<ul class="list">
 			{{#each sections as |section|}}
@@ -19,17 +15,9 @@
 						</div>
 						<div class='desc'>{{section.description}}</div>
 					</div>
+					<div class="clearfix" />
 				</li>
 			{{/each}}
-			<li class="item">
-				<div class="icon">
-					<img class="img" src="/sections/suggest.png" title="{{section.title}}" alt="{{section.title}}" />
-				</div>
-				<div class="details">
-					<div class='title'>Suggest</div>
-					<div class='desc'>We'll build the integrations you need - just let us know</div>
-				</div>
-			</li>
 		</ul>
 	</div>
 </div>

app/app/templates/components/folder/folder-toolbar.hbs

@@ -1,60 +1,54 @@
-<div>
+{{#if showToolbar}}
-    {{#if hasSelectedDocuments}}
+	<div class="pull-right hidden-xs hidden-sm">
-		<div class="square-button button-blue" id="move-documents-button" data-tooltip="Move documents" data-tooltip-position="top center">
+	    {{#if hasSelectedDocuments}}
-		    <i class="material-icons">folder</i>
+			<div class="round-button button-blue" id="move-documents-button" data-tooltip="Move documents" data-tooltip-position="top center">
-		</div>
+			    <i class="material-icons">folder</i>
-		<div class="button-gap"></div>
-		<div class="square-button button-red" id="delete-documents-button" data-tooltip="Delete documents" data-tooltip-position="top center">
-		    <i class="material-icons">delete</i>
-		</div>
-		{{#dropdown-dialog target="delete-documents-button" position="bottom right" button="Delete" color="flat-red" onAction=(action 'deleteDocuments')}}
-		    <p>Are you sure you want to delete selected documents?</p>
-		    <p>There is no undo!</p>
-		{{/dropdown-dialog}}
-		{{#dropdown-dialog target="move-documents-button" position="bottom right" button="Move" color="flat-blue" onAction=(action 'moveDocuments')}}
-		    <p class="heading">Select destination space</p>
-			<ul class="move-document-options">
-				{{#each movedFolderOptions as |folder|}}
-					<li class="option {{if folder.selected "selected"}}" {{action 'setMoveFolder' folder.id}}>
-						{{#if folder.selected}}
-							<i class="material-icons">radio_button_checked</i>
-						{{else}}
-							<i class="material-icons">radio_button_unchecked</i>
-						{{/if}}
-						&nbsp;{{ folder.name }}
-					</li>
-				{{/each}}
-			</ul>
-		{{/dropdown-dialog}}
-	{{else}}
-    	{{#if isFolderOwner}}
-			{{#link-to 'folders.settings' folder.id folder.slug (query-params tab="tabShare")}}
-				<div class="square-button-white" id="folder-share-button" data-tooltip="Share space" data-tooltip-position="top center">
-					<i class="material-icons">share</i>
-				</div>
-			{{/link-to}}
-			<div class="button-gap"></div>
-			{{#link-to 'folders.settings' folder.id folder.slug}}
-				<div class="square-button-white" id="folder-settings-button" data-tooltip="Space settings" data-tooltip-position="top center">
-				    <i class="material-icons">settings</i>
-				</div>
-			{{/link-to}}
-		{{/if}}
-		{{#if folderService.canEditCurrentFolder}}
-			<div class="button-gap"></div>
-			<div class="regular-button button-green" id="start-document-button" data-tooltip="Add new content" data-tooltip-position="top center">
-			    <i class="material-icons">add</i>
-				<div class="name">Content</div>
 			</div>
-		{{/if}}
+			<div class="button-gap"></div>
-		{{#if folderService.canEditCurrentFolder}}
+			<div class="round-button button-red" id="delete-documents-button" data-tooltip="Delete documents" data-tooltip-position="top center">
-			{{folder/start-document
+			    <i class="material-icons">delete</i>
-				savedTemplates=savedTemplates
+			</div>
-				folder=folder
+			{{#dropdown-dialog target="delete-documents-button" position="bottom right" button="Delete" color="flat-red" onAction=(action 'deleteDocuments')}}
-				onEditTemplate=(action 'onEditTemplate')
+			    <p>Are you sure you want to delete selected documents?</p>
-				onDocumentTemplate=(action 'onDocumentTemplate')
+			    <p>There is no undo!</p>
-				onDocumentImporting=(action 'onDocumentImporting')
+			{{/dropdown-dialog}}
-				onDocumentImported=(action 'onDocumentImported')}}
+			{{#dropdown-dialog target="move-documents-button" position="bottom right" button="Move" color="flat-blue" onAction=(action 'moveDocuments')}}
-		{{/if}}
+			    <p class="heading">Select destination space</p>
-    {{/if}}
+				<ul class="move-document-options">
-</div>
+					{{#each movedFolderOptions as |folder|}}
+						<li class="option {{if folder.selected "selected"}}" {{action 'setMoveFolder' folder.id}}>
+							{{#if folder.selected}}
+								<i class="material-icons">radio_button_checked</i>
+							{{else}}
+								<i class="material-icons">radio_button_unchecked</i>
+							{{/if}}
+							&nbsp;{{ folder.name }}
+						</li>
+					{{/each}}
+				</ul>
+			{{/dropdown-dialog}}
+		{{else}}
+	    	{{#if isFolderOwner}}
+				{{#link-to 'folders.settings' folder.id folder.slug (query-params tab="tabShare")}}
+					<div class="round-button-mono" id="folder-share-button" data-tooltip="Share" data-tooltip-position="top center">
+						<i class="material-icons color-gray">share</i>
+					</div>
+				{{/link-to}}
+				<div class="button-gap"></div>
+				{{#link-to 'folders.settings' folder.id folder.slug}}
+					<div class="round-button-mono" id="folder-settings-button" data-tooltip="Settings" data-tooltip-position="top center">
+					    <i class="material-icons color-gray">settings</i>
+					</div>
+				{{/link-to}}
+			{{/if}}
+			{{#if folderService.canEditCurrentFolder}}
+				<div class="button-gap"></div>
+				<div class="round-button-mono" id="import-document-button" data-tooltip="Import Word / Markdown" data-tooltip-position="top center">
+					<i class="material-icons color-gray">file_upload</i>
+				</div>
+			{{/if}}
+	    {{/if}}
+	</div>
+{{/if}}
+
+<div class="margin-bottom-20 clearfix" />

app/app/templates/components/folder/folders-list.hbs

@@ -1,22 +1,48 @@
-<div class="sidebar-menu">
+<div class="space-tools">
-	<div class="folders-list">
+	{{#if showingDocument}}
+		<div {{action 'showList'}} id="cancel-tool" class="round-button round-button-mono button-white doc-tool">
+			<i class="material-icons color-gray">close</i>
+		</div>
+
+		{{folder/start-document
+			savedTemplates=savedTemplates
+			folder=folder
+			onEditTemplate=(action 'onEditTemplate')
+			onDocumentTemplate=(action 'onDocumentTemplate')}}
+	{{/if}}
+
+	{{#if showScrollTool}}
+		<div {{action 'scrollTop'}} id="scroll-space-tool" class="round-button round-button-mono button-white scroll-space-tool" data-tooltip="Back to top" data-tooltip-position="top center">
+			<i class="material-icons color-gray">vertical_align_top</i>
+		</div>
+	{{/if}}
+
+	{{#if showingList}}
+		{{#if folderService.canEditCurrentFolder}}
+			<div {{action 'showDocument'}} class="round-button button-green doc-tool" data-tooltip="Document" data-tooltip-position="top center">
+				<i class="material-icons">add</i>
+			</div>
+		{{/if}}
+	{{/if}}
+</div>
+
+<div class="folders-list">
+	{{#if showingList}}
 
 		{{#if session.isEditor}}
-			<div class="add-space-action hidden-xs hidden-sm">
+			<div id="add-space-button" class="regular-button button-white">
-					<div class="regular-button button-white" id="add-folder-button" data-tooltip="New space" data-tooltip-position="top center">
+				<i class="material-icons">add</i>
-						<i class="material-icons">add</i>
+				<div class="name">Space</div>
-						<div class="name">space</div>
-					</div>
-					{{#dropdown-dialog target="add-folder-button" position="bottom left" button="Add" color="flat-green" onAction=(action 'addFolder') focusOn="new-folder-name"}}
-						<div>
-							<div class="input-control">
-								<label>New space</label>
-								<div class="tip">A repository for related documentation</div>
-								{{input type='text' id="new-folder-name" class="mousetrap" value=newFolder}}
-							</div>
-						</div>
-					{{/dropdown-dialog}}
 			</div>
+			{{#dropdown-dialog target="add-space-button" position="bottom left" button="Add" color="flat-green" onAction=(action 'addFolder') focusOn="new-folder-name"}}
+				<div>
+					<div class="input-control">
+						<label>New space</label>
+						<div class="tip">A repository for related documentation</div>
+						{{input type='text' id="new-folder-name" class="mousetrap" value=newFolder}}
+					</div>
+				</div>
+			{{/dropdown-dialog}}
 		{{/if}}
 
 		<div class="section">
@@ -62,9 +88,11 @@
 				</ul>
 			</div>
 		{{/if}}
-	</div>
+	{{/if}}
-
+</div>
-	<div class="copyright hidden-xs hidden-sm">
+
-		<a href="https://documize.com?ref=app-footer" target="_blank">Copyright&nbsp;&copy;&nbsp;2016 Documize Inc.</a>
+
-	</div>
+
+<div class="copyright hidden-xs hidden-sm">
+	<a href="https://documize.com?ref=app-footer" target="_blank">Copyright&nbsp;&copy;&nbsp;2016 Documize Inc.</a>
 </div>

app/app/templates/components/folder/start-document.hbs

@@ -1,20 +1,19 @@
-{{#dropdown-dialog target="start-document-button" position="bottom right" button="Start" color="flat-green" onAction=(action 'startDocument') button2=canEditTemplate color2="flat-blue" onAction2=(action 'editTemplate') onOpenCallback=(action 'onOpenCallback')}}
+<p class="bold color-link margin-bottom-20">{{folder.name}}</p>
-	<div class="upload-container">
-		<div id="upload-documents" class="regular-button button-green">Import Word / Markdown</div>
-	</div>
 
-	<p class="heading">Or use a template:</p>
+<div class="templates-list">
-
+	<ul class="list">
-	<ul class="start-document-options" style="min-width:185px;">
+		{{#each savedTemplates key="id"as |template|}}
-		{{#each savedTemplates key="id" as |template|}}
+			<li class="item" {{action 'startDocument' template}}>
-			<li class="option {{if template.selected "selected"}}" {{action 'setTemplate' template}}>
+				<div class="icon">
-				{{#if template.selected}}
+					<img class="img" src="/assets/img/{{template.img}}.png" srcset="/assets/img/{{template.img}}@2x.png" />
-					<i class="material-icons">radio_button_checked</i>
+				</div>
-				{{else}}
+				<div class="details">
-					<i class="material-icons">radio_button_unchecked</i>
+					<div class='title'>
-				{{/if}}
+						{{template.title}}
-				&nbsp;{{ template.title }}
+					</div>
+					<div class='desc'>{{template.description}}</div>
+				</div>
 			</li>
 		{{/each}}
 	</ul>
-{{/dropdown-dialog}}
+</div>

app/app/templates/components/layout/button-home.hbs

@@ -1,6 +0,0 @@
-{{#link-to 'application'}}
-	<div class="regular-button button-white">
-		<i class="material-icons">arrow_back</i>
-		<div class="name">home</div>
-	</div>
-{{/link-to}}

app/app/templates/components/layout/zone-header.hbs

@@ -1,5 +1,5 @@
 <div id="zone-header" class="zone-header">
-	<div class="info pull-left width-50">
+	<div class="info pull-left width-70">
 		<div class="title">
 			&nbsp;{{title}}
 		</div>

app/ember-cli-build.js

@@ -54,7 +54,9 @@ module.exports = function(defaults) {
     app.import('vendor/tooltip.js');
     app.import('vendor/markdown-it.min.js');
     app.import('vendor/dragula.js');
-    app.import('vendor/datetimepicker.min.js');
+	app.import('vendor/datetimepicker.min.js');
+	app.import('vendor/hoverIntent.js');
+	app.import('vendor/waypoints.js');
 
     return app.toTree();
-};
+};

app/package.json

@@ -21,7 +21,7 @@
   "devDependencies": {
     "broccoli-asset-rev": "^2.4.2",
     "ember-ajax": "2.3.2",
-    "ember-cli": "2.8.0",
+    "ember-cli": "^2.8.0",
     "ember-cli-app-version": "^1.0.0",
     "ember-cli-babel": "^5.1.6",
     "ember-cli-dependency-checker": "^1.2.0",
@@ -32,9 +32,9 @@
     "ember-cli-mirage": "^0.2.0",
     "ember-cli-qunit": "^2.1.0",
     "ember-cli-release": "0.2.9",
-	"ember-cli-test-loader": "^1.1.0",
     "ember-cli-sass": "5.3.1",
     "ember-cli-sri": "^2.1.0",
+    "ember-cli-test-loader": "^1.1.0",
     "ember-cli-uglify": "^1.2.0",
     "ember-data": "^2.8.0",
     "ember-export-application-global": "^1.0.5",

app/public/robots.txt

@@ -1,3 +0,0 @@
-# http://www.robotstxt.org
-User-agent: *
-Disallow:

app/vendor/hoverIntent.js

@@ -0,0 +1,158 @@
+/*!
+ * hoverIntent v1.8.1 // 2014.08.11 // jQuery v1.9.1+
+ * http://briancherne.github.io/jquery-hoverIntent/
+ *
+ * You may use hoverIntent under the terms of the MIT license. Basically that
+ * means you are free to use hoverIntent as long as this header is left intact.
+ * Copyright 2007, 2014 Brian Cherne
+ */
+
+/* hoverIntent is similar to jQuery's built-in "hover" method except that
+ * instead of firing the handlerIn function immediately, hoverIntent checks
+ * to see if the user's mouse has slowed down (beneath the sensitivity
+ * threshold) before firing the event. The handlerOut function is only
+ * called after a matching handlerIn.
+ *
+ * // basic usage ... just like .hover()
+ * .hoverIntent( handlerIn, handlerOut )
+ * .hoverIntent( handlerInOut )
+ *
+ * // basic usage ... with event delegation!
+ * .hoverIntent( handlerIn, handlerOut, selector )
+ * .hoverIntent( handlerInOut, selector )
+ *
+ * // using a basic configuration object
+ * .hoverIntent( config )
+ *
+ * @param  handlerIn   function OR configuration object
+ * @param  handlerOut  function OR selector for delegation OR undefined
+ * @param  selector    selector OR undefined
+ * @author Brian Cherne <brian(at)cherne(dot)net>
+ */
+
+(function(factory) {
+    'use strict';
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery'], factory);
+    } else if (jQuery && !jQuery.fn.hoverIntent) {
+        factory(jQuery);
+    }
+})(function($) {
+    'use strict';
+
+    // default configuration values
+    var _cfg = {
+        interval: 100,
+        sensitivity: 6,
+        timeout: 0
+    };
+
+    // counter used to generate an ID for each instance
+    var INSTANCE_COUNT = 0;
+
+    // current X and Y position of mouse, updated during mousemove tracking (shared across instances)
+    var cX, cY;
+
+    // saves the current pointer position coordinates based on the given mousemove event
+    var track = function(ev) {
+        cX = ev.pageX;
+        cY = ev.pageY;
+    };
+
+    // compares current and previous mouse positions
+    var compare = function(ev,$el,s,cfg) {
+        // compare mouse positions to see if pointer has slowed enough to trigger `over` function
+        if ( Math.sqrt( (s.pX-cX)*(s.pX-cX) + (s.pY-cY)*(s.pY-cY) ) < cfg.sensitivity ) {
+            $el.off(s.event,track);
+            delete s.timeoutId;
+            // set hoverIntent state as active for this element (permits `out` handler to trigger)
+            s.isActive = true;
+            // overwrite old mouseenter event coordinates with most recent pointer position
+            ev.pageX = cX; ev.pageY = cY;
+            // clear coordinate data from state object
+            delete s.pX; delete s.pY;
+            return cfg.over.apply($el[0],[ev]);
+        } else {
+            // set previous coordinates for next comparison
+            s.pX = cX; s.pY = cY;
+            // use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs)
+            s.timeoutId = setTimeout( function(){compare(ev, $el, s, cfg);} , cfg.interval );
+        }
+    };
+
+    // triggers given `out` function at configured `timeout` after a mouseleave and clears state
+    var delay = function(ev,$el,s,out) {
+        delete $el.data('hoverIntent')[s.id];
+        return out.apply($el[0],[ev]);
+    };
+
+    $.fn.hoverIntent = function(handlerIn,handlerOut,selector) {
+        // instance ID, used as a key to store and retrieve state information on an element
+        var instanceId = INSTANCE_COUNT++;
+
+        // extend the default configuration and parse parameters
+        var cfg = $.extend({}, _cfg);
+        if ( $.isPlainObject(handlerIn) ) {
+            cfg = $.extend(cfg, handlerIn);
+            if ( !$.isFunction(cfg.out) ) {
+                cfg.out = cfg.over;
+            }
+        } else if ( $.isFunction(handlerOut) ) {
+            cfg = $.extend(cfg, { over: handlerIn, out: handlerOut, selector: selector } );
+        } else {
+            cfg = $.extend(cfg, { over: handlerIn, out: handlerIn, selector: handlerOut } );
+        }
+
+        // A private function for handling mouse 'hovering'
+        var handleHover = function(e) {
+            // cloned event to pass to handlers (copy required for event object to be passed in IE)
+            var ev = $.extend({},e);
+
+            // the current target of the mouse event, wrapped in a jQuery object
+            var $el = $(this);
+
+            // read hoverIntent data from element (or initialize if not present)
+            var hoverIntentData = $el.data('hoverIntent');
+            if (!hoverIntentData) { $el.data('hoverIntent', (hoverIntentData = {})); }
+
+            // read per-instance state from element (or initialize if not present)
+            var state = hoverIntentData[instanceId];
+            if (!state) { hoverIntentData[instanceId] = state = { id: instanceId }; }
+
+            // state properties:
+            // id = instance ID, used to clean up data
+            // timeoutId = timeout ID, reused for tracking mouse position and delaying "out" handler
+            // isActive = plugin state, true after `over` is called just until `out` is called
+            // pX, pY = previously-measured pointer coordinates, updated at each polling interval
+            // event = string representing the namespaced event used for mouse tracking
+
+            // clear any existing timeout
+            if (state.timeoutId) { state.timeoutId = clearTimeout(state.timeoutId); }
+
+            // namespaced event used to register and unregister mousemove tracking
+            var mousemove = state.event = 'mousemove.hoverIntent.hoverIntent'+instanceId;
+
+            // handle the event, based on its type
+            if (e.type === 'mouseenter') {
+                // do nothing if already active
+                if (state.isActive) { return; }
+                // set "previous" X and Y position based on initial entry point
+                state.pX = ev.pageX; state.pY = ev.pageY;
+                // update "current" X and Y position based on mousemove
+                $el.off(mousemove,track).on(mousemove,track);
+                // start polling interval (self-calling timeout) to compare mouse coordinates over time
+                state.timeoutId = setTimeout( function(){compare(ev,$el,state,cfg);} , cfg.interval );
+            } else { // "mouseleave"
+                // do nothing if not already active
+                if (!state.isActive) { return; }
+                // unbind expensive mousemove event
+                $el.off(mousemove,track);
+                // if hoverIntent state is true, then call the mouseOut function after the specified delay
+                state.timeoutId = setTimeout( function(){delay(ev,$el,state,cfg.out);} , cfg.timeout );
+            }
+        };
+
+        // listen for mouseenter and mouseleave
+        return this.on({'mouseenter.hoverIntent':handleHover,'mouseleave.hoverIntent':handleHover}, cfg.selector);
+    };
+});

app/vendor/waypoints.js

@@ -0,0 +1,939 @@
+/*!
+Waypoints - 4.0.1
+Copyright © 2011-2016 Caleb Troughton
+Licensed under the MIT license.
+https://github.com/imakewebthings/waypoints/blob/master/licenses.txt
+*/
+(function() {
+  'use strict'
+
+  var keyCounter = 0
+  var allWaypoints = {}
+
+  /* http://imakewebthings.com/waypoints/api/waypoint */
+  function Waypoint(options) {
+    if (!options) {
+      throw new Error('No options passed to Waypoint constructor')
+    }
+    if (!options.element) {
+      throw new Error('No element option passed to Waypoint constructor')
+    }
+    if (!options.handler) {
+      throw new Error('No handler option passed to Waypoint constructor')
+    }
+
+    this.key = 'waypoint-' + keyCounter
+    this.options = Waypoint.Adapter.extend({}, Waypoint.defaults, options)
+    this.element = this.options.element
+    this.adapter = new Waypoint.Adapter(this.element)
+    this.callback = options.handler
+    this.axis = this.options.horizontal ? 'horizontal' : 'vertical'
+    this.enabled = this.options.enabled
+    this.triggerPoint = null
+    this.group = Waypoint.Group.findOrCreate({
+      name: this.options.group,
+      axis: this.axis
+    })
+    this.context = Waypoint.Context.findOrCreateByElement(this.options.context)
+
+    if (Waypoint.offsetAliases[this.options.offset]) {
+      this.options.offset = Waypoint.offsetAliases[this.options.offset]
+    }
+    this.group.add(this)
+    this.context.add(this)
+    allWaypoints[this.key] = this
+    keyCounter += 1
+  }
+
+  /* Private */
+  Waypoint.prototype.queueTrigger = function(direction) {
+    this.group.queueTrigger(this, direction)
+  }
+
+  /* Private */
+  Waypoint.prototype.trigger = function(args) {
+    if (!this.enabled) {
+      return
+    }
+    if (this.callback) {
+      this.callback.apply(this, args)
+    }
+  }
+
+  /* Public */
+  /* http://imakewebthings.com/waypoints/api/destroy */
+  Waypoint.prototype.destroy = function() {
+    this.context.remove(this)
+    this.group.remove(this)
+    delete allWaypoints[this.key]
+  }
+
+  /* Public */
+  /* http://imakewebthings.com/waypoints/api/disable */
+  Waypoint.prototype.disable = function() {
+    this.enabled = false
+    return this
+  }
+
+  /* Public */
+  /* http://imakewebthings.com/waypoints/api/enable */
+  Waypoint.prototype.enable = function() {
+    this.context.refresh()
+    this.enabled = true
+    return this
+  }
+
+  /* Public */
+  /* http://imakewebthings.com/waypoints/api/next */
+  Waypoint.prototype.next = function() {
+    return this.group.next(this)
+  }
+
+  /* Public */
+  /* http://imakewebthings.com/waypoints/api/previous */
+  Waypoint.prototype.previous = function() {
+    return this.group.previous(this)
+  }
+
+  /* Private */
+  Waypoint.invokeAll = function(method) {
+    var allWaypointsArray = []
+    for (var waypointKey in allWaypoints) {
+      allWaypointsArray.push(allWaypoints[waypointKey])
+    }
+    for (var i = 0, end = allWaypointsArray.length; i < end; i++) {
+      allWaypointsArray[i][method]()
+    }
+  }
+
+  /* Public */
+  /* http://imakewebthings.com/waypoints/api/destroy-all */
+  Waypoint.destroyAll = function() {
+    Waypoint.invokeAll('destroy')
+  }
+
+  /* Public */
+  /* http://imakewebthings.com/waypoints/api/disable-all */
+  Waypoint.disableAll = function() {
+    Waypoint.invokeAll('disable')
+  }
+
+  /* Public */
+  /* http://imakewebthings.com/waypoints/api/enable-all */
+  Waypoint.enableAll = function() {
+    Waypoint.Context.refreshAll()
+    for (var waypointKey in allWaypoints) {
+      allWaypoints[waypointKey].enabled = true
+    }
+    return this
+  }
+
+  /* Public */
+  /* http://imakewebthings.com/waypoints/api/refresh-all */
+  Waypoint.refreshAll = function() {
+    Waypoint.Context.refreshAll()
+  }
+
+  /* Public */
+  /* http://imakewebthings.com/waypoints/api/viewport-height */
+  Waypoint.viewportHeight = function() {
+    return window.innerHeight || document.documentElement.clientHeight
+  }
+
+  /* Public */
+  /* http://imakewebthings.com/waypoints/api/viewport-width */
+  Waypoint.viewportWidth = function() {
+    return document.documentElement.clientWidth
+  }
+
+  Waypoint.adapters = []
+
+  Waypoint.defaults = {
+    context: window,
+    continuous: true,
+    enabled: true,
+    group: 'default',
+    horizontal: false,
+    offset: 0
+  }
+
+  Waypoint.offsetAliases = {
+    'bottom-in-view': function() {
+      return this.context.innerHeight() - this.adapter.outerHeight()
+    },
+    'right-in-view': function() {
+      return this.context.innerWidth() - this.adapter.outerWidth()
+    }
+  }
+
+  window.Waypoint = Waypoint
+}())
+;(function() {
+  'use strict'
+
+  function requestAnimationFrameShim(callback) {
+    window.setTimeout(callback, 1000 / 60)
+  }
+
+  var keyCounter = 0
+  var contexts = {}
+  var Waypoint = window.Waypoint
+  var oldWindowLoad = window.onload
+
+  /* http://imakewebthings.com/waypoints/api/context */
+  function Context(element) {
+    this.element = element
+    this.Adapter = Waypoint.Adapter
+    this.adapter = new this.Adapter(element)
+    this.key = 'waypoint-context-' + keyCounter
+    this.didScroll = false
+    this.didResize = false
+    this.oldScroll = {
+      x: this.adapter.scrollLeft(),
+      y: this.adapter.scrollTop()
+    }
+    this.waypoints = {
+      vertical: {},
+      horizontal: {}
+    }
+
+    element.waypointContextKey = this.key
+    contexts[element.waypointContextKey] = this
+    keyCounter += 1
+    if (!Waypoint.windowContext) {
+      Waypoint.windowContext = true
+      Waypoint.windowContext = new Context(window)
+    }
+
+    this.createThrottledScrollHandler()
+    this.createThrottledResizeHandler()
+  }
+
+  /* Private */
+  Context.prototype.add = function(waypoint) {
+    var axis = waypoint.options.horizontal ? 'horizontal' : 'vertical'
+    this.waypoints[axis][waypoint.key] = waypoint
+    this.refresh()
+  }
+
+  /* Private */
+  Context.prototype.checkEmpty = function() {
+    var horizontalEmpty = this.Adapter.isEmptyObject(this.waypoints.horizontal)
+    var verticalEmpty = this.Adapter.isEmptyObject(this.waypoints.vertical)
+    var isWindow = this.element == this.element.window
+    if (horizontalEmpty && verticalEmpty && !isWindow) {
+      this.adapter.off('.waypoints')
+      delete contexts[this.key]
+    }
+  }
+
+  /* Private */
+  Context.prototype.createThrottledResizeHandler = function() {
+    var self = this
+
+    function resizeHandler() {
+      self.handleResize()
+      self.didResize = false
+    }
+
+    this.adapter.on('resize.waypoints', function() {
+      if (!self.didResize) {
+        self.didResize = true
+        Waypoint.requestAnimationFrame(resizeHandler)
+      }
+    })
+  }
+
+  /* Private */
+  Context.prototype.createThrottledScrollHandler = function() {
+    var self = this
+    function scrollHandler() {
+      self.handleScroll()
+      self.didScroll = false
+    }
+
+    this.adapter.on('scroll.waypoints', function() {
+      if (!self.didScroll || Waypoint.isTouch) {
+        self.didScroll = true
+        Waypoint.requestAnimationFrame(scrollHandler)
+      }
+    })
+  }
+
+  /* Private */
+  Context.prototype.handleResize = function() {
+    Waypoint.Context.refreshAll()
+  }
+
+  /* Private */
+  Context.prototype.handleScroll = function() {
+    var triggeredGroups = {}
+    var axes = {
+      horizontal: {
+        newScroll: this.adapter.scrollLeft(),
+        oldScroll: this.oldScroll.x,
+        forward: 'right',
+        backward: 'left'
+      },
+      vertical: {
+        newScroll: this.adapter.scrollTop(),
+        oldScroll: this.oldScroll.y,
+        forward: 'down',
+        backward: 'up'
+      }
+    }
+
+    for (var axisKey in axes) {
+      var axis = axes[axisKey]
+      var isForward = axis.newScroll > axis.oldScroll
+      var direction = isForward ? axis.forward : axis.backward
+
+      for (var waypointKey in this.waypoints[axisKey]) {
+        var waypoint = this.waypoints[axisKey][waypointKey]
+        if (waypoint.triggerPoint === null) {
+          continue
+        }
+        var wasBeforeTriggerPoint = axis.oldScroll < waypoint.triggerPoint
+        var nowAfterTriggerPoint = axis.newScroll >= waypoint.triggerPoint
+        var crossedForward = wasBeforeTriggerPoint && nowAfterTriggerPoint
+        var crossedBackward = !wasBeforeTriggerPoint && !nowAfterTriggerPoint
+        if (crossedForward || crossedBackward) {
+          waypoint.queueTrigger(direction)
+          triggeredGroups[waypoint.group.id] = waypoint.group
+        }
+      }
+    }
+
+    for (var groupKey in triggeredGroups) {
+      triggeredGroups[groupKey].flushTriggers()
+    }
+
+    this.oldScroll = {
+      x: axes.horizontal.newScroll,
+      y: axes.vertical.newScroll
+    }
+  }
+
+  /* Private */
+  Context.prototype.innerHeight = function() {
+    /*eslint-disable eqeqeq */
+    if (this.element == this.element.window) {
+      return Waypoint.viewportHeight()
+    }
+    /*eslint-enable eqeqeq */
+    return this.adapter.innerHeight()
+  }
+
+  /* Private */
+  Context.prototype.remove = function(waypoint) {
+    delete this.waypoints[waypoint.axis][waypoint.key]
+    this.checkEmpty()
+  }
+
+  /* Private */
+  Context.prototype.innerWidth = function() {
+    /*eslint-disable eqeqeq */
+    if (this.element == this.element.window) {
+      return Waypoint.viewportWidth()
+    }
+    /*eslint-enable eqeqeq */
+    return this.adapter.innerWidth()
+  }
+
+  /* Public */
+  /* http://imakewebthings.com/waypoints/api/context-destroy */
+  Context.prototype.destroy = function() {
+    var allWaypoints = []
+    for (var axis in this.waypoints) {
+      for (var waypointKey in this.waypoints[axis]) {
+        allWaypoints.push(this.waypoints[axis][waypointKey])
+      }
+    }
+    for (var i = 0, end = allWaypoints.length; i < end; i++) {
+      allWaypoints[i].destroy()
+    }
+  }
+
+  /* Public */
+  /* http://imakewebthings.com/waypoints/api/context-refresh */
+  Context.prototype.refresh = function() {
+    /*eslint-disable eqeqeq */
+    var isWindow = this.element == this.element.window
+    /*eslint-enable eqeqeq */
+    var contextOffset = isWindow ? undefined : this.adapter.offset()
+    var triggeredGroups = {}
+    var axes
+
+    this.handleScroll()
+    axes = {
+      horizontal: {
+        contextOffset: isWindow ? 0 : contextOffset.left,
+        contextScroll: isWindow ? 0 : this.oldScroll.x,
+        contextDimension: this.innerWidth(),
+        oldScroll: this.oldScroll.x,
+        forward: 'right',
+        backward: 'left',
+        offsetProp: 'left'
+      },
+      vertical: {
+        contextOffset: isWindow ? 0 : contextOffset.top,
+        contextScroll: isWindow ? 0 : this.oldScroll.y,
+        contextDimension: this.innerHeight(),
+        oldScroll: this.oldScroll.y,
+        forward: 'down',
+        backward: 'up',
+        offsetProp: 'top'
+      }
+    }
+
+    for (var axisKey in axes) {
+      var axis = axes[axisKey]
+      for (var waypointKey in this.waypoints[axisKey]) {
+        var waypoint = this.waypoints[axisKey][waypointKey]
+        var adjustment = waypoint.options.offset
+        var oldTriggerPoint = waypoint.triggerPoint
+        var elementOffset = 0
+        var freshWaypoint = oldTriggerPoint == null
+        var contextModifier, wasBeforeScroll, nowAfterScroll
+        var triggeredBackward, triggeredForward
+
+        if (waypoint.element !== waypoint.element.window) {
+          elementOffset = waypoint.adapter.offset()[axis.offsetProp]
+        }
+
+        if (typeof adjustment === 'function') {
+          adjustment = adjustment.apply(waypoint)
+        }
+        else if (typeof adjustment === 'string') {
+          adjustment = parseFloat(adjustment)
+          if (waypoint.options.offset.indexOf('%') > - 1) {
+            adjustment = Math.ceil(axis.contextDimension * adjustment / 100)
+          }
+        }
+
+        contextModifier = axis.contextScroll - axis.contextOffset
+        waypoint.triggerPoint = Math.floor(elementOffset + contextModifier - adjustment)
+        wasBeforeScroll = oldTriggerPoint < axis.oldScroll
+        nowAfterScroll = waypoint.triggerPoint >= axis.oldScroll
+        triggeredBackward = wasBeforeScroll && nowAfterScroll
+        triggeredForward = !wasBeforeScroll && !nowAfterScroll
+
+        if (!freshWaypoint && triggeredBackward) {
+          waypoint.queueTrigger(axis.backward)
+          triggeredGroups[waypoint.group.id] = waypoint.group
+        }
+        else if (!freshWaypoint && triggeredForward) {
+          waypoint.queueTrigger(axis.forward)
+          triggeredGroups[waypoint.group.id] = waypoint.group
+        }
+        else if (freshWaypoint && axis.oldScroll >= waypoint.triggerPoint) {
+          waypoint.queueTrigger(axis.forward)
+          triggeredGroups[waypoint.group.id] = waypoint.group
+        }
+      }
+    }
+
+    Waypoint.requestAnimationFrame(function() {
+      for (var groupKey in triggeredGroups) {
+        triggeredGroups[groupKey].flushTriggers()
+      }
+    })
+
+    return this
+  }
+
+  /* Private */
+  Context.findOrCreateByElement = function(element) {
+    return Context.findByElement(element) || new Context(element)
+  }
+
+  /* Private */
+  Context.refreshAll = function() {
+    for (var contextId in contexts) {
+      contexts[contextId].refresh()
+    }
+  }
+
+  /* Public */
+  /* http://imakewebthings.com/waypoints/api/context-find-by-element */
+  Context.findByElement = function(element) {
+    return contexts[element.waypointContextKey]
+  }
+
+  window.onload = function() {
+    if (oldWindowLoad) {
+      oldWindowLoad()
+    }
+    Context.refreshAll()
+  }
+
+
+  Waypoint.requestAnimationFrame = function(callback) {
+    var requestFn = window.requestAnimationFrame ||
+      window.mozRequestAnimationFrame ||
+      window.webkitRequestAnimationFrame ||
+      requestAnimationFrameShim
+    requestFn.call(window, callback)
+  }
+  Waypoint.Context = Context
+}())
+;(function() {
+  'use strict'
+
+  function byTriggerPoint(a, b) {
+    return a.triggerPoint - b.triggerPoint
+  }
+
+  function byReverseTriggerPoint(a, b) {
+    return b.triggerPoint - a.triggerPoint
+  }
+
+  var groups = {
+    vertical: {},
+    horizontal: {}
+  }
+  var Waypoint = window.Waypoint
+
+  /* http://imakewebthings.com/waypoints/api/group */
+  function Group(options) {
+    this.name = options.name
+    this.axis = options.axis
+    this.id = this.name + '-' + this.axis
+    this.waypoints = []
+    this.clearTriggerQueues()
+    groups[this.axis][this.name] = this
+  }
+
+  /* Private */
+  Group.prototype.add = function(waypoint) {
+    this.waypoints.push(waypoint)
+  }
+
+  /* Private */
+  Group.prototype.clearTriggerQueues = function() {
+    this.triggerQueues = {
+      up: [],
+      down: [],
+      left: [],
+      right: []
+    }
+  }
+
+  /* Private */
+  Group.prototype.flushTriggers = function() {
+    for (var direction in this.triggerQueues) {
+      var waypoints = this.triggerQueues[direction]
+      var reverse = direction === 'up' || direction === 'left'
+      waypoints.sort(reverse ? byReverseTriggerPoint : byTriggerPoint)
+      for (var i = 0, end = waypoints.length; i < end; i += 1) {
+        var waypoint = waypoints[i]
+        if (waypoint.options.continuous || i === waypoints.length - 1) {
+          waypoint.trigger([direction])
+        }
+      }
+    }
+    this.clearTriggerQueues()
+  }
+
+  /* Private */
+  Group.prototype.next = function(waypoint) {
+    this.waypoints.sort(byTriggerPoint)
+    var index = Waypoint.Adapter.inArray(waypoint, this.waypoints)
+    var isLast = index === this.waypoints.length - 1
+    return isLast ? null : this.waypoints[index + 1]
+  }
+
+  /* Private */
+  Group.prototype.previous = function(waypoint) {
+    this.waypoints.sort(byTriggerPoint)
+    var index = Waypoint.Adapter.inArray(waypoint, this.waypoints)
+    return index ? this.waypoints[index - 1] : null
+  }
+
+  /* Private */
+  Group.prototype.queueTrigger = function(waypoint, direction) {
+    this.triggerQueues[direction].push(waypoint)
+  }
+
+  /* Private */
+  Group.prototype.remove = function(waypoint) {
+    var index = Waypoint.Adapter.inArray(waypoint, this.waypoints)
+    if (index > -1) {
+      this.waypoints.splice(index, 1)
+    }
+  }
+
+  /* Public */
+  /* http://imakewebthings.com/waypoints/api/first */
+  Group.prototype.first = function() {
+    return this.waypoints[0]
+  }
+
+  /* Public */
+  /* http://imakewebthings.com/waypoints/api/last */
+  Group.prototype.last = function() {
+    return this.waypoints[this.waypoints.length - 1]
+  }
+
+  /* Private */
+  Group.findOrCreate = function(options) {
+    return groups[options.axis][options.name] || new Group(options)
+  }
+
+  Waypoint.Group = Group
+}())
+;(function() {
+  'use strict'
+
+  var $ = window.jQuery
+  var Waypoint = window.Waypoint
+
+  function JQueryAdapter(element) {
+    this.$element = $(element)
+  }
+
+  $.each([
+    'innerHeight',
+    'innerWidth',
+    'off',
+    'offset',
+    'on',
+    'outerHeight',
+    'outerWidth',
+    'scrollLeft',
+    'scrollTop'
+  ], function(i, method) {
+    JQueryAdapter.prototype[method] = function() {
+      var args = Array.prototype.slice.call(arguments)
+      return this.$element[method].apply(this.$element, args)
+    }
+  })
+
+  $.each([
+    'extend',
+    'inArray',
+    'isEmptyObject'
+  ], function(i, method) {
+    JQueryAdapter[method] = $[method]
+  })
+
+  Waypoint.adapters.push({
+    name: 'jquery',
+    Adapter: JQueryAdapter
+  })
+  Waypoint.Adapter = JQueryAdapter
+}())
+;(function() {
+  'use strict'
+
+  var Waypoint = window.Waypoint
+
+  function createExtension(framework) {
+    return function() {
+      var waypoints = []
+      var overrides = arguments[0]
+
+      if (framework.isFunction(arguments[0])) {
+        overrides = framework.extend({}, arguments[1])
+        overrides.handler = arguments[0]
+      }
+
+      this.each(function() {
+        var options = framework.extend({}, overrides, {
+          element: this
+        })
+        if (typeof options.context === 'string') {
+          options.context = framework(this).closest(options.context)[0]
+        }
+        waypoints.push(new Waypoint(options))
+      })
+
+      return waypoints
+    }
+  }
+
+  if (window.jQuery) {
+    window.jQuery.fn.waypoint = createExtension(window.jQuery)
+  }
+  if (window.Zepto) {
+    window.Zepto.fn.waypoint = createExtension(window.Zepto)
+  }
+}())
+;
+
+/*!
+Waypoints Sticky Element Shortcut - 4.0.1
+Copyright © 2011-2016 Caleb Troughton
+Licensed under the MIT license.
+https://github.com/imakewebthings/waypoints/blob/master/licenses.txt
+*/
+(function() {
+  'use strict'
+
+  var $ = window.jQuery
+  var Waypoint = window.Waypoint
+
+  /* http://imakewebthings.com/waypoints/shortcuts/sticky-elements */
+  function Sticky(options) {
+    this.options = $.extend({}, Waypoint.defaults, Sticky.defaults, options)
+    this.element = this.options.element
+    this.$element = $(this.element)
+    this.createWrapper()
+    this.createWaypoint()
+  }
+
+  /* Private */
+  Sticky.prototype.createWaypoint = function() {
+    var originalHandler = this.options.handler
+
+    this.waypoint = new Waypoint($.extend({}, this.options, {
+      element: this.wrapper,
+      handler: $.proxy(function(direction) {
+        var shouldBeStuck = this.options.direction.indexOf(direction) > -1
+        var wrapperHeight = shouldBeStuck ? this.$element.outerHeight(true) : ''
+
+        this.$wrapper.height(wrapperHeight)
+        this.$element.toggleClass(this.options.stuckClass, shouldBeStuck)
+
+        if (originalHandler) {
+          originalHandler.call(this, direction)
+        }
+      }, this)
+    }))
+  }
+
+  /* Private */
+  Sticky.prototype.createWrapper = function() {
+    if (this.options.wrapper) {
+      this.$element.wrap(this.options.wrapper)
+    }
+    this.$wrapper = this.$element.parent()
+    this.wrapper = this.$wrapper[0]
+  }
+
+  /* Public */
+  Sticky.prototype.destroy = function() {
+    if (this.$element.parent()[0] === this.wrapper) {
+      this.waypoint.destroy()
+      this.$element.removeClass(this.options.stuckClass)
+      if (this.options.wrapper) {
+        this.$element.unwrap()
+      }
+    }
+  }
+
+  Sticky.defaults = {
+    wrapper: '<div class="sticky-wrapper" />',
+    stuckClass: 'stuck',
+    direction: 'down right'
+  }
+
+  Waypoint.Sticky = Sticky
+}())
+;
+
+/*!
+Waypoints Inview Shortcut - 4.0.1
+Copyright © 2011-2016 Caleb Troughton
+Licensed under the MIT license.
+https://github.com/imakewebthings/waypoints/blob/master/licenses.txt
+*/
+(function() {
+  'use strict'
+
+  function noop() {}
+
+  var Waypoint = window.Waypoint
+
+  /* http://imakewebthings.com/waypoints/shortcuts/inview */
+  function Inview(options) {
+    this.options = Waypoint.Adapter.extend({}, Inview.defaults, options)
+    this.axis = this.options.horizontal ? 'horizontal' : 'vertical'
+    this.waypoints = []
+    this.element = this.options.element
+    this.createWaypoints()
+  }
+
+  /* Private */
+  Inview.prototype.createWaypoints = function() {
+    var configs = {
+      vertical: [{
+        down: 'enter',
+        up: 'exited',
+        offset: '100%'
+      }, {
+        down: 'entered',
+        up: 'exit',
+        offset: 'bottom-in-view'
+      }, {
+        down: 'exit',
+        up: 'entered',
+        offset: 0
+      }, {
+        down: 'exited',
+        up: 'enter',
+        offset: function() {
+          return -this.adapter.outerHeight()
+        }
+      }],
+      horizontal: [{
+        right: 'enter',
+        left: 'exited',
+        offset: '100%'
+      }, {
+        right: 'entered',
+        left: 'exit',
+        offset: 'right-in-view'
+      }, {
+        right: 'exit',
+        left: 'entered',
+        offset: 0
+      }, {
+        right: 'exited',
+        left: 'enter',
+        offset: function() {
+          return -this.adapter.outerWidth()
+        }
+      }]
+    }
+
+    for (var i = 0, end = configs[this.axis].length; i < end; i++) {
+      var config = configs[this.axis][i]
+      this.createWaypoint(config)
+    }
+  }
+
+  /* Private */
+  Inview.prototype.createWaypoint = function(config) {
+    var self = this
+    this.waypoints.push(new Waypoint({
+      context: this.options.context,
+      element: this.options.element,
+      enabled: this.options.enabled,
+      handler: (function(config) {
+        return function(direction) {
+          self.options[config[direction]].call(self, direction)
+        }
+      }(config)),
+      offset: config.offset,
+      horizontal: this.options.horizontal
+    }))
+  }
+
+  /* Public */
+  Inview.prototype.destroy = function() {
+    for (var i = 0, end = this.waypoints.length; i < end; i++) {
+      this.waypoints[i].destroy()
+    }
+    this.waypoints = []
+  }
+
+  Inview.prototype.disable = function() {
+    for (var i = 0, end = this.waypoints.length; i < end; i++) {
+      this.waypoints[i].disable()
+    }
+  }
+
+  Inview.prototype.enable = function() {
+    for (var i = 0, end = this.waypoints.length; i < end; i++) {
+      this.waypoints[i].enable()
+    }
+  }
+
+  Inview.defaults = {
+    context: window,
+    enabled: true,
+    enter: noop,
+    entered: noop,
+    exit: noop,
+    exited: noop
+  }
+
+  Waypoint.Inview = Inview
+}())
+;
+
+/*!
+Waypoints Infinite Scroll Shortcut - 4.0.1
+Copyright © 2011-2016 Caleb Troughton
+Licensed under the MIT license.
+https://github.com/imakewebthings/waypoints/blob/master/licenses.txt
+*/
+(function() {
+  'use strict'
+
+  var $ = window.jQuery
+  var Waypoint = window.Waypoint
+
+  /* http://imakewebthings.com/waypoints/shortcuts/infinite-scroll */
+  function Infinite(options) {
+    this.options = $.extend({}, Infinite.defaults, options)
+    this.container = this.options.element
+    if (this.options.container !== 'auto') {
+      this.container = this.options.container
+    }
+    this.$container = $(this.container)
+    this.$more = $(this.options.more)
+
+    if (this.$more.length) {
+      this.setupHandler()
+      this.waypoint = new Waypoint(this.options)
+    }
+  }
+
+  /* Private */
+  Infinite.prototype.setupHandler = function() {
+    this.options.handler = $.proxy(function() {
+      this.options.onBeforePageLoad()
+      this.destroy()
+      this.$container.addClass(this.options.loadingClass)
+
+      $.get($(this.options.more).attr('href'), $.proxy(function(data) {
+        var $data = $($.parseHTML(data))
+        var $newMore = $data.find(this.options.more)
+
+        var $items = $data.find(this.options.items)
+        if (!$items.length) {
+          $items = $data.filter(this.options.items)
+        }
+
+        this.$container.append($items)
+        this.$container.removeClass(this.options.loadingClass)
+
+        if (!$newMore.length) {
+          $newMore = $data.filter(this.options.more)
+        }
+        if ($newMore.length) {
+          this.$more.replaceWith($newMore)
+          this.$more = $newMore
+          this.waypoint = new Waypoint(this.options)
+        }
+        else {
+          this.$more.remove()
+        }
+
+        this.options.onAfterPageLoad($items)
+      }, this))
+    }, this)
+  }
+
+  /* Public */
+  Infinite.prototype.destroy = function() {
+    if (this.waypoint) {
+      this.waypoint.destroy()
+    }
+  }
+
+  Infinite.defaults = {
+    container: 'auto',
+    items: '.infinite-item',
+    more: '.infinite-more-link',
+    offset: 'bottom-in-view',
+    loadingClass: 'infinite-loading',
+    onBeforePageLoad: $.noop,
+    onAfterPageLoad: $.noop
+  }
+
+  Waypoint.Infinite = Infinite
+}())
+;

core/product.go

@@ -26,7 +26,7 @@ type ProdInfo struct {
 // Product returns product edition details
 func Product() (p ProdInfo) {
 	p.Major = "0"
-	p.Minor = "23"
+	p.Minor = "24"
 	p.Patch = "0"
 	p.Version = fmt.Sprintf("%s.%s.%s", p.Major, p.Minor, p.Patch)
 	p.Edition = "Community"

core/section/code/code.go

@@ -27,7 +27,7 @@ func (*Provider) Meta() provider.TypeMeta {
 
 	section.ID = "4f6f2b02-8397-483d-9bb9-eea1fef13304"
 	section.Title = "Code"
-	section.Description = "Formatted code samples supporting 50+ languages"
+	section.Description = "Formatted code snippets"
 	section.ContentType = "code"
 	section.Order = 9997
 

core/section/gemini/gemini.go

@@ -20,8 +20,8 @@ import (
 	"io/ioutil"
 	"net/http"
 
-	"github.com/documize/community/core/section/provider"
 	"github.com/documize/community/core/log"
+	"github.com/documize/community/core/section/provider"
 )
 
 // Provider represents Gemini
@@ -33,7 +33,7 @@ func (*Provider) Meta() provider.TypeMeta {
 	section := provider.TypeMeta{}
 	section.ID = "23b133f9-4020-4616-9291-a98fb939735f"
 	section.Title = "Gemini"
-	section.Description = "Display work items and tickets from workspaces"
+	section.Description = "Work items and tickets"
 	section.ContentType = "gemini"
 
 	return section