qugalet/gotosocial
1
0
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial.git synced 2024-11-22 11:46:40 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[frontend] Reduce width of profile img with screen width (#615)

Browse source 
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>
This commit is contained in:
Sashanoraa 2022-05-28 07:19:24 -04:00 committed by GitHub
parent 8de9b7a34b
commit 323dbca4f7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 54 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
web/assets/profile.css
View file

@ -34,13 +34,33 @@ main {
text-decoration: none; text-decoration: none;
} }
.profile .basic .avatar img { .profile .basic .avatar-container {
height: 25em; position: relative;
width: 25em; width: 100%;
object-fit: cover; max-width: 25em;
border-radius: 10px; }
.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 { .profile .basic .displayname {
font-weight: bold; font-weight: bold;
font-size: 1.6rem; font-size: 1.6rem;

31
web/gotosocial-styling/templates/profile.css
View file

@ -34,15 +34,34 @@ main {
text-decoration: none; text-decoration: none;
} }
.avatar { .avatar-container {
img { position: relative;
height: 25em; width: 100%;
width: 25em; max-width: 25em;
object-fit: cover;
border-radius: 10px; .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 { .displayname {
font-weight: bold; font-weight: bold;
font-size: 1.6rem; font-size: 1.6rem;

6
web/template/profile.tmpl
View file

@ -5,7 +5,9 @@
<div class="basic"> <div class="basic">
<a href="{{.account.URL}}" class="displayname">{{if .account.DisplayName}}{{.account.DisplayName}}{{else}}{{.account.Username}}{{end}}</a> <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.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>
<div class="detailed"> <div class="detailed">
<h2>About @{{.account.Username}}</h2> <h2>About @{{.account.Username}}</h2>
@ -44,4 +46,4 @@
label.addEventListener("click", () => {setTimeout(update, 1)}); label.addEventListener("click", () => {setTimeout(update, 1)});
}); });
</script> </script>
{{ template "footer.tmpl" .}} {{ template "footer.tmpl" .}}