[bugfix] Fix profile card display issues on smaller screens w/responsive query (#696)

* add responsive media query to profile css

* break username on all screen sizes if necessary

* embed avatar inside header on smaller screen sizes

* align items to the left in small screen view

* more consistent profile scaling accross firefox and chrome

* simplify things a little bit

* make sure bio fits in profile

* word-break content if necessary

Co-authored-by: f0x <f0x@cthu.lu>
This commit is contained in:
tobi 2022-07-13 11:28:05 +02:00 committed by GitHub
parent 6418307c64
commit 1d5c737bbb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 56 additions and 22 deletions

View file

@ -50,9 +50,7 @@ body {
min-height: 100%;
min-width: 100%;
grid-template-columns: 1fr 50% 1fr;
grid-template-columns: auto min(92%, 90ch) auto;
grid-template-rows: auto 1fr auto;
}
@ -269,10 +267,6 @@ footer {
}
@media screen and (orientation: portrait) {
.page {
grid-template-columns: 1fr 92% 1fr;
}
header {
text-align: center;
}

View file

@ -28,22 +28,20 @@ main {
}
.profile {
position: relative;
background: $bg_accent;
display: grid;
grid-template-rows: minmax(6rem, 20%) auto auto;
grid-template-columns: 1fr;
flex-wrap: wrap;
justify-content: space-around;
grid-template-rows: auto auto auto;
grid-template-columns: auto;
gap: 0.5rem;
margin-bottom: 0.2rem;
border-radius: $br;
overflow-x: hidden;
border-radius: $br;
box-shadow: $boxshadow;
border: $boxshadow_border;
.headerimage {
height: 100%;
width: 100%;
aspect-ratio: 3 / 1;
overflow: hidden;
box-shadow: $boxshadow;
@ -62,7 +60,7 @@ main {
display: grid;
grid-template-columns: 1rem auto 1fr;
grid-template-rows: 1fr auto auto;
grid-template-rows: auto auto auto;
grid-template-areas:
". avatar ."
@ -72,10 +70,10 @@ main {
#profile-basic-filler2 {
grid-area: filler2;
background: $bg_trans;
margin-top: 0.3rem;
}
.avatar {
align-self: end;
box-sizing: border-box;
height: 8.5rem;
width: 8.5rem;
@ -104,10 +102,8 @@ main {
.displayname {
grid-area: displayname;
padding-right: 1rem;
align-self: end;
font-weight: bold;
font-size: 2rem;
margin-top: 0.3rem;
line-height: 2.2rem;
background: $bg_trans;
word-break: break-all;
@ -117,17 +113,53 @@ main {
}
.username {
display: flex;
flex-wrap: wrap;
grid-area: username;
padding-top: 0;
margin-top: 0.25rem;
padding-bottom: 0.25rem;
color: $fg_accent;
font-weight: bold;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
}
}
@media screen and (max-width: 600px) {
.basic {
max-height: initial;
margin-top: -7.5vh;
display: flex;
flex-direction: column;
#profile-basic-filler2 {
display: none;
}
.avatar {
align-self: flex-start;
margin-left: 1rem;
height: 22vw;
width: 22vw;
}
.displayname {
padding-left: 1rem;
font-size: 5vw;
align-self: stretch;
}
.username {
padding-left: 1rem;
}
}
}
.detailed {
padding: 0 1rem;
display: flex;
flex-direction: column;
flex: 1 1 25em;
@ -137,7 +169,11 @@ main {
}
.bio {
margin: 0.5rem 0;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
margin-left: 1rem;
margin-right: 1rem;
word-break: break-word;
a {
color: $acc1;

View file

@ -124,6 +124,10 @@ main {
color: $link_fg;
text-decoration: underline;
}
.content {
word-break: break-word;
}
}
.media {

View file

@ -13,7 +13,7 @@
<div id="profile-basic-filler2"></div>
<a href="{{.account.Avatar}}" class="avatar"><img src="{{.account.Avatar}}" alt="{{if .account.DisplayName}}{{.account.DisplayName}}{{else}}{{.account.Username}}{{end}}'s avatar"></a>
<div class="displayname">{{if .account.DisplayName}}{{.account.DisplayName}}{{else}}{{.account.Username}}{{end}}</div>
<div class="username">@{{.account.Username}}@{{.instance.AccountDomain}}</div>
<div class="username"><span>@{{.account.Username}}</span><span>@{{.instance.AccountDomain}}</span></div>
</div>
<div class="detailed">
<div class="bio">