diff --git a/api/src/api/me.js b/api/src/api/me.js index 0cdfa2b..578bb29 100644 --- a/api/src/api/me.js +++ b/api/src/api/me.js @@ -84,13 +84,20 @@ module.exports = { if (actors === undefined || actors === null) return res.json({ error: 'unknown_error' }) - const quizs = await db.table.quizs().find({ + var filter = { to: uactor, from: { $in: actors }, - }).toArray() + } + if (req.query.id !== undefined) + filter.id = req.query.id + + const quizs = await db.table.quizs() + .find(filter).toArray() for (var i in quizs) quizs[i].from = await api.accounts.getAccount(quizs[i].from) + if (quizs.length > 0 && req.query.id !== undefined) + return res.json(quizs[0]) return res.json(quizs) }], }, diff --git a/web/src/app/css/app.css b/web/src/app/css/app.css index 6a4d6d0..8c8034c 100644 --- a/web/src/app/css/app.css +++ b/web/src/app/css/app.css @@ -17,6 +17,10 @@ body.app { top: 2px; } +hr { + color: #00000045; +} + img.avatar { width: 2.6em; } @@ -77,8 +81,11 @@ main { user-select: none; } -#quizs-container h2 { margin: 0 } -#quizs-container h2 > .fa { +#quizs-container h2, +#quiz h2 { margin: 0 } + +#quizs-container h2 > .fa, +#quiz h2 > .fa { margin-right: .3em; vertical-align: middle; } @@ -88,9 +95,16 @@ main { #quizs .name { font-size: 1.2em; } -#quizs .avatar img { +#quizs .avatar.round, +#quiz .avatar.round { + padding: 3px; + background: linear-gradient(30deg, #df00ff, pink, pink, #7c4cff); +} +#quizs .avatar img, +#quiz .avatar img { width: 3em; height: 3em; + filter: brightness(120%); } #quizs .metadata .count { float: right; @@ -105,6 +119,9 @@ main { font-size: .9em; opacity: .6; } +#quiz hr { + max-width: 70%; +} #page-meet { background: #000; diff --git a/web/src/app/css/base.css b/web/src/app/css/base.css index 8211efc..7954d8a 100644 --- a/web/src/app/css/base.css +++ b/web/src/app/css/base.css @@ -54,19 +54,35 @@ body { @media (max-width: 400px) { .media-max400 { display: none } } @media (max-width: 500px) { .media-max500 { display: none } } +.slide-to-right { + position: relative !important; + animation. animate2right 0.1s; +} .slide-from-right { - position: relative; + position: relative !important; animation: animateright 0.1s; } +.slide-to-left { + position: relative !important; + animation: animate2left 0.1s; +} .slide-from-left { - position: relative; + position: relative !important; animation: animateleft 0.1s; } +@keyframes animate2right { + from { right: 0; opacity: 1 } + to { right: -200px; opacity: .5 } +} @keyframes animateright { from { right: -200px; opacity: .5 } - to { right: 0; opacity:1 } + to { right: 0; opacity: 1 } +} +@keyframes animate2left { + from { left: 0; opacity: 1 } + to { left: -200px; opacity: .5 } } @keyframes animateleft { from { left: -200px; opacity: .5 } - to { left: 0; opacity:1 } + to { left: 0; opacity: 1 } } diff --git a/web/src/app/js/app.js b/web/src/app/js/app.js index cff243b..a33e6e1 100644 --- a/web/src/app/js/app.js +++ b/web/src/app/js/app.js @@ -31,6 +31,9 @@ app.template = { window.__cache_templates = {}; return window.__cache_templates[name]; }, + isLoaded: function(name) { + return app.template.get(name) !== undefined; + }, load: function(name, cback) { file = app.vars.js_dir + '/templates/' + name.replaceAll('.', '/') + '.html'; @@ -396,6 +399,7 @@ window.onload = function(e) { dayjs.extend(window.dayjs_plugin_updateLocale); if (getNormalizedURI() === app.vars.app_dir) { scriptPageHandler('pages.home', { exact: '' }); + scriptPageHandler('pages.quiz', { regex: /^quiz\/[^\/]+?$/ }); scriptPageHandler('pages.meet', { exact: 'meet' }); scriptPageHandler('pages.crushes', { regex: /^crushes(\/you)?$/ }); scriptPageHandler('pages.chat', { exact: 'chat' }); diff --git a/web/src/app/js/pages/home.js b/web/src/app/js/pages/home.js index 4a39263..080cc27 100644 --- a/web/src/app/js/pages/home.js +++ b/web/src/app/js/pages/home.js @@ -13,6 +13,16 @@ app.pages.home = { }); }); }, + loadQuiz: function(id) { + animateTimeout('#quizs-container', 'slide-to-left'); + setTimeout(function() { + document.getElementById('app-container').innerHTML = ''; + if (app.template.isLoaded('quiz.index')) + window.location.href = `#quiz/${id}` + }, 80); + if (!app.template.isLoaded('quiz.index')) + window.location.href = `#quiz/${id}`; + }, paint: function(section, json) { json = json || app.pages.home.data[section]; if (section === 'quizs') diff --git a/web/src/app/js/pages/quiz.js b/web/src/app/js/pages/quiz.js new file mode 100644 index 0000000..2d23d30 --- /dev/null +++ b/web/src/app/js/pages/quiz.js @@ -0,0 +1,37 @@ +app.pages.quiz = { + data: {}, + load: function(args) { + let data; + if (app.pages.home !== undefined && + app.pages.home.data.quizs !== undefined) { + for (var i in app.pages.home.data.quizs) { + const it = app.pages.home.data.quizs[i]; + if (it.id === args[1]) { + data = it; + break; + } + } + } + + const container = document.getElementById('app-container'); + container.innerHTML = ''; + + const onDataLoaded = async function(json) { + await app.template.loadMany(['quiz.index']); + app.pages.quiz.data = json; + app.pages.quiz.paint(json); + if (getNormalizedURI() === app.vars.app_dir) + animateTimeout('#quiz', 'slide-from-right'); + }; + if (data === undefined) + http.get(`/api/v1/me/quizs?id=${args[1]}`, + {}, onDataLoaded); + else onDataLoaded(data); + }, + paint: function(json) { + json = json || app.pages.quiz.data; + const container = document.getElementById('app-container'); + container.innerHTML = app.template.fill(json, app.template.get('quiz.index')); + console.log(json); + }, +} diff --git a/web/src/app/js/templates/home/quiz_item.html b/web/src/app/js/templates/home/quiz_item.html index cedace6..cda9dd9 100644 --- a/web/src/app/js/templates/home/quiz_item.html +++ b/web/src/app/js/templates/home/quiz_item.html @@ -1,9 +1,9 @@
+ onclick="app.pages.home.loadQuiz('{.id}')">
-
+
-
+
{.from.name}
@{.from.acct}
diff --git a/web/src/app/js/templates/quiz/index.html b/web/src/app/js/templates/quiz/index.html new file mode 100644 index 0000000..692140e --- /dev/null +++ b/web/src/app/js/templates/quiz/index.html @@ -0,0 +1,6 @@ +
+

+ + FediLove Quiz +

+