Added options on Quiz + Improved UX in pages.quiz and other App aspects

web/src/app/css/app.css

@@ -2,6 +2,9 @@ body.app {
 	height: 100vh;
 	overflow: auto;
 }
+.app header {
+	height: 4.5em;
+}
 
 .icon {
 	padding: .7em;
@@ -17,8 +20,25 @@ body.app {
 	top: 2px;
 }
 
+
+input[type="radio"] {
+	width: 1.2em;
+	height: 1.2em;
+	margin-right: .4em;
+	vertical-align: middle;
+
+}
+fieldset {
+	border: none;
+	padding: 0;
+}
+fieldset label > * {
+	vertical-align: middle;
+}
+
+
 hr {
-	color: #00000045;
+	color: #00000029;
 }
 .list hr {
 	max-width: 30%;
@@ -109,6 +129,7 @@ main {
 	user-select: none;
 }
 
+
 #quizs-container h2,
 #quiz h2 {
 	margin: 0;
@@ -117,15 +138,16 @@ main {
 
 #quizs-container h2 > .fa,
 #quiz h2 > .fa {
-	margin-right: .3em;
+	margin-right: .5em;
 	vertical-align: middle;
 }
 #quizs .item {
 	padding: 1em;
-	box-shadow: 0px 0px .5em #0000001a;
+	box-shadow: 0px 0px .3em #00000012;
 	border: 1px solid #0000001c;
 	margin-bottom: .5em;
 	background: #fff;
+	border-radius: 6px;
 }
 #quizs .name {
 	font-size: 1.2em;
@@ -168,6 +190,16 @@ main {
 #quiz hr {
 	max-width: 70%;
 }
+#quiz #questions {
+	padding: 0 .8em;
+	max-width: 32em;
+	margin: auto;
+}
+#quiz .quiz-content {
+	padding: 1.5em 1em;
+	background: #fff;
+	border-top: 10px solid #00000014;
+}
 
 #page-meet {
 	background: #000;

web/src/app/css/base.css

@@ -2,6 +2,13 @@ body {
 	font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,"mastodon-font-sans-serif",sans-serif;
 }
 
+input[type="text"] {
+	border: 1px solid #00000026;
+	padding: .5em;
+	box-shadow: 0px 0px .5em #0000000f;
+	border-radius: 6px;
+}
+
 .button, a[onclick],
 .pointer {
 	cursor: pointer;

web/src/app/css/themes/light.css

@@ -3,8 +3,7 @@ body.app {
 }
 
 .app > header {
-	background: #f9f9f9;
+	background: #fff;
-	box-shadow: 0px 2px 1px #0000001c;
 }
 
 .panel {

web/src/app/js/pages/quiz.js

@@ -54,7 +54,11 @@ app.pages.quiz = {
 				if (k === 'loop:options') {
 					var content = '';
 					for (var j in item.options)
-						content += app.template.fill(item.options[j], v);
+						content += app.template.fill({
+							index: i,
+							item: item.options[j],
+							item_cap: capitalize(item.options[j]),
+						}, v);
 					return content;
 				}
 			});

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

@@ -1,14 +1,19 @@
-<div id="quiz" class="panel flex center item">
+<div id="quiz" style="padding: 0"
+	class="panel flex center item">
 <div class="content center">
-	<div class="person flex width-max">
+	<div style="padding: 1.5em 2em"
+		class="person flex">
 		<div class="width-max">
 			<span class="bigname">{.from.name}</span>
 			<br>
-			<span class="acct">@{.from.acct}</span>
+			<span class="acct" style="
+				position: relative;
+				top: 2px;
+				">@{.from.acct}</span>
 			<br><br>
 			<span>
 				<b>{.from.props.age}</b> {s:app.years_old},
-				<span style="opacity: .5">
+				<span style="opacity: .6">
 					<i class="fa fa-map-marker fa-fw">
 					</i>&nbsp;{.from.props.place}
 				</span>
@@ -22,14 +27,20 @@
 			</a>
 		</div>
 	</div>
-	<br><hr><br>
+	<div class="quiz-content">
-	<h2 style="color:var(--clr_quiz); padding :0;
+		<h2 style="
-		margin-right: 1em"
+		color: var(--clr_quiz);
-		class="text-center">
+		padding: 0;
-		<i class="fa fa-quote-right fa-fw">
+		margin-right: .8em;
-		</i>FediLove Quiz
+		text-align: center;
-	</h2>
+		">
-	<br>
+			<i class="fa fa-quote-right fa-fw">
-	<div id="questions"></div>
+			</i>{s:app.fill_your_crush_quiz}
+		</h2>
+		<h3 class="text-center"
+			>{.content.length} {s:app.questions}</h3>
+		<br><br>
+		<div id="questions"></div>
+	</div>
 </div>
 </div>

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

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

web/src/config/lang/en.php

@@ -20,6 +20,8 @@ $strings = [
 		'meet_empty_p' => 'We are sorry, this FediLove ❤️ instance doesn\'t have enough network and there is noone to meet yet.',
 		'be_the_first' => 'Be the first one!',
 		'quizs_4you' => 'Quizs for you',
+		'fill_your_crush_quiz' => 'Your crush wants you to fill this Quiz',
+		'questions' =< 'questions',
 		'nav' => [
 			'meet' => 'Meet',
 			'crushes' => 'Your crushes',

web/src/config/lang/es.php

@@ -20,6 +20,8 @@ $strings = [
 		'meet_empty_p' => 'Lo sentimos, esta instancia de FediLove ❤️ no tiene suficiente red y todavía no hay nadie para conocer.',
 		'be_the_first' => '¡Se la primera persona!',
 		'quizs_4you' => 'Quizs para tí',
+		'fill_your_crush_quiz' => 'Tu crush quiere que respondas este Quiz',
+		'questions' => 'preguntas',
 		'nav' => [
 			'meet' => 'Conoce',
 			'crushes' => 'Tus crush',