nobigtech
/
fedilove
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added custom emoji in pages.home quizs + improve UX

This commit is contained in:
Niko 2022-02-23 09:20:59 +01:00
parent 2e6b06ed57
commit c33f833a6b
3 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/app/css/app.css
View File

@ -20,10 +20,21 @@ body.app {
hr { hr {
color: #00000045; color: #00000045;
} }
.list hr {
max-width: 80%;
}
img.avatar { img.avatar {
width: 2.6em; width: 2.6em;
} }
.list .emoji {
width: 1.2em;
height: 1.2em;
vertical-align: middle;
position: relative;
top: -2px;
margin-right: 3px;
}
a.button { a.button {
text-decoration: none; text-decoration: none;
@ -99,6 +110,7 @@ main {
#quiz .avatar.round { #quiz .avatar.round {
padding: 3px; padding: 3px;
background: linear-gradient(30deg, #df00ff, pink, pink, #7c4cff); background: linear-gradient(30deg, #df00ff, pink, pink, #7c4cff);
box-shadow: -6px 4px 0px #0000004f;
} }
#quizs .avatar img, #quizs .avatar img,
#quiz .avatar img { #quiz .avatar img {

7
web/src/app/js/pages/home.js
View File

@ -35,10 +35,15 @@ app.pages.home = {
container.innerHTML = ''; container.innerHTML = '';
for (var i in data) { for (var i in data) {
const item = data[i]; const item = data[i];
var tpl = app.template.fill(item, app.template.get('home.quiz_item')); var tpl = app.template.fill(item, app.template.get('home.quiz_item'),
function(k,v) {
console.log(v);
if (k === 'from.name') return app.emoji.expand(capitalize(v));
});
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;
} }
}, },

2
web/src/app/js/templates/home/index.html
View File

@ -5,6 +5,6 @@
<i class="fa fa-quote-right fa-fw"> <i class="fa fa-quote-right fa-fw">
</i>Quizs for you</h2> </i>Quizs for you</h2>
<br> <br>
<div id="quizs"></div> <div id="quizs" class="list"></div>
</div> </div>
</div> </div>