Added custom emoji in pages.home quizs + improve UX

web/src/app/css/app.css

@@ -20,10 +20,21 @@ body.app {
 hr {
 	color: #00000045;
 }
+.list hr {
+	max-width: 80%;
+}
 
 img.avatar {
 	width: 2.6em;
 }
+.list .emoji {
+	width: 1.2em;
+	height: 1.2em;
+	vertical-align: middle;
+	position: relative;
+	top: -2px;
+	margin-right: 3px;
+}
 
 a.button {
 	text-decoration: none;
@@ -99,6 +110,7 @@ main {
 #quiz .avatar.round {
 	padding: 3px;
 	background: linear-gradient(30deg, #df00ff, pink, pink, #7c4cff);
+	box-shadow: -6px 4px 0px #0000004f;
 }
 #quizs .avatar img,
 #quiz .avatar img {

web/src/app/js/pages/home.js

@@ -35,10 +35,15 @@ app.pages.home = {
 		container.innerHTML = '';
 		for (var i in data) {
 			const item = data[i];
-			var tpl = app.template.fill(item, app.template.get('home.quiz_item'));
+			var tpl = app.template.fill(item, app.template.get('home.quiz_item'),
+			function(k,v) {
+				console.log(v);
+				if (k === 'from.name') return app.emoji.expand(capitalize(v));
+			});
 			if (item.responses === undefined)
 				tpl = tpl.replaceAll('{newOrAnsweredItem}', '<span class="new">NEW</span>');
 			else tpl = tpl.replaceAll('{newOrAnsweredItem}', '<span class="old">ANSWERED</span>');
+			tpl += '<hr>';
 			container.innerHTML += tpl;
 		}
 	},

web/src/app/js/templates/home/index.html

@@ -5,6 +5,6 @@
 			<i class="fa fa-quote-right fa-fw">
 			</i>Quizs for you</h2>
 		<br>
-		<div id="quizs"></div>
+		<div id="quizs" class="list"></div>
 	</div>
 </div>