improved empty state

documize · Oct 30, 2016 · 20292a3 · 20292a3
1 parent 257f8fa
commit 20292a3
Show file tree

Hide file tree

Showing 8 changed files with 644 additions and 677 deletions.
diff --git a/app/app/styles/view/document/content.scss b/app/app/styles/view/document/content.scss
@@ -110,23 +110,7 @@
 	}
 }
 
-.no-sections {
+.empty-state-document {
+	margin-top: 150px;
 	text-align: center;
-	opacity: 0.5;
-
-	> .box {
-		padding: 35px;
-		display: inline-block;
-		margin: 0 20px;
-
-		> .message {
-			font-size: 14px;
-			color: $color-off-black;
-			margin-top: 20px;
-		}
-
-		> .regular-button {
-			cursor: default !important;
-		}
-	}
 }
diff --git a/app/app/styles/view/page-documents.scss b/app/app/styles/view/page-documents.scss
@@ -173,31 +173,9 @@
 	}
 }
 
-.no-documents {
+.empty-state-space {
 	margin-top: 150px;
 	text-align: center;
-	opacity: 0.5;
-	background-image: url("/assets/img/no-documents.png");
-	background-repeat: no-repeat;
-	background-position: center;
-
-	> .box {
-		max-width: 400px;
-    	margin: 0 auto;
-    	border: 1px dashed #b3adad;
-    	padding: 20px;
-
-		> .message {
-			font-size: 14px;
-			color: $color-off-black;
-			margin-top: 20px;
-			line-height: 50px;
-		}
-
-		> .regular-button {
-			cursor: default !important;
-		}
-	}
 }
 
 .templates-list {

diff --git a/app/app/templates/components/document/document-view.hbs b/app/app/templates/components/document/document-view.hbs
@@ -61,14 +61,7 @@
 </div>
 
 {{#if noSections}}
-	<div class="no-sections">
-		<div class="box">
-			<div class="message">Click the
-				<div class="round-button-mono">
-					<i class="material-icons color-gray">add</i>
-					<div class="name">section</div>
-				</div>
-				to add a new section to this document</div>
-		</div>
+	<div class="empty-state-document">
+		<img src="/assets/img/empty-state-document.gif" />
 	</div>
 {{/if}}
diff --git a/app/app/templates/components/folder/documents-list.hbs b/app/app/templates/components/folder/documents-list.hbs
@@ -20,18 +20,7 @@
 </ul>
 
 {{#if emptyState}}
-	<div class="no-documents">
-		<div class="box">
-			<h3>This space is empty</h3>
-			<div class="message">Click the
-				<div class="round-button-mono">
-					<i class="material-icons color-gray">add</i>
-				</div> button to add a new document<br/>or
-				<div class="round-button-mono">
-					<i class="material-icons color-gray">file_upload</i>
-				</div>
-				to import .doc .docx, .txt .md files
-			</div>
-		</div>
+	<div class="empty-state-space">
+		<img src="/assets/img/empty-state-space.gif" />
 	</div>
 {{/if}}
diff --git a/app/public/assets/img/empty-state-document.gif b/app/public/assets/img/empty-state-document.gif
diff --git a/app/public/assets/img/empty-state-space.gif b/app/public/assets/img/empty-state-space.gif
diff --git a/app/public/assets/img/no-documents.png b/app/public/assets/img/no-documents.png
diff --git a/embed/bindata_assetfs.go b/embed/bindata_assetfs.go