From 26683b3d49beea9b1f0e8f78df4720285d4c0825 Mon Sep 17 00:00:00 2001 From: tobi <31960611+tsmethurst@users.noreply.github.com> Date: Fri, 15 Apr 2022 14:33:01 +0200 Subject: [feature] Web profile pages for accounts (#449) * add default avatars * allow webModule to error * return errWithCode from account get * add AccountGetLocalByUsername * check nil requesting account * add timestampShort function for just month/year * move loading logic to New + add default avatars * add profile page view * update swagger docs * add excludeReblogs to GetAccountStatuses * ignore casing when selecting local account by username * appropriate redirects * css fiddling * add 'about' heading * adjust thread page to work with routing * return AP representation if requested + authorized * simplify auth check * go fmt * golangci-lint ignore math/rand --- web/assets/base.css | 29 ++--- web/assets/default_avatars/GoToSocial_icon1.svg | 160 ++++++++++++++++++++++++ web/assets/default_avatars/GoToSocial_icon2.svg | 137 ++++++++++++++++++++ web/assets/default_avatars/GoToSocial_icon3.svg | 137 ++++++++++++++++++++ web/assets/default_avatars/GoToSocial_icon4.svg | 152 ++++++++++++++++++++++ web/assets/default_avatars/GoToSocial_icon5.svg | 152 ++++++++++++++++++++++ web/assets/default_avatars/GoToSocial_icon6.svg | 160 ++++++++++++++++++++++++ web/assets/profile.css | 90 +++++++++++++ web/gotosocial-styling/templates/profile.css | 94 ++++++++++++++ web/template/profile.tmpl | 47 +++++++ 10 files changed, 1144 insertions(+), 14 deletions(-) create mode 100644 web/assets/default_avatars/GoToSocial_icon1.svg create mode 100644 web/assets/default_avatars/GoToSocial_icon2.svg create mode 100644 web/assets/default_avatars/GoToSocial_icon3.svg create mode 100644 web/assets/default_avatars/GoToSocial_icon4.svg create mode 100644 web/assets/default_avatars/GoToSocial_icon5.svg create mode 100644 web/assets/default_avatars/GoToSocial_icon6.svg create mode 100644 web/assets/profile.css create mode 100644 web/gotosocial-styling/templates/profile.css create mode 100644 web/template/profile.tmpl (limited to 'web') diff --git a/web/assets/base.css b/web/assets/base.css index e105707c2..0ba9252c6 100644 --- a/web/assets/base.css +++ b/web/assets/base.css @@ -166,23 +166,24 @@ section.login form button { } section.error { - display: flex; - flex-direction: row; - align-items: center; + display: flex; + flex-direction: row; + align-items: center; } + section.error span { - font-size: 2em; -} -section.error pre { - border: 1px solid #ff000080; - margin-left: 1em; - padding: 0 0.7em; - border-radius: 0.5em; - background-color: #ff000010; - font-size: 1.3em; - white-space: pre-wrap; -} + font-size: 2em; + } +section.error pre { + border: 1px solid #ff000080; + margin-left: 1em; + padding: 0 0.7em; + border-radius: 0.5em; + background-color: #ff000010; + font-size: 1.3em; + white-space: pre-wrap; + } input, select, textarea { border: 1px solid #fafaff; diff --git a/web/assets/default_avatars/GoToSocial_icon1.svg b/web/assets/default_avatars/GoToSocial_icon1.svg new file mode 100644 index 000000000..9b4e7665e --- /dev/null +++ b/web/assets/default_avatars/GoToSocial_icon1.svg @@ -0,0 +1,160 @@ + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/default_avatars/GoToSocial_icon2.svg b/web/assets/default_avatars/GoToSocial_icon2.svg new file mode 100644 index 000000000..cdd49ddaa --- /dev/null +++ b/web/assets/default_avatars/GoToSocial_icon2.svg @@ -0,0 +1,137 @@ + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/default_avatars/GoToSocial_icon3.svg b/web/assets/default_avatars/GoToSocial_icon3.svg new file mode 100644 index 000000000..205e229c9 --- /dev/null +++ b/web/assets/default_avatars/GoToSocial_icon3.svg @@ -0,0 +1,137 @@ + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/default_avatars/GoToSocial_icon4.svg b/web/assets/default_avatars/GoToSocial_icon4.svg new file mode 100644 index 000000000..ec6a46212 --- /dev/null +++ b/web/assets/default_avatars/GoToSocial_icon4.svg @@ -0,0 +1,152 @@ + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/default_avatars/GoToSocial_icon5.svg b/web/assets/default_avatars/GoToSocial_icon5.svg new file mode 100644 index 000000000..c505b67d7 --- /dev/null +++ b/web/assets/default_avatars/GoToSocial_icon5.svg @@ -0,0 +1,152 @@ + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/default_avatars/GoToSocial_icon6.svg b/web/assets/default_avatars/GoToSocial_icon6.svg new file mode 100644 index 000000000..43db9cbf0 --- /dev/null +++ b/web/assets/default_avatars/GoToSocial_icon6.svg @@ -0,0 +1,160 @@ + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + diff --git a/web/assets/profile.css b/web/assets/profile.css new file mode 100644 index 000000000..7631b08ab --- /dev/null +++ b/web/assets/profile.css @@ -0,0 +1,90 @@ +main { + background: transparent; +} + +.headerimage img { + width: 100%; + height: 15em; + object-fit: cover; + border-radius: 10px; + } + +.profile { + position: relative; + background: rgb(75, 84, 93); + padding: 2rem; + display: flex; + flex-wrap: wrap; + justify-content: space-around; + gap: 0.5rem; + margin-bottom: 0.2rem; +} + +.profile .basic { + display: flex; + flex-direction: column; + flex: 1 1 25em; + gap: 0.5rem; + } + +.profile .basic a { + position: relative; + z-index: 1; + color: inherit; + text-decoration: none; + } + +.profile .basic .avatar img { + height: 25em; + width: 25em; + object-fit: cover; + border-radius: 10px; + } + +.profile .basic .displayname { + font-weight: bold; + font-size: 1.6rem; + align-self: start; + } + +.profile .detailed { + display: flex; + flex-direction: column; + flex: 1 1 25em; + } + +.profile .detailed h2 { + margin-top: 0; + } + +.profile .detailed .bio { + margin: 0; + } + +.profile .detailed .bio a { + color: #de8957; + text-decoration: underline; + } + +.accountstats { + position: relative; + background: rgb(75, 84, 93); + padding: 0.5rem; + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + gap: 0.5rem; + margin-bottom: 0.2rem; +} + +.accountstats .entry { + background: rgb(89, 99, 110); + padding: 0.5rem; + flex-grow: 1; + text-align: center; + } + +footer + div { + /* something weird from the devstack.. */ + display: none; +} diff --git a/web/gotosocial-styling/templates/profile.css b/web/gotosocial-styling/templates/profile.css new file mode 100644 index 000000000..167ed7b9e --- /dev/null +++ b/web/gotosocial-styling/templates/profile.css @@ -0,0 +1,94 @@ +main { + background: transparent; +} + +.headerimage { + img { + width: 100%; + height: 15em; + object-fit: cover; + border-radius: 10px; + } +} + +.profile { + position: relative; + background: color($bg lightness(-3%)); + padding: 2rem; + display: flex; + flex-wrap: wrap; + justify-content: space-around; + gap: 0.5rem; + margin-bottom: 0.2rem; + + .basic { + display: flex; + flex-direction: column; + flex: 1 1 25em; + gap: 0.5rem; + + a { + position: relative; + z-index: 1; + color: inherit; + text-decoration: none; + } + + .avatar { + img { + height: 25em; + width: 25em; + object-fit: cover; + border-radius: 10px; + } + } + + .displayname { + font-weight: bold; + font-size: 1.6rem; + align-self: start; + } + } + + .detailed { + display: flex; + flex-direction: column; + flex: 1 1 25em; + + h2 { + margin-top: 0; + } + + .bio { + margin: 0; + + a { + color: $acc1; + text-decoration: underline; + } + } + } +} + +.accountstats { + position: relative; + background: color($bg lightness(-3%)); + padding: 0.5rem; + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + gap: 0.5rem; + margin-bottom: 0.2rem; + + .entry { + background: color($bg lightness(+3%)); + padding: 0.5rem; + flex-grow: 1; + text-align: center; + } +} + +footer + div { + /* something weird from the devstack.. */ + display: none; +} diff --git a/web/template/profile.tmpl b/web/template/profile.tmpl new file mode 100644 index 000000000..cfabeee6f --- /dev/null +++ b/web/template/profile.tmpl @@ -0,0 +1,47 @@ +{{ template "header.tmpl" .}} +
+ {{ if .account.Header }}{{ end }} +
+
+ {{if .account.DisplayName}}{{.account.DisplayName}}{{else}}{{.account.Username}}{{end}} + @{{.account.Username}} + +
+
+

About @{{.account.Username}}

+
+ {{ if .account.Note }}{{ .account.Note | noescape }}{{else}}This GoToSocial user hasn't written a bio yet!{{end}} +
+
+
+
+
Joined {{.account.CreatedAt | timestampShort}}
+
Followed by {{.account.FollowersCount}}
+
Following {{.account.FollowingCount}}
+
Posted {{.account.StatusesCount}}
+
+

Recent public posts by @{{.account.Username}}

+
+ {{range .statuses}} +
+ {{ template "status.tmpl" .}} +
+ {{end}} +
+
+ +{{ template "footer.tmpl" .}} \ No newline at end of file -- cgit v1.3