UX improvements on pages.home quizs

web/src/app/app.php

@@ -17,7 +17,7 @@ $actor = $database->getActorByUsername($user->username);
 ]) ?>
 
 <main class="flex">
-	<div id="app-container" class="flex center width-max"></div>
+	<div id="app-container" class="center width-max"></div>
 </main>
 
 <div id="page-meet" style="display:none"

web/src/app/css/app.css

@@ -21,12 +21,15 @@ hr {
 	color: #00000045;
 }
 .list hr {
-	max-width: 80%;
+	max-width: 30%;
 }
 
 img.avatar {
 	width: 2.6em;
 }
+.avatar img {
+	background: #000;
+}
 .list .emoji {
 	width: 1.2em;
 	height: 1.2em;
@@ -59,7 +62,7 @@ main {
 	margin: .8em .4em;
 }
 @media (max-width: 700px) {
-	main { margin: .4em !important; }
+	main { margin: .4em !important }
 }
 
 #nav-container {
@@ -85,10 +88,12 @@ main {
 }
 
 .panel {
-	margin: .8em .4em;
+	margin-bottom: .8em;
 	border-radius: 4px;
 	padding: 1.5em 1em;
-	width: 100%;
+}
+@media (max-width: 700px) {
+	.panel { margin-bottom: .4em !important }
 }
 .panel .content {
 	max-width: var(--content_max_width);
@@ -100,7 +105,10 @@ main {
 }
 
 #quizs-container h2,
-#quiz h2 { margin: 0 }
+#quiz h2 {
+	margin: 0;
+	padding-left: .5em;
+}
 
 #quizs-container h2 > .fa,
 #quiz h2 > .fa {
@@ -109,6 +117,10 @@ main {
 }
 #quizs .item {
 	padding: 1em;
+	box-shadow: 0px 0px .5em #0000001a;
+	border: 1px solid #0000001c;
+	margin-bottom: .5em;
+	background: #fff;
 }
 #quizs .name {
 	font-size: 1.2em;

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

@@ -43,7 +43,6 @@ app.pages.home = {
 			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;
 		}
 	},