diff options
| author |  Sashanoraa <sasha@noraa.gay> | 2022-05-28 07:19:24 -0400 |
|---|---|---|
| committer |  GitHub <noreply@github.com> | 2022-05-28 13:19:24 +0200 |
| commit | 323dbca4f713530a5760bb49c07a9274f2ca28cf (patch) | |
| tree | 02d0076862bf8dfafbd564cac043f2941388bfd0 | |
| parent | [frontend] Add padding to the bottom of main (#616) (diff) | |
| download | gotosocial-323dbca4f713530a5760bb49c07a9274f2ca28cf.tar.xz | |
[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>
| -rw-r--r-- | web/assets/profile.css | 30 | ||||
| -rw-r--r-- | web/gotosocial-styling/templates/profile.css | 31 | ||||
| -rw-r--r-- | 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" .}} |