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

Improved UX on pages.meet animations

This commit is contained in:
Niko 2022-02-14 18:46:21 +01:00
parent 24d7e087fe
commit c460d8bff0
5 changed files with 53 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -87,6 +87,13 @@ main {
width: 3em;
height: 3em;
}
#meet-actions .fa.fa-heart {
font-size: 2.5em;
color: #ff4141 !important;
text-shadow: 0px 0px .4em #0000005c;
position: relative;
top: 2px;
}
.meet.item {
max-width: 40em;
@ -99,7 +106,8 @@ main {
background-repeat: no-repeat;
background-position: center;
height: 100vh;
filter: blur(30px);
margin: auto;
filter: blur(15px);
}
.meet.item .status-avatar img {
max-width: 30em;
@ -114,6 +122,20 @@ main {
.meet.item .black {
background: linear-gradient(to right, #00000082, #00000063, #00000063, #00000082);
}
.meet.item .status-content {
padding: 2em 1em;
background: #000000a8;
margin-bottom: 1em;
border-radius: 4px;
box-shadow: 0px 0px 1em #0000008c;
}
.meet.item .status-content .text {
margin: 0;
text-align: justify;
word-break: break-word;
}
.meet.item .content {
display: grid;
}

4
web/src/app/js/pages/meet.js
View File

@ -3,7 +3,7 @@ app.pages.meet = {
document.querySelector('#page-meet').removeAttribute('style');
http.get('/api/v1/feed/meet', {}, function(json) {
if (json === undefined) return;
app.template.loadMany(['meet.item','meet.item_actions'], function(_) {
app.template.loadMany(['meet.item','meet.actions'], function(_) {
var _;
_ = function () {
const dom = document.querySelector('#page-meet #content');
@ -27,7 +27,7 @@ app.pages.meet = {
const dom = document.querySelector('#page-meet #actions');
dom.innerHTML = '';
dom.style.height = '6em';
var tpl = app.template.get('meet.item_actions');
var tpl = app.template.get('meet.actions');
dom.innerHTML += tpl;
}; _();
var index = app.storage.get('status_meet_index');

18
web/src/app/js/templates/meet/actions.html Normal file
View File

@ -0,0 +1,18 @@
<div id="meet-actions" class="height-max flex">
<div class="flex center">
<a class="component icon button light round"
title="{s:alt_nav-close}"
href="javascript:app.pages.meet.exit()"
style="position: absolute; left: 0; margin-left: .5em;">
<div class="ic-container flex">
<i class="center fa fa-close fa-fw"></i>
</div>
</a>
<a class="component icon button light round" title="{s:alt_nav-crush}"
href="javascript:app.pages.meet.crush()">
<div class="ic-container flex">
<i class="center fa fa-heart fa-fw"></i>
</div>
</a>
</div>
</div>

13
web/src/app/js/templates/meet/item.html
View File

@ -1,6 +1,9 @@
<div class="meet item fixed-top width-max" data-id="{._id}" style="display:none">
<div class="back-avatar" style="background-image:url({avatar})"></div>
<div class="absolute-top width-max height-max black"></div>
<div class="absolute-top width-max height-max black" style="display: ruby">
<div style="height: 100vh;width: 3em;background: black;position: relative;left: -3em;"></div>
<div style="height: 100vh;width: 3em;background: black;float: right;position: relative;left: 3em;"></div>
</div>
<div class="absolute-top width-max height-max content">
<div class="status-avatar flex">
<a class="center" href="javascript:app.media.view('{avatar}')"/>
@ -8,9 +11,13 @@
</a>
</div>
<div>
<div class="status fixed-bottom"
<div class="status fixed-bottom width-max"
style="bottom: {actionsHeight}">
<p class="status-content">{.text}</p>
<div style="max-width: 38em; width: 100%;">
<div class="status-content">
<p class="text">{.text}</p>
</div>
</div>
<div class="profile flex">
<div class="user">
<span class="bigname">{.account.name}</span><br>

10
web/src/app/js/templates/meet/item_actions.html
View File

@ -1,10 +0,0 @@
<div class="height-max flex">
<div class="flex center">
<a class="component icon button light round" title="{s:alt_nav-close}"
href="javascript:app.pages.meet.exit()">
<div class="ic-container flex">
<i class="center fa fa-close fa-fw"></i>
</div>
</a>
</div>
</div>