gtsocial-umbx

commit 323dbca4f713530a5760bb49c07a9274f2ca28cf
parent 8de9b7a34bc0c089aa367ea7c211f917fed83f8f
Author: Sashanoraa <sasha@noraa.gay>
Date:   Sat, 28 May 2022 07:19:24 -0400

[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>
Diffstat:
M
web/assets/profile.css
 | 
30
+++++++++++++++++++++++++-----
M
web/gotosocial-styling/templates/profile.css
 | 
31
+++++++++++++++++++++++++------
M
web/template/profile.tmpl
 | 
7
++++---

3 files changed, 54 insertions(+), 14 deletions(-)
diff --git 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
@@ -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
@@ -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" .}}