Add mesage for empty dashboard

crcastle · Oct 6, 2013 · ac8550b · ac8550b
1 parent ccdab9d
commit ac8550b
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 3 deletions.
diff --git a/client/resources/templates/reports.html b/client/resources/templates/reports.html
@@ -10,6 +10,12 @@
 		</div>
 		<% }); %>
 	<% } else { %>
-
+		<div class="reports-empty">
+			<p class="icon"><i class="icon-bar-chart"></i></p>
+			<h3>No reports yet</h3>
+			<p>Start tracking events to add reports to this dashboard.</p>
+			<p>Install the Google Chrome extension to track your web navigation or use the API to track personnalized events.</p>
+			<p><a href="https://github.com/SamyPesse/reportr" target="_blank">Learn more</a></p>
+		</div>
 	<% } %>
 </div>
diff --git a/client/stylesheets/dashboard.less b/client/stylesheets/dashboard.less
@@ -84,5 +84,25 @@
 			padding: 15px;
 			margin-bottom: 20px;
 		}
+
+		.reports-empty {
+			margin-top: 50px;
+			max-width: 400px;
+			margin-right: auto;
+			margin-left: auto;
+			text-align: center;
+
+			color: #333;
+
+			p {
+				font-size: 16px;
+			}
+
+			.icon {
+				font-size: 100px;
+				line-height: 120px;
+				opacity: 0.6;
+			}
+		}
 	}
 }
diff --git a/public/static/application.css b/public/static/application.css
@@ -1245,6 +1245,8 @@ a .icon-rotate-90:before,a .icon-rotate-180:before,a .icon-rotate-270:before,a .
 #dashboard #lateralbar .footer{position:absolute;bottom:0px;left:0px;right:0px;padding:10px;background:#2ecc71;}#dashboard #lateralbar .footer .menu-action{display:inline-block;width:30px;height:30px;color:#fff;line-height:30px;font-size:30px;opacity:0.6;text-align:center;margin:0px 8px;}#dashboard #lateralbar .footer .menu-action:hover{text-decoration:none;opacity:1;}
 #dashboard #lateralbar .models{position:absolute;right:15px;left:15px;bottom:50px;top:65px;}
 #dashboard #body{position:absolute;bottom:0px;right:0px;top:0px;left:320px;padding:15px;overflow-y:auto;}#dashboard #body .event-summary{background:#fff;border-radius:8px;padding:15px;margin-bottom:20px;}
+#dashboard #body .reports-empty{margin-top:50px;max-width:400px;margin-right:auto;margin-left:auto;text-align:center;color:#333;}#dashboard #body .reports-empty p{font-size:16px;}
+#dashboard #body .reports-empty .icon{font-size:100px;line-height:120px;opacity:0.6;}
 .models-list{list-style:none;margin:0px;padding:0px;}.models-list li{padding:4px 6px;min-height:40px;line-height:32px;color:#fff;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.models-list li img{width:32px;height:32px;border:1px solid #fff;background:#fff;}
 .models-list li:hover{background:rgba(0, 0, 0, 0.12);}
 .models-list li .action{color:#fff;float:right;margin:0px 3px;}.models-list li .action:hover{color:#fff;text-decoration:none;}

diff --git a/public/static/application.js b/public/static/application.js
@@ -25527,7 +25527,7 @@ Logger, Requests, Urls, Storage, Cache, Template, Resources, Deferred, Queue, I1
         }
     }
 });
-define('hr/args',[],function() { return {"revision":1381089928919,"baseUrl":"/"}; });
+define('hr/args',[],function() { return {"revision":1381093933403,"baseUrl":"/"}; });
 //! moment.js
 //! version : 2.2.1
 //! authors : Tim Wood, Iskren Chernev, Moment.js contributors

diff --git a/public/static/templates/reports.html b/public/static/templates/reports.html
@@ -10,6 +10,12 @@
 		</div>
 		<% }); %>
 	<% } else { %>
-
+		<div class="reports-empty">
+			<p class="icon"><i class="icon-bar-chart"></i></p>
+			<h3>No reports yet</h3>
+			<p>Start tracking events to add reports to this dashboard.</p>
+			<p>Install the Google Chrome extension to track your web navigation or use the API to track personnalized events.</p>
+			<p><a href="https://github.com/SamyPesse/reportr" target="_blank">Learn more</a></p>
+		</div>
 	<% } %>
 </div>