From df2b2091ec33f2567910ae03920899b0231af167 Mon Sep 17 00:00:00 2001 From: Fluffy-Bean <michal-gdula@protonmail.com> Date: Sat, 22 Apr 2023 09:39:27 +0000 Subject: [PATCH] Add User profile picture to image details --- .../sass/components/image-view/info-tab.sass | 11 ++++++ onlylegs/templates/image.html | 36 +++++++++++++++++-- 2 files changed, 44 insertions(+), 3 deletions(-) diff --git a/onlylegs/static/sass/components/image-view/info-tab.sass b/onlylegs/static/sass/components/image-view/info-tab.sass index 82f56eb..968ef13 100644 --- a/onlylegs/static/sass/components/image-view/info-tab.sass +++ b/onlylegs/static/sass/components/image-view/info-tab.sass @@ -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 diff --git a/onlylegs/templates/image.html b/onlylegs/templates/image.html index 4fe6729..36790fa 100644 --- a/onlylegs/templates/image.html +++ b/onlylegs/templates/image.html @@ -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 %} \ No newline at end of file