failed-galleries/python-gallery
1
0
Fork 0
mirror of https://github.com/Derpy-Leggies/OnlyLegs.git synced 2025-01-29 01:28:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add User profile picture to image details

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

11
onlylegs/static/sass/components/image-view/info-tab.sass
View file

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

36
onlylegs/templates/image.html
View file

@ -129,7 +129,16 @@
<table>
<tr>
<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>
<td>Upload date</td>
@ -206,9 +215,30 @@
let infoTab = document.querySelectorAll('.info-tab');
for (let i = 0; i < infoTab.length; i++) {
infoTab[i].querySelector('.collapse-indicator').addEventListener('click', function() {
infoTab[i].classList.toggle('collapsed');
const tab = infoTab[i];
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>
{% endblock %}