diff --git a/web/data/assets/images/lovebg_right.png b/web/data/assets/images/lovebg_right.png new file mode 100644 index 0000000..dba01d5 Binary files /dev/null and b/web/data/assets/images/lovebg_right.png differ diff --git a/web/src/app/css/app.css b/web/src/app/css/app.css index 3d7d53c..ca7f1e7 100644 --- a/web/src/app/css/app.css +++ b/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 { diff --git a/web/src/app/js/app.js b/web/src/app/js/app.js index 2c56e26..1036bea 100644 --- a/web/src/app/js/app.js +++ b/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') }, } diff --git a/web/src/app/js/templates/home/quiz_item.html b/web/src/app/js/templates/home/quiz_item.html index f5b300d..d480494 100644 --- a/web/src/app/js/templates/home/quiz_item.html +++ b/web/src/app/js/templates/home/quiz_item.html @@ -1,4 +1,4 @@ -
diff --git a/web/src/app/js/templates/quiz/index.html b/web/src/app/js/templates/quiz/index.html index 88e3f6d..9e498b6 100644 --- a/web/src/app/js/templates/quiz/index.html +++ b/web/src/app/js/templates/quiz/index.html @@ -1,8 +1,8 @@ -
-
+
+
{.from.name}
@@ -27,6 +27,7 @@
+

-
+ diff --git a/web/src/app/js/templates/quiz/item.html b/web/src/app/js/templates/quiz/item.html index 757b2fd..6332a86 100644 --- a/web/src/app/js/templates/quiz/item.html +++ b/web/src/app/js/templates/quiz/item.html @@ -6,24 +6,22 @@ {.question} -
-
- -
-
-
- {loop:options} - - {/loop} -
-
-
-
+
+ +
+
+
+ {loop:options} + + {/loop} +
+
+