new start document UX

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

@@ -12,20 +12,40 @@
 import Ember from 'ember';
 
 export default Ember.Component.extend({
+    folderService: Ember.inject.service('folder'),
     selectedDocuments: [],
 	moveTarget: null,
-
 	emptyState: Ember.computed('documents', function() {
         return this.get('documents.length') === 0;
     }),
 
     didReceiveAttrs() {
-        this.set('selectedDocuments', []);
 		this.audit.record('viewed-space');
-
+        this.set('selectedDocuments', []);
+        this.set('canCreate', this.get('folderService').get('canEditCurrentFolder'));
         this.set('deleteTargets', this.get('folders').rejectBy('id', this.get('folder.id')));
     },
 
+	didInsertElement() {
+		this._super(...arguments);
+		
+		this.setupAddWizard();
+	},
+
+    setupAddWizard() {
+		Ember.run.schedule('afterRender', () => {
+			$('.start-document:not(.start-document-empty-state)').off('.hoverIntent');
+
+			$('.start-document:not(.start-document-empty-state)').hoverIntent({interval: 100, over: function() {
+				// in
+				$(this).find('.start-button').velocity("transition.slideDownIn", {duration: 300});
+			}, out: function() {
+				// out
+				$(this).find('.start-button').velocity("transition.slideUpOut", {duration: 300});
+			} });
+		});		
+	},
+
     actions: {
         selectDocument(documentId) {
             let doc = this.get('documents').findBy('id', documentId);
@@ -48,6 +68,30 @@ export default Ember.Component.extend({
 
 		onDelete() {
 			this.get("onDeleteSpace")();
-		}	
+		},
+
+        onImport() {
+            this.get('onImport')();
+        },
+
+		onShowDocumentWizard(docId) {
+			if ($("#new-document-wizard").is(':visible') && this.get('docId') === docId) {
+				this.send('onHideDocumentWizard');
+				return;
+			}
+
+			this.set('docId', docId);
+
+			$("#new-document-wizard").insertAfter(`#document-${docId}`);
+			$("#new-document-wizard").velocity("transition.slideDownIn", { duration: 300, complete:
+				function() {
+					$("#new-document-name").focus();
+				}});
+		},
+
+		onHideDocumentWizard() {
+			$("#new-document-wizard").insertAfter('#wizard-placeholder');
+			$("#new-document-wizard").velocity("transition.slideUpOut", { duration: 300 });
+		}
     }
 });

app/app/components/folder/folder-settings.js

@@ -1,43 +0,0 @@
-// 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';
-import AuthMixin from '../../mixins/auth';
-
-const {
-	inject: { service }
-} = Ember;
-
-export default Ember.Component.extend(AuthMixin, {
-	folderService: service('folder'),
-	appMeta: service(),
-	users: [],
-	folders: [],
-	folder: {},
-	moveTarget: null,
-	inviteEmail: "",
-	inviteMessage: "",
-	roleMessage: "",
-	permissions: {},
-
-	getDefaultInvitationMessage() {
-		return "Hey there, I am sharing the " + this.folder.get('name') + " (in " + this.get("appMeta.title") + ") with you so we can both access the same documents.";
-	},
-
-	willRender() {
-		if (this.roleMessage.length === 0) {
-			this.set('roleMessage', this.getDefaultInvitationMessage());
-		}
-	},
-
-	actions: {
-	}
-});

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

@@ -24,33 +24,6 @@ export default Ember.Component.extend(TooltipMixin, NotifierMixin, AuthMixin, {
 	hasPrivateFolders: false,
 	newFolder: '',
 
-	// init() {
-	// 	this._super(...arguments);
-
-	// 	if (this.get('noFolder')) {
-	// 		return;
-	// 	}
-
-	// 	let _this = this;
-	// 	this.get('templateService').getSavedTemplates().then(function(saved) {
-    //         let emptyTemplate = {
-    //             id: "0",
-    //             title: "Empty",
-	// 			description: "An empty canvas for your words",
-	// 			img: "insert_drive_file",
-	// 			layout: "doc",
-	// 			locked: true
-    //         };
-
-	// 		saved.forEach(function(t) {
-	// 			Ember.set(t, 'img', 'content_copy');
-	// 		});
-
-    //         saved.unshiftObject(emptyTemplate);
-    //         _this.set('savedTemplates', saved);
-    //     });
-	// },
-
 	didReceiveAttrs() {
 		let folders = this.get('folders');
 
@@ -83,10 +56,6 @@ export default Ember.Component.extend(TooltipMixin, NotifierMixin, AuthMixin, {
 	},
 
 	actions: {
-		// onImport() {
-		// 	this.attrs.onImport();
-		// },
-
 		addFolder() {
 			var folderName = this.get('newFolder');
 
@@ -99,30 +68,6 @@ export default Ember.Component.extend(TooltipMixin, NotifierMixin, AuthMixin, {
 
 			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/sidebar-zone.js

@@ -46,33 +46,6 @@ export default Ember.Component.extend(TooltipMixin, NotifierMixin, AuthMixin, {
 		}
 	},
 
-
-	// 	this._super(...arguments);
-
-	// 	if (this.get('noFolder')) {
-	// 		return;
-	// 	}
-
-	// 	let _this = this;
-	// 	this.get('templateService').getSavedTemplates().then(function(saved) {
-    //         let emptyTemplate = {
-    //             id: "0",
-    //             title: "Empty",
-	// 			description: "An empty canvas for your words",
-	// 			img: "insert_drive_file",
-	// 			layout: "doc",
-	// 			locked: true
-    //         };
-
-	// 		saved.forEach(function(t) {
-	// 			Ember.set(t, 'img', 'content_copy');
-	// 		});
-
-    //         saved.unshiftObject(emptyTemplate);
-    //         _this.set('savedTemplates', saved);
-    //     });
-	// },
-
 	didReceiveAttrs() {
 		if (!this.get('noFolder')) {
 			let folder = this.get('folder');
@@ -82,34 +55,12 @@ export default Ember.Component.extend(TooltipMixin, NotifierMixin, AuthMixin, {
 		}
 	},
 
-	// navigateToDocument(document) {
-    //     this.attrs.showDocument(this.get('folder'), document);
-    // },
-
 	actions: {
-		// onImport() {
-		// 	this.attrs.onImport();
-		// },
-
 		onFolderAdd(folderName) {
 			this.attrs.onFolderAdd(folderName);
 			return 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);
-        //     });
-        // },
-
 		onChangeTab(tab) {
 			this.set('tab', tab);
 		},

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

@@ -12,13 +12,37 @@
 import Ember from 'ember';
 import NotifierMixin from '../../mixins/notifier';
 
+
+const {
+	computed,
+} = Ember;
 export default Ember.Component.extend(NotifierMixin, {
 	localStorage: Ember.inject.service(),
 	appMeta: Ember.inject.service(),
-
+	templateService: Ember.inject.service('template'),
 	canEditTemplate: "",
 	importedDocuments: [],
+	savedTemplates: [],
 	drop: null,
+	newDocumentName: 'New Document',
+	newDocumentNameMissing: computed.empty('newDocumentName'),
+
+	init() {
+		this._super(...arguments);
+
+		this.get('templateService').getSavedTemplates().then((saved) => {
+            let emptyTemplate = {
+                id: "0",
+                title: "Empty",
+				description: "An empty canvas for your words",
+				layout: "doc",
+				locked: true
+            };
+
+            saved.unshiftObject(emptyTemplate);
+            this.set('savedTemplates', saved);
+        });
+	},
 
 	didInsertElement() {
 		this.setupImport();
@@ -84,8 +108,31 @@ export default Ember.Component.extend(NotifierMixin, {
 	},
 
 	actions: {
+		onHideDocumentWizard() {
+			this.get('onHideDocumentWizard')();
+		},
+
+		editTemplate(template) {
+			this.audit.record('edited-saved-template');
+			this.get('router').transitionTo('document', this.get('folder.id'), this.get('folder.slug'), template.get('id'), template.get('slug'));
+
+			return true;
+		},
+
+		startDocument(template) {
+			this.audit.record('used-saved-template');
+            this.send("showNotification", "Creating");
+
+            this.get('templateService').importSavedTemplate(this.folder.get('id'), template.id).then((document) => {
+				this.get('router').transitionTo('document', this.get('folder.id'), this.get('folder.slug'), document.get('id'), document.get('slug'));
+            });
+
+			return true;
+		},
+
 		onDocumentImporting(filename) {
 			this.send("showNotification", `Importing ${filename}`);
+			this.get('onHideDocumentWizard')();
 
 			let documents = this.get('importedDocuments');
 			documents.push(filename);
@@ -99,25 +146,12 @@ export default Ember.Component.extend(NotifierMixin, {
 			documents.pop(filename);
 			this.set('importedDocuments', documents);
 
-			this.attrs.onImport();
+			this.get('onImport')();
 
 			if (documents.length === 0) {
 				// this.get('showDocument')(this.get('folder'), document);
 			}
 		},
-
-		editTemplate(template) {
-			this.audit.record('edited-saved-template');
-			this.attrs.onEditTemplate(template);
-
-			return true;
-		},
-
-		startDocument(template) {
-			this.audit.record('used-saved-template');
-			this.attrs.onDocumentTemplate(template.id, template.title, "private");
-
-			return true;
-		}
 	}
 });
+

app/app/pods/folder/controller.js

@@ -22,10 +22,6 @@ export default Ember.Controller.extend(NotifierMixin, {
 	tab: 'index',
 
 	actions: {
-		onImport() {
-			this.get('target.router').refresh();
-		},
-
 		onDocumentsChecked(documents) {
 			this.set('selectedDocuments', documents);
 			this.set('hasSelectedDocuments', documents.length > 0);
@@ -64,10 +60,6 @@ export default Ember.Controller.extend(NotifierMixin, {
 			this.send("showNotification", "Deleted");
 		},
 
-		showDocument(folder, document) {
-			this.transitionToRoute('document', folder.get('id'), folder.get('slug'), document.get('id'), document.get('slug'));
-		},
-
 		onFolderAdd(folder) {
 			let self = this;
 			this.showNotification("Added");
@@ -84,6 +76,10 @@ export default Ember.Controller.extend(NotifierMixin, {
 				this.get('localStorage').clearSessionItem('folder');
 				this.transitionToRoute('application');
 			});
+		},
+
+		onImport() {
+			this.get('target.router').refresh();
 		}
 	}
 });

app/app/pods/folder/route.js

@@ -18,20 +18,36 @@ export default Ember.Route.extend(AuthenticatedRouteMixin, {
 	session: Ember.inject.service(''),
 	folder: {},
 
-	model: function (params) {
+	beforeModel() {
+		this.set('folderId', this.paramsFor('folder').folder_id)
+
+		return new Ember.RSVP.Promise((resolve) => {
+			this.get('folderService').getFolder(this.get('folderId')).then((folder) => {
+				this.set('folder', folder);
+
+				this.get('folderService').setCurrentFolder(folder).then(() => {
+					this.set('isEditor', this.get('folderService').get('canEditCurrentFolder'));
+					this.set('isFolderOwner', this.get('session.user.id') === folder.get('userId'));
+				
+					resolve();
+				});
+			});
+		});
+	},
+
+	model(params) {
 		return Ember.RSVP.hash({
-			folder: this.get('folderService').getFolder(params.folder_id),
+			folder: this.get('folder'),
+			isEditor: this.get('isEditor'),
+			isFolderOwner: this.get('isFolderOwner'),
 			folders: this.get('folderService').getAll(),
 			documents: this.get('documentService').getAllByFolder(params.folder_id)
 		});
 	},
 
-	setupController: function (controller, model) {
+	setupController(controller, model) {
 		controller.set('model', model);
 		this.browser.setTitle(model.folder.get('name'));
-		this.get('folderService').setCurrentFolder(model.folder);
-        controller.set('isEditor', this.get('folderService').get('canEditCurrentFolder'));
-        controller.set('isFolderOwner', this.get('session.user.id') === model.folder.get('userId'));
 	},
 
 	actions: {

app/app/pods/folder/template.hbs

@@ -1,14 +1,14 @@
 {{layout/zone-navigation}}
 {{#layout/zone-container}}
 	{{#layout/zone-sidebar}}
-		{{folder/sidebar-zone folders=model.folders folder=model.folder isFolderOwner=isFolderOwner isEditor=isEditor tab=tab
+		{{folder/sidebar-zone folders=model.folders folder=model.folder isFolderOwner=model.isFolderOwner isEditor=model.isEditor tab=tab
 		onFolderAdd=(action 'onFolderAdd')}}
 	{{/layout/zone-sidebar}}
 	{{#layout/zone-content}}
-		{{folder/folder-heading folder=model.folder  isFolderOwner=isFolderOwner isEditor=isEditor}}
+		{{folder/folder-heading folder=model.folder  isFolderOwner=model.isFolderOwner isEditor=model.isEditor}}
 		{{folder/folder-toolbar folders=model.folders folder=model.folder hasSelectedDocuments=hasSelectedDocuments
 			onDeleteDocument=(action 'onDeleteDocument') onMoveDocument=(action 'onMoveDocument')}}
-		{{folder/documents-list documents=model.documents folders=model.folders folder=model.folder isFolderOwner=isFolderOwner 
+		{{folder/documents-list documents=model.documents folders=model.folders folder=model.folder isFolderOwner=model.isFolderOwner isEditor=model.isEditor
-			onDocumentsChecked=(action 'onDocumentsChecked') onDeleteSpace=(action 'onDeleteSpace')}}
+			onDocumentsChecked=(action 'onDocumentsChecked') onDeleteSpace=(action 'onDeleteSpace') onImport=(action 'onImport')}}
 	{{/layout/zone-content}}
 {{/layout/zone-container}}

app/app/services/folder.js

@@ -208,6 +208,7 @@ export default BaseService.extend({
 					canEdit = permission.canEdit;
 				}
 			});
+			
 			Ember.run(() => {
 				this.set('canEditCurrentFolder', canEdit && this.get('sessionService.authenticated'));
 			});

app/app/styles/view/folder/document.scss

@@ -24,12 +24,9 @@
 .documents-list {
 	> .document {
 		@include content-container();
-		margin-bottom: 30px;
+		margin: 0;
-		// padding: 20px 20px 25px;
-		// width: 100%;
 		position: relative;
 		transition: 0.3s;
-		// border-bottom: 1px solid $color-border;
 
 		&:hover {
 			> .link {
@@ -85,6 +82,16 @@
 		}
 	}
 
+	> .wizard-item {
+		margin: 0;
+		padding: 0;
+	}
+
+	> .no-wizard-item {
+		margin: 50px 0;
+		padding: 0;
+	}
+
 	> .selected-card {
 		background-color: $color-card-active !important;
 

app/app/styles/view/folder/wizard.scss

@@ -1,15 +1,77 @@
 .start-document {
-	> .import-document-button {
+	@extend .no-select;
+	height: 60px;
+	background-color: transparent;
+	position: relative;
+	cursor: pointer;
+
+	> .start-button {
+		display: none;
+		text-align: center;
+		padding-top: 20px;
+		color: $color-green;
+		font-size: 1rem;
+		position: relative;
+
+		> .round-button {
+			opacity: 0.6 !important;
+		}
+
+		> .label {
+			display: inline-block;
+			margin-left: 10px;
+		}
+
+		> .line {
+			display: inline-block;
+			height: 1px;
+			border: 1px solid $color-green;
+			width: 100px;
+			margin: 0 20px 0 20px;
+			opacity: 0.2;
+		}
+	}
+
+	&:first-of-type {
+		height: 30px;
+
+		> .start-button {
+			padding-top: 0;
+		}
+	}
+}
+
+.start-document-empty-state {
+	> .start-button {
+		display: block;
+	}
+}
+
+.new-document-wizard {
+	@include border-radius(2px);
+	margin: 30px 0 30px 0;
+	padding: 30px;
+	border: 1px solid $color-stroke;
+	background-color: $color-off-white;
+	display: none;
+
+	.document-name {
+		font-weight: bold;
+		font-size: 1.5rem;
+		margin: 0 0 30px 0;
+		color: $color-black;
+	}
+
+	.import-document-button {
 		width: 100%;
 		padding: 20px;
-		margin: 30px 0;
+		margin: 0 0 30px 0;
 		text-align: center;
 		color: $color-gray;
-		border: 2px dotted $color-gray;
+		border: 1px solid $color-stroke;
 		cursor: pointer;
 		font-size: 1rem;
 		line-height: 1.7rem;
-		@include border-radius(10px);
 		@include ease-in();
 
 		&:hover {
@@ -23,83 +85,78 @@
 		}
 	}
 
-	> .templates-list {
+	> .list-wrapper {
-		margin: 0;
+		// height: 440px;
+		// overflow-y: auto;
 
-		> .list {
+		> .template-list {
 			margin: 0;
 			padding: 0;
 
 			> .item {
-				cursor: pointer;
-				list-style: none;
-				padding: 10px 5px;
-				margin: 10px 0;
-				min-height: 90px;
 				@include ease-in();
+				@include border-radius(4px);
+				list-style: none;
+				cursor: pointer;
+				display: inline-block;
+				border: 1px solid $color-stroke;
+				background-color: $color-white;
+				margin: 0 20px 20px 0;
+				padding: 12px 0 0 20px;
+				width: 423px;
+				height: 60px;
+				position: relative;
 
 				&:hover {
-					> .icon {
+					@include ease-in();
-						> .edit-control {
+					border-color: $color-link;
-							display: block;
+
-						}
+					> .template-actions {
+						display: block;
 					}
 				}
 
-				.icon {
+				> .template-actions {
-					text-align: center;
+					@include ease-in();
-					display: inline-block;
+					display: none;
-					width: 50px;
+					position: absolute;
+					top: 10px;
+					right: 8px;
 
-					> .img {
+					.material-icons {
-						text-align: center;
+						color: $color-stroke;
-						display: inline-block;
+						font-size: 1rem;
-						height: 40px;
-						width: 40px;
-					}
-
-					> .edit-control {
-						display: none;
-						vertical-align: top;
-						text-align: center;
-						margin-top: 5px;
-						opacity: 0.5;
-						cursor: pointer;
-						color: $color-gray;
-
-						&:hover {
-							color: $color-link;								
-						}
 					}
 				}
 
 				> .details {
-					vertical-align: top;
+					width: 350px;
-					display: inline-block;
+					overflow: hidden;
-					width: 80%;
+					text-overflow: ellipsis;
-					cursor: pointer;
+					white-space: nowrap;
 
 					> .title {
 						font-size: 1rem;
-						font-weight: bold;
+						font-weight: normal;
 						color: $color-off-black;
 						letter-spacing: 0.5px;
+						margin-top: 0;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
 					}
 
 					> .desc {
 						color: $color-gray;
-						font-size: 0.9rem;
+						font-size: 0.8rem;
 						margin-top: 5px;
-					}
+						overflow: hidden;
-
+						text-overflow: ellipsis;
-					&:hover {
+						white-space: nowrap;
-						 > .title,
-						> .desc {
-							color: $color-link !important;
-						}
 					}
 				}
 			}
 		}
 	}
 }
+

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

@@ -1,6 +1,6 @@
 <ul class="documents-list">
 	{{#each documents key="id" as |document|}}
-		<li class="document {{if document.selected "selected-card"}}">
+		<li id="document-{{document.id}}" class="document {{if document.selected "selected-card"}}">
 			{{#link-to 'document.index' folder.id folder.slug document.id document.slug class="link"}}
 				<div class="title">{{ document.name }}</div>
 				<div class="snippet">{{ document.excerpt }}</div>
@@ -16,9 +16,24 @@
 				{{/if}}
 			</div>
 		</li>
+		{{#if canCreate}}
+			<li class="wizard-item start-document" {{action 'onShowDocumentWizard' document.id}}>
+				<div class="start-button">
+					<div class="round-button round-button-small button-green">
+						<i class="material-icons">add</i>
+					</div>
+					<div class="label">document</div>
+				</div>
+			</li>
+		{{else}}
+			<li class="no-wizard-item" />
+		{{/if}}
 	{{/each}}
 </ul>
 
+<div id="wizard-placeholder" class="hide margin-top-50" />
+{{folder/start-document folder=folder isEditor=isEditor onImport=(action 'onImport') onHideDocumentWizard=(action 'onHideDocumentWizard')}}
+
 {{#if emptyState}}
 	<div class="regular-button button-red" {{action 'onDelete'}}>delete</div>
 {{/if}}

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

@@ -1,17 +0,0 @@
-<div class="folder-settings">
-
-	{{#if tabPermissions}}
-		<div class="form-bordered">
-			<div class="form-header">
-		        <div class="title">Permissions</div>
-		        <div class="tip">Decide who can see and edit within this space</div>
-		    </div>
-			<div class="input-control">
-				<label>Permissions</label>
-				<div class="tip">The message that gets sent to new invites for <strong>{{folder.name}}</strong></div>
-				{{textarea id="explainRole" value=roleMessage rows=3}}
-			</div>
-
-	    </div>
-	{{/if}}
-</div>

app/app/templates/components/folder/sidebar-zone.hbs

@@ -49,7 +49,7 @@
 </div>
 
 <div class="sidebar-common">
-	{{layout/sidebar-intro title=appMeta.title message=appMeta.message}}
+		{{layout/sidebar-intro title=appMeta.title message=appMeta.message}}
 </div>
 
 <div class="sidebar-wrapper">

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

@@ -1,31 +1,35 @@
-<div class="start-document">
+<div id="new-document-wizard" class="new-document-wizard">
+
+	<div class="input-inline input-transparent pull-left width-80">
+		{{input type="text" id="new-document-name" value=newDocumentName class=(if newDocumentNameMissing 'document-name error-inline' 'document-name') placeholder="Name" autocomplete="off"}}
+	</div>
+	<div class="round-button-mono pull-right" {{action 'onHideDocumentWizard'}}>
+		<i class="material-icons color-gray">close</i>
+	</div>
+	<div class="clearfix" />
+
 	<div id="import-document-button" class="import-document-button">
-		Drag-drop .doc, .docx, .txt, .md, .markdown<br/>
+		Drag-drop or click to select .doc, .docx, .txt, .md, .markdown files
-		or click to select files
 	</div>
 
-	<div class="templates-list">
+	<div class="list-wrapper">
-		<ul class="list">
+		<ul class="template-list">
 			{{#each savedTemplates key="id" as |template|}}
 				<li class="item">
-					<div class="icon">
+					{{#if isEditor}}
-						<div class="symbol" {{action 'startDocument' template}}>
+						{{#unless template.locked}}
-							<i class="material-icons">{{template.img}}</i>
+							<div class="template-actions">
-						</div>
+								<i class="material-icons" {{action 'editTemplate' template}}>mode_edit</i>
-						{{#if editor}}
+							</div>
-							{{#unless template.locked}}
+						{{/unless}}
-								<i class="material-icons edit-control" {{action 'editTemplate' template}}>mode_edit</i>
+					{{/if}}
-							{{/unless}}
-						{{/if}}
-					</div>
 					<div class="details" {{action 'startDocument' template}}>
-						<div class='title'>
+						<div class='title'>{{template.title}}</div>
-							{{template.title}}
-						</div>
 						<div class='desc'>{{template.description}}</div>
 					</div>
 				</li>
 			{{/each}}
 		</ul>
 	</div>
+
 </div>