Improved UX + change form of quiz to be global

web/src/app/css/app.css

@@ -2,6 +2,12 @@ body.app {
 	height: 100vh;
 	overflow: auto;
 }
+body.app.fullscreen {
+	display: flex;
+}
+body.app.fullscreen main {
+	margin: auto !important;
+}
 .app header {
 	height: 4.5em;
 }
@@ -124,6 +130,14 @@ main {
 	max-width: var(--content_max_width);
 	width: 100%;
 }
+.panel .card-item {
+	padding: 1em;
+	box-shadow: 0px 2px .3em #0000001c;
+	border: 1px solid #0000001c;
+	margin-bottom: .5em;
+	background: #fff;
+	border-radius: 6px;
+}
 
 .button span {
 	user-select: none;
@@ -141,14 +155,6 @@ main {
 	margin-right: .5em;
 	vertical-align: middle;
 }
-#quizs .item {
-	padding: 1em;
-	box-shadow: 0px 0px .3em #00000012;
-	border: 1px solid #0000001c;
-	margin-bottom: .5em;
-	background: #fff;
-	border-radius: 6px;
-}
 #quizs .name {
 	font-size: 1.2em;
 }
@@ -190,6 +196,18 @@ main {
 #quiz hr {
 	max-width: 70%;
 }
+#quiz .person {
+	position: sticky;
+	top: 0;
+	background: #f9f9f9;
+	border-bottom: 10px solid #00000014;
+}
+#quiz .person .lovebg {
+	padding: 1.5em 2em;
+	background-image: url(https://dev-fedilove.nogafam.es/assets/images/lovebg_right.png);
+	background-repeat: no-repeat;
+	background-position: right;
+}
 #quiz #questions {
 	padding: 0 .8em;
 	max-width: 32em;
@@ -198,7 +216,6 @@ main {
 #quiz .quiz-content {
 	padding: 1.5em 1em;
 	background: #fff;
-	border-top: 10px solid #00000014;
 }
 
 #page-meet {

web/src/app/js/app.js

@@ -251,12 +251,14 @@ app.fullscreen = {
 		el.classList.add('absolute-top');
 		el.classList.add('width-max');
 		document.querySelector('header').style.display = 'none';
+		document.body.classList.add('fullscreen');
 	},
 	disable: function() {
 		const el = document.querySelector('main');
 		el.classList.remove('absolute-top');
 		el.classList.remove('width-max');
 		document.querySelector('header').removeAttribute('style');
+		document.body.classList.remove('fullscreen')
 	},
 }
 

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

@@ -1,4 +1,4 @@
-<div class="item button dark rounder" data-id="{._id}"
+<div class="card-item item button dark rounder" data-id="{._id}"
 	onclick="app.pages.home.loadQuiz('{.id}')"
 	onEnter="app.pages.home.loadQuiz('{.id}')"
 	tabindex="0">

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

@@ -1,8 +1,8 @@
-<div id="quiz" style="padding: 0"
+<form id="quiz" style="padding: 0"
 	class="panel flex center item">
 <div class="content center">
-	<div style="padding: 1.5em 2em"
-		class="person flex">
+	<div class="person">
+	<div class="lovebg flex">
 		<div class="width-max">
 			<span class="bigname">{.from.name}</span>
 			<br>
@@ -27,6 +27,7 @@
 			</a>
 		</div>
 	</div>
+	</div>
 	<div class="quiz-content">
 		<h2 style="
 		color: var(--clr_quiz);
@@ -43,4 +44,4 @@
 		<div id="questions"></div>
 	</div>
 </div>
-</div>
+</form>

web/src/app/js/templates/quiz/item.html

@@ -6,24 +6,22 @@
 			<td style="font-size: 1.1em">{.question}</td>
 		</tr></tbody>
 	</table>
-	<form>
-		<div class="type-freetext">
-			<input class="width-max" type="text"
-				name="question_{.index}"/>
-		</div>
-		<div class="type-options">
-			<fieldset class="flex">
-			{loop:options}
-			<label class="width-max">
-				<input type="radio" name="question_{.index}"
-					value="{.item}">
-				<span>{.item_cap}</span>
-			</label>
-			{/loop}
-			</fieldset>
-		</div>
-	</form>
-	<br>
+	<div class="type-freetext">
+		<input class="width-max" type="text"
+			name="question_{.index}"/>
+	</div>
+	<div class="type-options">
+		<fieldset class="flex">
+		{loop:options}
+		<label class="width-max">
+			<input type="radio" name="question_{.index}"
+				value="{.item}">
+			<span>{.item_cap}</span>
+		</label>
+		{/loop}
+		</fieldset>
+	</div>
+	<br><br>
 	<hr style="max-width:100%">
 	<br>
 </div>