Add User profile picture to image details

This commit is contained in:
Michał 2023-04-22 09:39:27 +00:00
parent e8cde31458
commit df2b2091ec
2 changed files with 44 additions and 3 deletions
onlylegs
static/sass/components/image-view
templates

View file

@ -132,6 +132,14 @@
&:hover &:hover
text-decoration: underline text-decoration: underline
.pfp
width: 1.1rem
height: 1.1rem
border-radius: $rad-inner
object-fit: cover
table table
margin: 0 margin: 0
padding: 0 padding: 0
@ -154,6 +162,9 @@
vertical-align: top vertical-align: top
> *
vertical-align: top
td:first-child td:first-child
padding-right: 0.5rem padding-right: 0.5rem

View file

@ -129,7 +129,16 @@
<table> <table>
<tr> <tr>
<td>Author</td> <td>Author</td>
<td><a href="{{ url_for('profile.profile', id=image.author.id) }}" class="link">{{ image.author.username }}</a></td> <td>
<img
src="{{ url_for('media_api.media', path='pfp/' + image.author.picture) }}"
alt="Profile Picture"
class="pfp"
onload="imgFade(this)"
style="opacity: 0;"
/>
<a href="{{ url_for('profile.profile', id=image.author.id) }}" class="link">{{ image.author.username }}</a>
</td>
</tr> </tr>
<tr> <tr>
<td>Upload date</td> <td>Upload date</td>
@ -206,9 +215,30 @@
let infoTab = document.querySelectorAll('.info-tab'); let infoTab = document.querySelectorAll('.info-tab');
for (let i = 0; i < infoTab.length; i++) { for (let i = 0; i < infoTab.length; i++) {
infoTab[i].querySelector('.collapse-indicator').addEventListener('click', function() { const tab = infoTab[i];
infoTab[i].classList.toggle('collapsed');
tab.querySelector('.collapse-indicator').addEventListener('click', function() {
tab.classList.toggle('collapsed');
}); });
/*
const tabHeader = tab.querySelector('.info-header');
const tabContent = tab.querySelector('.info-table');
const tabHeight = tabHeader.offsetHeight + tabContent.offsetHeight;
tab.style.height = tabHeight + 'px';
tab.querySelector('.collapse-indicator').addEventListener('click', function() {
if (tab.classList.contains('collapsed')) {
tab.style.height = tabHeight + 'px';
tab.classList.remove('collapsed');
} else {
tab.style.height = tabHeader.offsetHeight + 'px';
tab.classList.add('collapsed');
}
});
*/
} }
</script> </script>
{% endblock %} {% endblock %}