UX improvements on pages.home quizs

This commit is contained in:
Niko 2022-02-23 14:09:35 +01:00
parent d00803e90f
commit 0b49d59ee1
3 changed files with 18 additions and 7 deletions

View File

@ -17,7 +17,7 @@ $actor = $database->getActorByUsername($user->username);
]) ?> ]) ?>
<main class="flex"> <main class="flex">
<div id="app-container" class="flex center width-max"></div> <div id="app-container" class="center width-max"></div>
</main> </main>
<div id="page-meet" style="display:none" <div id="page-meet" style="display:none"

View File

@ -21,12 +21,15 @@ hr {
color: #00000045; color: #00000045;
} }
.list hr { .list hr {
max-width: 80%; max-width: 30%;
} }
img.avatar { img.avatar {
width: 2.6em; width: 2.6em;
} }
.avatar img {
background: #000;
}
.list .emoji { .list .emoji {
width: 1.2em; width: 1.2em;
height: 1.2em; height: 1.2em;
@ -59,7 +62,7 @@ main {
margin: .8em .4em; margin: .8em .4em;
} }
@media (max-width: 700px) { @media (max-width: 700px) {
main { margin: .4em !important; } main { margin: .4em !important }
} }
#nav-container { #nav-container {
@ -85,10 +88,12 @@ main {
} }
.panel { .panel {
margin: .8em .4em; margin-bottom: .8em;
border-radius: 4px; border-radius: 4px;
padding: 1.5em 1em; padding: 1.5em 1em;
width: 100%; }
@media (max-width: 700px) {
.panel { margin-bottom: .4em !important }
} }
.panel .content { .panel .content {
max-width: var(--content_max_width); max-width: var(--content_max_width);
@ -100,7 +105,10 @@ main {
} }
#quizs-container h2, #quizs-container h2,
#quiz h2 { margin: 0 } #quiz h2 {
margin: 0;
padding-left: .5em;
}
#quizs-container h2 > .fa, #quizs-container h2 > .fa,
#quiz h2 > .fa { #quiz h2 > .fa {
@ -109,6 +117,10 @@ main {
} }
#quizs .item { #quizs .item {
padding: 1em; padding: 1em;
box-shadow: 0px 0px .5em #0000001a;
border: 1px solid #0000001c;
margin-bottom: .5em;
background: #fff;
} }
#quizs .name { #quizs .name {
font-size: 1.2em; font-size: 1.2em;

View File

@ -43,7 +43,6 @@ app.pages.home = {
if (item.responses === undefined) if (item.responses === undefined)
tpl = tpl.replaceAll('{newOrAnsweredItem}', '<span class="new">NEW</span>'); tpl = tpl.replaceAll('{newOrAnsweredItem}', '<span class="new">NEW</span>');
else tpl = tpl.replaceAll('{newOrAnsweredItem}', '<span class="old">ANSWERED</span>'); else tpl = tpl.replaceAll('{newOrAnsweredItem}', '<span class="old">ANSWERED</span>');
tpl += '<hr>';
container.innerHTML += tpl; container.innerHTML += tpl;
} }
}, },