Created new view for pages.home for Quizs
* User is now able to view their pending quizs * Quizs have 2 states: new (not answered) and answered. Once answered you can't modify or re-upload the quiz. * Once the crush accepts/rejects the Quiz answer, it will get deleted
This commit is contained in:
Niko
parent
ffc8f14280
commit
ae39f3141d
|
|
@ -24,6 +24,7 @@ var app = {
|
|||
},
|
||||
};
|
||||
var cssprops = {
|
||||
clr_quiz: '#0064ff',
|
||||
meet_max_width: '40em',
|
||||
meet_actions_height: '6em',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -16,6 +16,10 @@ $actor = $database->getActorByUsername($user->username);
|
|||
'actor' => $actor,
|
||||
]) ?>
|
||||
|
||||
<main class="flex">
|
||||
<div id="app-container" class="flex center width-max"></div>
|
||||
</main>
|
||||
|
||||
<div id="page-meet" style="display:none"
|
||||
class="flex overlay height-mobile">
|
||||
<div class="center size-max"
|
||||
|
|
@ -29,11 +33,4 @@ $actor = $database->getActorByUsername($user->username);
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<main class="flex">
|
||||
<div id="app-container" class="flex center width-max">
|
||||
<div class="panel center">
|
||||
<div id="mcontent">...</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<?php tpl('app.footer') ?>
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ main {
|
|||
.panel {
|
||||
margin: .8em .4em;
|
||||
border-radius: 4px;
|
||||
padding: 1em .6em;
|
||||
padding: 1.5em 1em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -77,6 +77,35 @@ main {
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
#quizs-container h2 { margin: 0 }
|
||||
#quizs-container h2 > .fa {
|
||||
margin-right: .3em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#quizs .item {
|
||||
padding: 1em;
|
||||
}
|
||||
#quizs .name {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
#quizs .avatar img {
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
}
|
||||
#quizs .metadata .count {
|
||||
float: right;
|
||||
opacity: .5;
|
||||
}
|
||||
#quizs .metadata .new {
|
||||
color: #35ce35;
|
||||
font-weight: bold;
|
||||
font-size: .9em;
|
||||
}
|
||||
#quizs .metadata .old {
|
||||
font-size: .9em;
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
#page-meet {
|
||||
background: #000;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@ app.pages.crushes = {
|
|||
if (args.length === 2 && args[1] === 'you')
|
||||
key = 'to_me';
|
||||
|
||||
const dom = document.getElementById('mcontent');
|
||||
dom.innerHTML = '...'; // TODO: replace to a better loader?
|
||||
const dom = document.getElementById('app-container');
|
||||
dom.innerHTML = '';
|
||||
http.get('/api/v1/me/pending_follows', {}, function(json) {
|
||||
app.template.loadMany(['crushes.content','crushes.item'], function(_) {
|
||||
dom.innerHTML = app.template.fill({}, app.template.get('crushes.content'));
|
||||
app.template.loadMany(['crushes.index','crushes.item'], function(_) {
|
||||
dom.innerHTML = app.template.fill({}, app.template.get('crushes.index'));
|
||||
if (json === undefined)
|
||||
return false; // TODO: handle unknown error
|
||||
json = json[key];
|
||||
|
|
|
|||
|
|
@ -1,5 +1,35 @@
|
|||
app.pages.home = {
|
||||
data: {},
|
||||
load: function(args) {
|
||||
console.log('HOME');
|
||||
app.template.load('home.index', function(home_html) {
|
||||
const dom = document.getElementById('app-container');
|
||||
dom.innerHTML = app.template.fill({}, home_html);
|
||||
|
||||
http.get('/api/v1/me/quizs', {}, async function(json) {
|
||||
if (json === undefined) return;
|
||||
await app.template.loadMany(['home.quiz_item']);
|
||||
app.pages.home.data.quizs = json;
|
||||
app.pages.home.paint('quizs', json);
|
||||
});
|
||||
});
|
||||
},
|
||||
paint: function(section, json) {
|
||||
json = json || app.pages.home.data[section];
|
||||
if (section === 'quizs')
|
||||
return app.pages.home.paintQuizs(json);
|
||||
},
|
||||
paintQuizs: function(data) {
|
||||
document.querySelector('#quizs-container').removeAttribute('style');
|
||||
|
||||
const container = document.querySelector('#quizs-container #quizs');
|
||||
container.innerHTML = '';
|
||||
for (var i in data) {
|
||||
const item = data[i];
|
||||
var tpl = app.template.fill(item, app.template.get('home.quiz_item'));
|
||||
if (item.responses === undefined)
|
||||
tpl = tpl.replaceAll('{newOrAnsweredItem}', '<span class="new">NEW</span>');
|
||||
else tpl = tpl.replaceAll('{newOrAnsweredItem}', '<span class="old">ANSWERED</span>');
|
||||
container.innerHTML += tpl;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
<div class="header">HEADER_HERE</div>
|
||||
<div id="crush-items">ITEMS HERE</div>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<div class="panel center">
|
||||
<div class="header">HEADER_HERE</div>
|
||||
<div id="crush-items">ITEMS HERE</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<div id="quizs-container" class="panel center"
|
||||
style="display:none">
|
||||
<div class="has-items">
|
||||
<h2 style="color:var(--clr_quiz)">
|
||||
<i class="fa fa-quote-right fa-fw">
|
||||
</i>Quizs for you</h2>
|
||||
<br>
|
||||
<div id="quizs"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<div class="item button dark rounder" data-id="{._id}"
|
||||
onclick="window.location.href = '#quiz/{.id}'">
|
||||
<div class="flex">
|
||||
<div class="avatar">
|
||||
<img class="round" src="{.from.avatar.url}"/>
|
||||
</div>
|
||||
<div class="width-max" style="padding-left:1em">
|
||||
<div class="name">{.from.name}</div>
|
||||
<div class="acct">@{.from.acct}</div>
|
||||
<br>
|
||||
<div class="metadata">
|
||||
{newOrAnsweredItem}
|
||||
<span class="count">
|
||||
<i class="fa fa-quote-left fa-fw"></i>
|
||||
<b>{.content.length}</b>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue