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