Added options on Quiz + Improved UX in pages.quiz and other App aspects
This commit is contained in:
Niko
parent
27eefb7da3
commit
ac4a4ac715
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -3,8 +3,7 @@ body.app {
|
|||
}
|
||||
|
||||
.app > header {
|
||||
background: #f9f9f9;
|
||||
box-shadow: 0px 2px 1px #0000001c;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.panel {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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> {.from.props.place}
|
||||
</span>
|
||||
|
|
@ -22,14 +27,20 @@
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<br><hr><br>
|
||||
<h2 style="color:var(--clr_quiz); padding :0;
|
||||
margin-right: 1em"
|
||||
class="text-center">
|
||||
<i class="fa fa-quote-right fa-fw">
|
||||
</i>FediLove Quiz
|
||||
</h2>
|
||||
<br>
|
||||
<div id="questions"></div>
|
||||
<div class="quiz-content">
|
||||
<h2 style="
|
||||
color: var(--clr_quiz);
|
||||
padding: 0;
|
||||
margin-right: .8em;
|
||||
text-align: center;
|
||||
">
|
||||
<i class="fa fa-quote-right fa-fw">
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -2,18 +2,28 @@
|
|||
<table class="width-max"
|
||||
style="margin-bottom: 1em">
|
||||
<tbody><tr>
|
||||
<td style="width: 2em"><b>{.number}</b></td>
|
||||
<td>{.question}</td>
|
||||
<td style="width: 1.5em"><b>{.number}</b></td>
|
||||
<td style="font-size: 1.1em">{.question}</td>
|
||||
</tr></tbody>
|
||||
</table>
|
||||
<div class="type-freetext">
|
||||
<input class="width-max" type="text"
|
||||
name="question_{.index}"/>
|
||||
</div>
|
||||
<div class="type-options">
|
||||
{loop:options}
|
||||
<div>{.value}</div>
|
||||
{/loop}
|
||||
</div>
|
||||
<br><br>
|
||||
<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>
|
||||
<hr style="max-width:100%">
|
||||
<br>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Reference in New Issue