mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2025-02-13 17:00:05 +00:00
Add User profile picture to image details
This commit is contained in:
parent
e8cde31458
commit
df2b2091ec
onlylegs
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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 %}
|
Loading…
Reference in a new issue