From c33f833a6b6445d185e7c3673e99f0667ff37776 Mon Sep 17 00:00:00 2001
From: Niko <niko@nobigtech.es>
Date: Wed, 23 Feb 2022 09:20:59 +0100
Subject: [PATCH] Added custom emoji in pages.home quizs + improve UX

---
 web/src/app/css/app.css                  | 12 ++++++++++++
 web/src/app/js/pages/home.js             |  7 ++++++-
 web/src/app/js/templates/home/index.html |  2 +-
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/web/src/app/css/app.css b/web/src/app/css/app.css
index 8c8034c..5f70335 100644
--- a/web/src/app/css/app.css
+++ b/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 {
diff --git a/web/src/app/js/pages/home.js b/web/src/app/js/pages/home.js
index 080cc27..8bb9f03 100644
--- a/web/src/app/js/pages/home.js
+++ b/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;
 		}
 	},
diff --git a/web/src/app/js/templates/home/index.html b/web/src/app/js/templates/home/index.html
index 6aace73..ebf26c1 100644
--- a/web/src/app/js/templates/home/index.html
+++ b/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>