From 323dbca4f713530a5760bb49c07a9274f2ca28cf Mon Sep 17 00:00:00 2001
From: Sashanoraa <sasha@noraa.gay>
Date: Sat, 28 May 2022 07:19:24 -0400
Subject: [PATCH] [frontend] Reduce width of profile img with screen width
 (#615)

The commit makes the profile image on the profile page reduce in width
if the screen width is less then it's normal width while maintaining
it's 1:1 aspect ration.

Signed-off-by: Sashanoraa <sasha@noraa.gay>
---
 web/assets/profile.css                       | 30 +++++++++++++++----
 web/gotosocial-styling/templates/profile.css | 31 ++++++++++++++++----
 web/template/profile.tmpl                    |  6 ++--
 3 files changed, 54 insertions(+), 13 deletions(-)

diff --git a/web/assets/profile.css b/web/assets/profile.css
index 7631b08ab..978468f72 100644
--- a/web/assets/profile.css
+++ b/web/assets/profile.css
@@ -34,13 +34,33 @@ main {
       text-decoration: none;
     }
 
-.profile .basic .avatar img {
-        height: 25em;
-        width: 25em;
-        object-fit: cover;
-        border-radius: 10px;
+.profile .basic .avatar-container {
+      position: relative;
+      width: 100%;
+      max-width: 25em;
+    }
+
+.profile .basic .avatar-container .avatar {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
       }
 
+.profile .basic .avatar-container .avatar img {
+          object-fit: cover;
+          border-radius: 10px;
+          width: 100%;
+          height: 100%;
+        }
+
+.profile .basic .avatar-container:before {
+      content: "";
+      float: left;
+      padding-top: 100%;
+    }
+
 .profile .basic .displayname {
       font-weight: bold;
       font-size: 1.6rem;
diff --git a/web/gotosocial-styling/templates/profile.css b/web/gotosocial-styling/templates/profile.css
index 167ed7b9e..472c6b730 100644
--- a/web/gotosocial-styling/templates/profile.css
+++ b/web/gotosocial-styling/templates/profile.css
@@ -34,15 +34,34 @@ main {
       text-decoration: none;
     }
 
-    .avatar {
-      img {
-        height: 25em;
-        width: 25em;
-        object-fit: cover;
-        border-radius: 10px;
+    .avatar-container {
+      position: relative;
+      width: 100%;
+      max-width: 25em;
+
+      .avatar {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+
+        img {
+          object-fit: cover;
+          border-radius: 10px;
+          width: 100%;
+          height: 100%;
+        }
       }
     }
 
+    .avatar-container:before {
+      content: "";
+      float: left;
+      padding-top: 100%;
+    }
+
+
     .displayname {
       font-weight: bold;
       font-size: 1.6rem;
diff --git a/web/template/profile.tmpl b/web/template/profile.tmpl
index cfabeee6f..71914b7e7 100644
--- a/web/template/profile.tmpl
+++ b/web/template/profile.tmpl
@@ -5,7 +5,9 @@
         <div class="basic">
             <a href="{{.account.URL}}" class="displayname">{{if .account.DisplayName}}{{.account.DisplayName}}{{else}}{{.account.Username}}{{end}}</a>
             <a href="{{.account.URL}}" class="username">@{{.account.Username}}</a>
-            <a href="{{.account.Avatar}}" class="avatar"><img src="{{.account.Avatar}}"></a>
+            <div class="avatar-container">
+                <a href="{{.account.Avatar}}" class="avatar"><img src="{{.account.Avatar}}"></a>
+            </div>
         </div>
         <div class="detailed">
             <h2>About @{{.account.Username}}</h2>
@@ -44,4 +46,4 @@
 		label.addEventListener("click", () => {setTimeout(update, 1)});
 	});
 </script>
-{{ template "footer.tmpl" .}}
\ No newline at end of file
+{{ template "footer.tmpl" .}}