SuperSeriousBusiness
/
GoToSocial
mirror of https://github.com/superseriousbusiness/gotosocial
1
1
Fork 0
Code Issues Projects Releases Wiki Activity

[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>
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;
}
.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;

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

@ -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;

6
web/template/profile.tmpl
View File

@ -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" .}}
{{ template "footer.tmpl" .}}