diff options
author | 2022-10-02 15:54:42 +0200 | |
---|---|---|
committer | 2022-10-02 15:54:42 +0200 | |
commit | deba75cad14f47bb42ea55e7d126d3adea7855a6 (patch) | |
tree | a83c673900d827bb8cc3bb4a4d60cc37651e91be /web | |
parent | fix emojis not showing in spoiler text (#878) (diff) | |
download | gotosocial-deba75cad14f47bb42ea55e7d126d3adea7855a6.tar.xz |
[chore] Use shorter timestamps in frontend for replies (#875)
* rename timestampShort -> timestampVague
* add ParseISO8601
* start fiddling with timestamp
* pad/margin a bit more consistently
* remove visibilty icon, change timestamp use
* update timestamp logic
* check + log errors
* properly cut-off long display- and usernames
Co-authored-by: f0x <f0x@cthu.lu>
Diffstat (limited to 'web')
-rw-r--r-- | web/source/css/status.css | 34 | ||||
-rw-r--r-- | web/template/profile.tmpl | 2 | ||||
-rw-r--r-- | web/template/status.tmpl | 3 |
3 files changed, 21 insertions, 18 deletions
diff --git a/web/source/css/status.css b/web/source/css/status.css index e34b3b091..c057aec4b 100644 --- a/web/source/css/status.css +++ b/web/source/css/status.css @@ -75,28 +75,27 @@ main { background: $bg; } } - - .displayname { - font-weight: bold; - font-size: 1.2rem; - line-height: 2rem; - margin-top: -0.5rem; - align-self: start; + .displayname, .username { + justify-self: start; + align-self: start; + + max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + + /* margin-top: -0.5rem; */ + line-height: 2rem; } + .displayname { + font-weight: bold; + font-size: 1.2rem; + } + .username { color: $link-fg; - line-height: 2rem; - margin-top: -0.5rem; - align-self: start; - - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; } input.spoiler:checked ~ .content { @@ -180,7 +179,7 @@ main { } .media { - margin-top: 0.6rem; + margin-top: 0.5rem; border-radius: $br; grid-column: span 3; display: grid; @@ -362,6 +361,7 @@ main { .text { grid-column: 1 / span 3; + padding-top: 0.5rem; } .not-expanded { @@ -372,6 +372,10 @@ main { .info { display: flex; } + + .media { + margin-bottom: 0.5rem; + } } } diff --git a/web/template/profile.tmpl b/web/template/profile.tmpl index 4c348d028..145ff95f4 100644 --- a/web/template/profile.tmpl +++ b/web/template/profile.tmpl @@ -21,7 +21,7 @@ </div> </div> <div class="accountstats"> - <div class="entry">Joined <b>{{.account.CreatedAt | timestampShort}}</b></div> + <div class="entry">Joined <b>{{.account.CreatedAt | timestampVague}}</b></div> <div class="entry">Followed by <b>{{.account.FollowersCount}}</b></div> <div class="entry">Following <b>{{.account.FollowingCount}}</b></div> <div class="entry">Posted <b>{{.account.StatusesCount}}</b></div> diff --git a/web/template/status.tmpl b/web/template/status.tmpl index 5136b6ad7..bff1fb692 100644 --- a/web/template/status.tmpl +++ b/web/template/status.tmpl @@ -3,7 +3,6 @@ <a href="{{.Account.URL}}" class="displayname">{{if .Account.DisplayName}}{{emojify .Account.Emojis (escape .Account.DisplayName)}}{{else}}{{.Account.Username}}{{end}}</a> <a href="{{.Account.URL}}" class="username">@{{.Account.Acct}}</a> <div class="not-expanded"> - <span class="visibility">{{.Visibility | visibilityIcon}}</span> <span class="date">{{.CreatedAt | timestamp}}</span> </div> <div class="text"> @@ -45,7 +44,7 @@ {{end}} </div> <div class="info"> - <div id="date">{{.CreatedAt | timestamp}}</div> + <div id="date">{{.CreatedAt | timestampPrecise}}</div> <div class="stats"> <div id="replies"><i aria-label="Replies" class="fa fa-reply-all"></i> {{.RepliesCount}}</div> <div id="boosts"><i aria-label="Boosts" class="fa fa-retweet"></i> {{.ReblogsCount}}</div> |