From dcdec91d6207d2aac380cf560391b98099fec131 Mon Sep 17 00:00:00 2001 From: Alessio Date: Sat, 5 Aug 2023 19:00:33 -0300 Subject: [PATCH] Add a ton of stuff to make everything look way better (no major behavior differences though) --- internal/webserver/server.go | 3 + internal/webserver/static/icons/back.svg | 1 + internal/webserver/static/icons/bookmarks.svg | 1 + internal/webserver/static/icons/calendar.svg | 1 + .../webserver/static/icons/communities.svg | 1 + internal/webserver/static/icons/explore.svg | 1 + internal/webserver/static/icons/home.svg | 1 + internal/webserver/static/icons/like.svg | 1 + internal/webserver/static/icons/lists.svg | 1 + internal/webserver/static/icons/location.svg | 1 + internal/webserver/static/icons/messages.svg | 1 + internal/webserver/static/icons/more.svg | 1 + .../webserver/static/icons/notifications.svg | 1 + internal/webserver/static/icons/profile.svg | 1 + internal/webserver/static/icons/reply.svg | 1 + internal/webserver/static/icons/retweet.svg | 1 + internal/webserver/static/icons/verified.svg | 1 + internal/webserver/static/icons/website.svg | 1 + internal/webserver/static/styles.css | 284 +++++++++++++++++- .../webserver/tpl/includes/author_info.tpl | 2 +- internal/webserver/tpl/includes/base.tpl | 12 +- .../webserver/tpl/includes/nav_sidebar.tpl | 66 ++++ .../webserver/tpl/includes/single_tweet.tpl | 105 +++++-- internal/webserver/tpl/tweet_detail.tpl | 20 +- internal/webserver/tpl/user_feed.tpl | 51 ++-- 25 files changed, 487 insertions(+), 73 deletions(-) create mode 100644 internal/webserver/static/icons/back.svg create mode 100644 internal/webserver/static/icons/bookmarks.svg create mode 100644 internal/webserver/static/icons/calendar.svg create mode 100644 internal/webserver/static/icons/communities.svg create mode 100644 internal/webserver/static/icons/explore.svg create mode 100644 internal/webserver/static/icons/home.svg create mode 100644 internal/webserver/static/icons/like.svg create mode 100644 internal/webserver/static/icons/lists.svg create mode 100644 internal/webserver/static/icons/location.svg create mode 100644 internal/webserver/static/icons/messages.svg create mode 100644 internal/webserver/static/icons/more.svg create mode 100644 internal/webserver/static/icons/notifications.svg create mode 100644 internal/webserver/static/icons/profile.svg create mode 100644 internal/webserver/static/icons/reply.svg create mode 100644 internal/webserver/static/icons/retweet.svg create mode 100644 internal/webserver/static/icons/verified.svg create mode 100644 internal/webserver/static/icons/website.svg create mode 100644 internal/webserver/tpl/includes/nav_sidebar.tpl diff --git a/internal/webserver/server.go b/internal/webserver/server.go index 744a5b4..fe9e388 100644 --- a/internal/webserver/server.go +++ b/internal/webserver/server.go @@ -83,6 +83,8 @@ func (app *Application) ServeHTTP(w http.ResponseWriter, r *http.Request) { http.StripPrefix("/static", http.FileServer(http.Dir(get_filepath("static")))).ServeHTTP(w, r) case "tweet": app.TweetDetail(w, r) + case "content": + http.StripPrefix("/content", http.FileServer(http.Dir(app.Profile.ProfileDir))).ServeHTTP(w, r) default: app.UserFeed(w, r) } @@ -110,6 +112,7 @@ func (app *Application) Home(w http.ResponseWriter, r *http.Request) { app.traceLog.Printf("'Home' handler (path: %q)", r.URL.Path) tpl, err := template.ParseFiles( get_filepath("tpl/includes/base.tpl"), + get_filepath("tpl/includes/nav_sidebar.tpl"), get_filepath("tpl/home.tpl"), ) panic_if(err) diff --git a/internal/webserver/static/icons/back.svg b/internal/webserver/static/icons/back.svg new file mode 100644 index 0000000..dae8b03 --- /dev/null +++ b/internal/webserver/static/icons/back.svg @@ -0,0 +1 @@ + diff --git a/internal/webserver/static/icons/bookmarks.svg b/internal/webserver/static/icons/bookmarks.svg new file mode 100644 index 0000000..c14730c --- /dev/null +++ b/internal/webserver/static/icons/bookmarks.svg @@ -0,0 +1 @@ + diff --git a/internal/webserver/static/icons/calendar.svg b/internal/webserver/static/icons/calendar.svg new file mode 100644 index 0000000..eef3b41 --- /dev/null +++ b/internal/webserver/static/icons/calendar.svg @@ -0,0 +1 @@ + diff --git a/internal/webserver/static/icons/communities.svg b/internal/webserver/static/icons/communities.svg new file mode 100644 index 0000000..a743f62 --- /dev/null +++ b/internal/webserver/static/icons/communities.svg @@ -0,0 +1 @@ + diff --git a/internal/webserver/static/icons/explore.svg b/internal/webserver/static/icons/explore.svg new file mode 100644 index 0000000..af97c1b --- /dev/null +++ b/internal/webserver/static/icons/explore.svg @@ -0,0 +1 @@ + diff --git a/internal/webserver/static/icons/home.svg b/internal/webserver/static/icons/home.svg new file mode 100644 index 0000000..1d816da --- /dev/null +++ b/internal/webserver/static/icons/home.svg @@ -0,0 +1 @@ + diff --git a/internal/webserver/static/icons/like.svg b/internal/webserver/static/icons/like.svg new file mode 100644 index 0000000..363a465 --- /dev/null +++ b/internal/webserver/static/icons/like.svg @@ -0,0 +1 @@ + diff --git a/internal/webserver/static/icons/lists.svg b/internal/webserver/static/icons/lists.svg new file mode 100644 index 0000000..c404648 --- /dev/null +++ b/internal/webserver/static/icons/lists.svg @@ -0,0 +1 @@ + diff --git a/internal/webserver/static/icons/location.svg b/internal/webserver/static/icons/location.svg new file mode 100644 index 0000000..6deead1 --- /dev/null +++ b/internal/webserver/static/icons/location.svg @@ -0,0 +1 @@ + diff --git a/internal/webserver/static/icons/messages.svg b/internal/webserver/static/icons/messages.svg new file mode 100644 index 0000000..671dae8 --- /dev/null +++ b/internal/webserver/static/icons/messages.svg @@ -0,0 +1 @@ + diff --git a/internal/webserver/static/icons/more.svg b/internal/webserver/static/icons/more.svg new file mode 100644 index 0000000..bad8c66 --- /dev/null +++ b/internal/webserver/static/icons/more.svg @@ -0,0 +1 @@ + diff --git a/internal/webserver/static/icons/notifications.svg b/internal/webserver/static/icons/notifications.svg new file mode 100644 index 0000000..ccba4d1 --- /dev/null +++ b/internal/webserver/static/icons/notifications.svg @@ -0,0 +1 @@ + diff --git a/internal/webserver/static/icons/profile.svg b/internal/webserver/static/icons/profile.svg new file mode 100644 index 0000000..daf4e9c --- /dev/null +++ b/internal/webserver/static/icons/profile.svg @@ -0,0 +1 @@ + diff --git a/internal/webserver/static/icons/reply.svg b/internal/webserver/static/icons/reply.svg new file mode 100644 index 0000000..c525827 --- /dev/null +++ b/internal/webserver/static/icons/reply.svg @@ -0,0 +1 @@ + diff --git a/internal/webserver/static/icons/retweet.svg b/internal/webserver/static/icons/retweet.svg new file mode 100644 index 0000000..37fcfa8 --- /dev/null +++ b/internal/webserver/static/icons/retweet.svg @@ -0,0 +1 @@ + diff --git a/internal/webserver/static/icons/verified.svg b/internal/webserver/static/icons/verified.svg new file mode 100644 index 0000000..233b081 --- /dev/null +++ b/internal/webserver/static/icons/verified.svg @@ -0,0 +1 @@ + diff --git a/internal/webserver/static/icons/website.svg b/internal/webserver/static/icons/website.svg new file mode 100644 index 0000000..50a8436 --- /dev/null +++ b/internal/webserver/static/icons/website.svg @@ -0,0 +1 @@ + diff --git a/internal/webserver/static/styles.css b/internal/webserver/static/styles.css index c0fdc70..1e58919 100644 --- a/internal/webserver/static/styles.css +++ b/internal/webserver/static/styles.css @@ -1,23 +1,53 @@ :root { --color-twitter-text-gray: #536171; + --color-twitter-blue: #1b95e0; /* hsv(203, 87.9, 87,8) */ + --color-twitter-blue-light: #7cc5f6; /* hsv(204, 49.6, 96.5) */ + --color-twitter-off-white: #f7f9f9; /* hsv(180, 0.8, 97.6) */ + --color-twitter-off-white-dark: #dae5e5; /* hsv(180, 4.8, 89.8) */ + --color-outline-gray: #dcdcdc; + +/* +const QColor COLOR_OUTLINE_GRAY = QColor(220, 220, 220); +const QColor COLOR_TWITTER_BLUE = QColor(27, 149, 224); +const QColor COLOR_TWITTER_BLUE_LIGHT = QColor(124,197,246); +const QColor COLOR_TWITTER_OFF_WHITE = QColor(247,249,249); +const QColor COLOR_TWITTER_OFF_WHITE_DARK = QColor(218,229,229); +const QColor COLOR_TWITTER_TEXT_GRAY = QColor(83, 100, 113); + +const QColor COLOR_BACKGROUND_GREEN = QColor(40, 205, 50); + +const QColor COLOR_RED = QColor(255, 0, 0); + +const QColor COLOR_SPACE_PURPLE = QColor(164, 155, 253); +const QColor COLOR_SPACE_PURPLE_OUTLINE = QColor(100, 82, 252); +*/ } - +html { + /* Force scrollbar, even when it fits on 1 page. Prevents viewport from resizing -> flickering / stuff moving btw page loads */ + overflow-y: scroll; +} body { margin: 0 30%; + border-color: var(--color-twitter-off-white-dark); + border-right-style: solid; + border-left-style: solid; + border-width: 1px; + min-height: 100vh; + + font-family: "Titillium Web"; +} +main { + padding-top: 4em; } .tweet { - padding: 20px; - - outline-color: lightgray; - outline-style: solid; - outline-width: 1px; - border-radius: 20px; + padding: 0 1.5em; } .quoted-tweet { - padding: 20px; + padding: 1.3em; + margin-top: 1em; outline-color: lightgray; outline-style: solid; @@ -32,14 +62,11 @@ body { .unstyled-link { text-decoration: none; color: inherit; - line-height: 0; } - .author-info { display: flex; align-items: center; - padding: 0.5em 0; } .name-and-handle { @@ -52,3 +79,238 @@ body { .handle { color: var(--color-twitter-text-gray); } + +.tweet-header-container { + display: flex; + align-items: center; +} +.reply-mentions-container { + display: flex; + align-items: center; + margin: 0 5em; +} +ul.reply-mentions { + list-style: none; + padding: 0.5em; +} +ul.reply-mentions li { + display: inline; +} +ul.reply-mentions li:after { + content: " ⋅"; +} +ul.reply-mentions li:last-child:after { + content: ""; +} +.replying-to-label { + color: var(--color-twitter-text-gray); +} +a.mention { + text-decoration: none; + color: var(--color-twitter-blue); +} + +.tweet-text { + display: block; + margin-bottom: 0.4em; +/* padding-bottom: 0.5em;*/ +} +.focused-tweet .tweet-text { + font-size: 1.4em; +} +.focused-tweet .quoted-tweet .tweet-text { + font-size: unset; +} + +.thread-parent-tweet:first-child, .focused-tweet:first-child { + padding-top: 1em; +} +.thread-parent-tweet .vertical-reply-line-container, +.reply-chain .vertical-reply-line-container { + width: 3em; + margin-right: 0.5em; +} +.thread-parent-tweet .vertical-reply-line, +.reply-chain > :not(:last-child) .vertical-reply-line { + width: 2px; + background-color: var(--color-twitter-off-white-dark); + flex-grow: 1; + margin: auto; +} + +.profile-image { + border-radius: 50%; + width: 3em; + display: inline; + border: 1px solid var(--color-outline-gray); +} + +.user-feed-header { + border-bottom: 1px solid var(--color-outline-gray); +} +.user-feed-header .author-info { + font-size: 1.3em; + padding: 1em; +} +.user-feed-header .profile-image { + width: 8em; +} + +.horizontal-container-1 { + display: flex; + flex-direction: row; +} +.vertical-reply-line-container { + flex-grow: 0; + flex-shrink: 0; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + width: 1em; /* will be overridden by, e.g., parent-thread properties */ +} +.vertical-container-1 { + flex-grow: 1; + flex-shrink: 1; +} + +.posted-at-container { + flex-grow: 1; +} +p.posted-at { + float: right; + color: var(--color-twitter-text-gray); + font-size: 0.875em; +} + +.interactions-bar { + display: flex; + flex-direction: row; + margin: 0.5em 0; +} +.interaction-stat { + flex-grow: 1; + display: flex; +} +.interaction-stat span { + line-height: 1.5em; + padding: 0 0.5em; +} +.interactions-bar .dummy { + flex-grow: 5; +} + +.focused-tweet { + border-bottom: 1px solid var(--color-twitter-off-white-dark); + padding-bottom: 0.5em; +} + + +.reply-chain { + margin-top: 1em; +} +.reply-chain > :last-child { + padding-bottom: 1em; + border-bottom: 1px solid var(--color-twitter-off-white-dark); +} +.nav-sidebar { + display: flex; + flex-direction: column; + position: fixed; + transform: translate(-100%, 0); + font-size: 1.4em; +} +ul.quick-links { + display: flex; + flex-direction: column; + list-style: none; + align-items: flex-start; + padding: 0 2em; +} +li.quick-link { + display: flex; + flex-direction: row; + align-items: center; + padding: 0.5em; + margin: 0.2em; + border-radius: 100em; /* any large amount, just don't use % because then it makes an ellipse */ +} +li.quick-link:hover { + background-color: var(--color-twitter-blue-light); +} +li.quick-link:active { + transform: translate(2px, 2px); + background-color: var(--color-twitter-blue); +} + +.quick-link span { + padding: 0 0.3em; +} + +.followers-count, .following-count { + font-weight: bold; +} +.followers-label, .following-label { + color: var(--color-twitter-text-gray); +} +.bio-info-with-icon { + display: flex; + flex-direction: row; + align-items: center; + gap: 0.3em; +} +.user-feed-header-info-container { + padding: 2em; + margin-bottom: 0.1em; + border-bottom: 1px solid var(--color-outline-gray); +} +.user-feed-tweets .tweet { + border-bottom: 1px solid var(--color-twitter-off-white-dark); + padding-top: 0.8em; + padding-bottom: 0.8em; +} + +.top-bar { + display: flex; + flex-direction: row; + align-items: center; + height: 4em; + padding: 0.5em 2em; + gap: 1em; + border: 1px solid var(--color-outline-gray); + position: fixed; + background-color: white; + width: 40%; + left: 30%; + box-sizing: border-box; +} + +.back-button { + flex-grow: 0; + border-radius: 50%; + border: 2px solid black; + width: 2em; + position: relative; + height: 2em; +} + +img.svg-icon { + width: 1.5em; +} + +svg { + width: 1.5em; +} +.back-button img { + color: rgb(239, 243, 244); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.search-bar { + flex-grow: 1; + font-size: 1em; + font-family: "Titillium Web"; + padding: 0.2em 0.5em; +} diff --git a/internal/webserver/tpl/includes/author_info.tpl b/internal/webserver/tpl/includes/author_info.tpl index c9bcb2c..fd24f06 100644 --- a/internal/webserver/tpl/includes/author_info.tpl +++ b/internal/webserver/tpl/includes/author_info.tpl @@ -1,7 +1,7 @@ {{define "author-info"}}
- +
{{.DisplayName}}
diff --git a/internal/webserver/tpl/includes/base.tpl b/internal/webserver/tpl/includes/base.tpl index 0721ed6..0ec263c 100644 --- a/internal/webserver/tpl/includes/base.tpl +++ b/internal/webserver/tpl/includes/base.tpl @@ -6,12 +6,16 @@ Offline Twitter | {{template "title" .}} - + -
-

Uhhhh

-
+
+
+ +
+ +
+ {{template "nav-sidebar"}}
{{template "main" .}}
diff --git a/internal/webserver/tpl/includes/nav_sidebar.tpl b/internal/webserver/tpl/includes/nav_sidebar.tpl new file mode 100644 index 0000000..34e4e48 --- /dev/null +++ b/internal/webserver/tpl/includes/nav_sidebar.tpl @@ -0,0 +1,66 @@ +{{define "nav-sidebar"}} +
+ +
+{{end}} diff --git a/internal/webserver/tpl/includes/single_tweet.tpl b/internal/webserver/tpl/includes/single_tweet.tpl index a0e3e61..e2d1e22 100644 --- a/internal/webserver/tpl/includes/single_tweet.tpl +++ b/internal/webserver/tpl/includes/single_tweet.tpl @@ -3,42 +3,81 @@ {{$main_tweet := (tweet .)}} {{$author := (user $main_tweet.UserID)}} - {{template "author-info" $author}} -
- {{$main_tweet.Text}} - - {{range $main_tweet.Images}} - +
+ {{template "author-info" $author}} + {{if $main_tweet.ReplyMentions}} +
+ Replying to +
    + {{range $main_tweet.ReplyMentions}} +
  • @{{.}}
    • + {{end}} +
+
{{end}} +
+

+ {{$main_tweet.PostedAt.Time.Format "Jan 2, 2006"}} +
+ {{$main_tweet.PostedAt.Time.Format "3:04 pm"}} +

+
+
+
+ +
+
+ + +
+ + {{$main_tweet.Text}} + - {{if $main_tweet.QuotedTweetID}} - {{$quoted_tweet := (tweet $main_tweet.QuotedTweetID)}} - {{$quoted_author := (user $quoted_tweet.UserID)}} - -
- {{template "author-info" $quoted_author}} -
-

{{$quoted_tweet.Text}}

- {{range $quoted_tweet.Images}} - - {{end}} -

{{$quoted_tweet.PostedAt}}

-
+ {{range $main_tweet.Images}} + + {{end}} + + {{if $main_tweet.QuotedTweetID}} + {{$quoted_tweet := (tweet $main_tweet.QuotedTweetID)}} + {{$quoted_author := (user $quoted_tweet.UserID)}} + +
+ {{template "author-info" $quoted_author}} +
+ + {{$quoted_tweet.Text}} + + {{range $quoted_tweet.Images}} + + {{end}} +

{{$quoted_tweet.PostedAt.Time.Format "Jan 2, 2006"}}

+
+
+ + {{end}} +
+ +
+ +
+ + {{$main_tweet.NumReplies}}
- - {{end}} - -

{{$main_tweet.PostedAt}}

-
- -
- {{$main_tweet.NumQuoteTweets}} QTs - {{$main_tweet.NumReplies}} replies - {{$main_tweet.NumRetweets}} retweets - {{$main_tweet.NumLikes}} likes -
-
- +
+ + {{$main_tweet.NumRetweets}} +
+
+ + {{$main_tweet.NumLikes}} +
+
+
+
{{end}} diff --git a/internal/webserver/tpl/tweet_detail.tpl b/internal/webserver/tpl/tweet_detail.tpl index e9698d7..8dcdf9c 100644 --- a/internal/webserver/tpl/tweet_detail.tpl +++ b/internal/webserver/tpl/tweet_detail.tpl @@ -3,15 +3,21 @@ {{define "main"}} {{range .ParentIDs}} - {{template "tweet" .}} +
+ {{template "tweet" .}} +
{{end}} - {{template "tweet" .MainTweetID}} -
+
+ {{template "tweet" .MainTweetID}} +
{{range .ReplyChains}} - {{range .}} - {{template "tweet" .}} - {{end}} -
+
+ {{range .}} +
+ {{template "tweet" .}} +
+ {{end}} +
{{end}} {{end}} diff --git a/internal/webserver/tpl/user_feed.tpl b/internal/webserver/tpl/user_feed.tpl index 3fc21e9..90cf8a5 100644 --- a/internal/webserver/tpl/user_feed.tpl +++ b/internal/webserver/tpl/user_feed.tpl @@ -2,25 +2,42 @@ {{define "main"}} {{$user := (user .UserID)}} - +
+ {{if $user.BannerImageLocalPath}} + + {{end}} - {{template "author-info" $user}} - -

{{$user.Bio}}

-

{{$user.Location}}

-

{{$user.Website}}

-

{{$user.JoinDate}}

+
+ {{template "author-info" $user}} + +
+ {{$user.Bio}} +
+
+ + {{$user.Location}} +
+
+ + {{$user.Website}} +
+
+ + {{$user.JoinDate.Time.Format "Jan 2, 2006"}} +
-
- {{$user.FollowersCount}} - followers - is following - {{$user.FollowingCount}} +
+ {{$user.FollowersCount}} + followers + is following + {{$user.FollowingCount}} +
+
-
- - {{range .Items}} - {{template "tweet" .TweetID}} - {{end}} +
+ {{range .Items}} + {{template "tweet" .TweetID}} + {{end}} +
{{end}}