UX improvements on pages.home quizs
This commit is contained in:
parent
d00803e90f
commit
0b49d59ee1
|
@ -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"
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue