From ac4a4ac7155d49a9a2d7dafaf207e9c63e9d0233 Mon Sep 17 00:00:00 2001 From: Niko Date: Thu, 24 Feb 2022 00:59:10 +0100 Subject: [PATCH] Added options on Quiz + Improved UX in pages.quiz and other App aspects --- web/src/app/css/app.css | 38 ++++++++++++++++++++++-- web/src/app/css/base.css | 7 +++++ web/src/app/css/themes/light.css | 3 +- web/src/app/js/pages/quiz.js | 6 +++- web/src/app/js/templates/quiz/index.html | 37 +++++++++++++++-------- web/src/app/js/templates/quiz/item.html | 34 +++++++++++++-------- web/src/config/lang/en.php | 2 ++ web/src/config/lang/es.php | 2 ++ 8 files changed, 98 insertions(+), 31 deletions(-) diff --git a/web/src/app/css/app.css b/web/src/app/css/app.css index 0e45f2a..3d7d53c 100644 --- a/web/src/app/css/app.css +++ b/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; diff --git a/web/src/app/css/base.css b/web/src/app/css/base.css index e11b5ff..3f907f8 100644 --- a/web/src/app/css/base.css +++ b/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; diff --git a/web/src/app/css/themes/light.css b/web/src/app/css/themes/light.css index ca10ebc..038bc8d 100644 --- a/web/src/app/css/themes/light.css +++ b/web/src/app/css/themes/light.css @@ -3,8 +3,7 @@ body.app { } .app > header { - background: #f9f9f9; - box-shadow: 0px 2px 1px #0000001c; + background: #fff; } .panel { diff --git a/web/src/app/js/pages/quiz.js b/web/src/app/js/pages/quiz.js index e845361..4d80eee 100644 --- a/web/src/app/js/pages/quiz.js +++ b/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; } }); diff --git a/web/src/app/js/templates/quiz/index.html b/web/src/app/js/templates/quiz/index.html index 4bc71dd..88e3f6d 100644 --- a/web/src/app/js/templates/quiz/index.html +++ b/web/src/app/js/templates/quiz/index.html @@ -1,14 +1,19 @@ -
+
-
+
{.from.name}
- @{.from.acct} + @{.from.acct}

{.from.props.age} {s:app.years_old}, - +  {.from.props.place} @@ -22,14 +27,20 @@
-

-

- - FediLove Quiz -

-
-
+
+

+ + {s:app.fill_your_crush_quiz} +

+

{.content.length} {s:app.questions}

+

+
+
diff --git a/web/src/app/js/templates/quiz/item.html b/web/src/app/js/templates/quiz/item.html index d041b6b..757b2fd 100644 --- a/web/src/app/js/templates/quiz/item.html +++ b/web/src/app/js/templates/quiz/item.html @@ -2,18 +2,28 @@ - - + +
{.number}{.question}{.number}{.question}
-
- -
-
- {loop:options} -
{.value}
- {/loop} -
-

+
+
+ +
+
+
+ {loop:options} + + {/loop} +
+
+
+
+
+
diff --git a/web/src/config/lang/en.php b/web/src/config/lang/en.php index cd5c4bd..3ee6601 100644 --- a/web/src/config/lang/en.php +++ b/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', diff --git a/web/src/config/lang/es.php b/web/src/config/lang/es.php index 719a492..eae3843 100644 --- a/web/src/config/lang/es.php +++ b/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',