From deba75cad14f47bb42ea55e7d126d3adea7855a6 Mon Sep 17 00:00:00 2001 From: tobi <31960611+tsmethurst@users.noreply.github.com> Date: Sun, 2 Oct 2022 15:54:42 +0200 Subject: [PATCH] [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 --- internal/router/template.go | 69 ++++++++++++++++++++++++++++++------- internal/util/time.go | 5 +++ web/source/css/status.css | 36 ++++++++++--------- web/template/profile.tmpl | 2 +- web/template/status.tmpl | 3 +- 5 files changed, 83 insertions(+), 32 deletions(-) diff --git a/internal/router/template.go b/internal/router/template.go index 2d6026a2e..fcdccf783 100644 --- a/internal/router/template.go +++ b/internal/router/template.go @@ -30,7 +30,18 @@ import ( "github.com/gin-gonic/gin" "github.com/superseriousbusiness/gotosocial/internal/api/model" "github.com/superseriousbusiness/gotosocial/internal/config" + "github.com/superseriousbusiness/gotosocial/internal/log" "github.com/superseriousbusiness/gotosocial/internal/regexes" + "github.com/superseriousbusiness/gotosocial/internal/util" +) + +const ( + justTime = "15:04" + dateYear = "Jan 02, 2006" + dateTime = "Jan 02, 15:04" + dateYearTime = "Jan 02, 2006, 15:04" + monthYear = "Jan, 2006" + badTimestamp = "bad timestamp" ) // LoadTemplates loads html templates for use by the given engine @@ -76,13 +87,44 @@ func noescapeAttr(str string) template.HTMLAttr { } func timestamp(stamp string) string { - t, _ := time.Parse(time.RFC3339, stamp) - return t.Format("January 2, 2006, 15:04:05") + t, err := util.ParseISO8601(stamp) + if err != nil { + log.Errorf("error parsing timestamp %s: %s", stamp, err) + return badTimestamp + } + + t = t.Local() + + tYear, tMonth, tDay := t.Date() + now := time.Now() + currentYear, currentMonth, currentDay := now.Date() + + switch { + case tYear == currentYear && tMonth == currentMonth && tDay == currentDay: + return "Today, " + t.Format(justTime) + case tYear == currentYear: + return t.Format(dateTime) + default: + return t.Format(dateYear) + } } -func timestampShort(stamp string) string { - t, _ := time.Parse(time.RFC3339, stamp) - return t.Format("January, 2006") +func timestampPrecise(stamp string) string { + t, err := util.ParseISO8601(stamp) + if err != nil { + log.Errorf("error parsing timestamp %s: %s", stamp, err) + return badTimestamp + } + return t.Local().Format(dateYearTime) +} + +func timestampVague(stamp string) string { + t, err := util.ParseISO8601(stamp) + if err != nil { + log.Errorf("error parsing timestamp %s: %s", stamp, err) + return badTimestamp + } + return t.Format(monthYear) } type iconWithLabel struct { @@ -154,13 +196,14 @@ func emojify(emojis []model.Emoji, text template.HTML) template.HTML { func LoadTemplateFunctions(engine *gin.Engine) { engine.SetFuncMap(template.FuncMap{ - "escape": escape, - "noescape": noescape, - "noescapeAttr": noescapeAttr, - "oddOrEven": oddOrEven, - "visibilityIcon": visibilityIcon, - "timestamp": timestamp, - "timestampShort": timestampShort, - "emojify": emojify, + "escape": escape, + "noescape": noescape, + "noescapeAttr": noescapeAttr, + "oddOrEven": oddOrEven, + "visibilityIcon": visibilityIcon, + "timestamp": timestamp, + "timestampVague": timestampVague, + "timestampPrecise": timestampPrecise, + "emojify": emojify, }) } diff --git a/internal/util/time.go b/internal/util/time.go index f969908a7..2f7fd6721 100644 --- a/internal/util/time.go +++ b/internal/util/time.go @@ -28,3 +28,8 @@ const ISO8601 = "2006-01-02T15:04:05.000Z" func FormatISO8601(t time.Time) string { return t.UTC().Format(ISO8601) } + +// ParseISO8601 parses the given time string according to the ISO8601 const. +func ParseISO8601(in string) (time.Time, error) { + return time.Parse(ISO8601, in) +} 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, .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; - line-height: 2rem; - margin-top: -0.5rem; - align-self: start; - - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; } - + .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 @@
-
Joined {{.account.CreatedAt | timestampShort}}
+
Joined {{.account.CreatedAt | timestampVague}}
Followed by {{.account.FollowersCount}}
Following {{.account.FollowingCount}}
Posted {{.account.StatusesCount}}
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 @@ {{if .Account.DisplayName}}{{emojify .Account.Emojis (escape .Account.DisplayName)}}{{else}}{{.Account.Username}}{{end}} @{{.Account.Acct}}
- {{.Visibility | visibilityIcon}} {{.CreatedAt | timestamp}}
@@ -45,7 +44,7 @@ {{end}}
-
{{.CreatedAt | timestamp}}
+
{{.CreatedAt | timestampPrecise}}
{{.RepliesCount}}
{{.ReblogsCount}}