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

Improvements on status image (avatar)

This commit is contained in:
Niko 2022-02-14 16:42:23 +01:00
parent 4ef4767318
commit 230b406722
3 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -101,6 +101,16 @@ main {
height: 100vh; height: 100vh;
filter: blur(30px); filter: blur(30px);
} }
.meet.item .status-avatar img {
max-width: 30em;
}
@media (max-width: 700px) {
.meet.item .status-avatar img {
max-width: 20em !important;
position: relative;
top: -3em;
}
}
.meet.item .black { .meet.item .black {
background: linear-gradient(to right, #00000082, #00000063, #00000063, #00000082); background: linear-gradient(to right, #00000082, #00000063, #00000063, #00000082);
} }

8
web/src/app/js/media.js Normal file
View File

@ -0,0 +1,8 @@
app.media = {
view: function(url) {
if (url.matches(/.*\.(jpg|jpeg|png|ico|webp)$/)) {
// TODO: load a template (with overlay) and set image
console.log(url);
}
},
}

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

@ -2,9 +2,10 @@
<div class="back-avatar" style="background-image:url({avatar})"></div> <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"></div>
<div class="absolute-top width-max height-max content"> <div class="absolute-top width-max height-max content">
<div class="flex"> <div class="status-avatar flex">
<img class="center" style="max-width: 20em" <a class="center" href="javascript:app.media.view('{avatar}')"/>
src="{avatar}"/> <img src="{avatar}"/>
</a>
</div> </div>
<div> <div>
<div class="status fixed-bottom" <div class="status fixed-bottom"