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

[bugfix] Fix display names in thread view causing wrapping issues on small screens (#698)

Browse source 
* use account.Acct for username

* allow username + displayname to wrap with ellipses

* use span 2 for displayname always

* remove commented-out line
This commit is contained in:
tobi 2022-07-09 13:37:06 +02:00 committed by GitHub
parent 8e68970258
commit 211266c072
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
web/source/css/status.css
View file

@ -61,25 +61,32 @@ main {
object-fit: cover; object-fit: cover;
background: $bg; background: $bg;
border: 0.1rem solid $acc2; border: 0.1rem solid $acc2;
/* box-sizing: border-box; */
border-radius: calc($br / 1.5); border-radius: calc($br / 1.5);
} }
} }
.displayname { .displayname {
grid-column: span 2;
font-weight: bold; font-weight: bold;
font-size: 1.2rem; font-size: 1.2rem;
line-height: 2rem; line-height: 2rem;
margin-top: -0.5rem; margin-top: -0.5rem;
align-self: start; align-self: start;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.username { .username {
color: $link_fg; color: $link_fg;
line-height: 2rem; line-height: 2rem;
margin-top: -0.5rem; margin-top: -0.5rem;
justify-self: start;
align-self: start; align-self: start;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
input.spoiler:checked ~ .content { input.spoiler:checked ~ .content {
@ -250,10 +257,6 @@ main {
background: $status_focus_bg; background: $status_focus_bg;
padding-bottom: 0; padding-bottom: 0;
.displayname {
grid-column: span 2;
}
.text { .text {
margin-top: 0; margin-top: 0;
grid-column: span 3; grid-column: span 3;

2
web/template/status.tmpl
View file

@ -1,7 +1,7 @@
<div class="contentgrid"> <div class="contentgrid">
<a href="{{.Account.URL}}" class="avatar"><img src="{{.Account.Avatar}}" alt=""></a> <a href="{{.Account.URL}}" class="avatar"><img src="{{.Account.Avatar}}" alt=""></a>
<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.Acct}}</a>
<div class="text"> <div class="text">
{{if .SpoilerText}} {{if .SpoilerText}}
<input class="spoiler" id="hideSpoiler-{{.ID}}" type="checkbox" style="display: none" aria-hidden="true" checked="true" /> <input class="spoiler" id="hideSpoiler-{{.ID}}" type="checkbox" style="display: none" aria-hidden="true" checked="true" />