diff --git a/internal/webserver/static/icons/link.svg b/internal/webserver/static/icons/link.svg new file mode 100644 index 0000000..7b3654b --- /dev/null +++ b/internal/webserver/static/icons/link.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/internal/webserver/static/icons/link2.svg b/internal/webserver/static/icons/link2.svg new file mode 100644 index 0000000..f317053 --- /dev/null +++ b/internal/webserver/static/icons/link2.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/internal/webserver/static/icons/link3.svg b/internal/webserver/static/icons/link3.svg new file mode 100644 index 0000000..0e32cda --- /dev/null +++ b/internal/webserver/static/icons/link3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/internal/webserver/static/styles.css b/internal/webserver/static/styles.css index 78d6c67..671b890 100644 --- a/internal/webserver/static/styles.css +++ b/internal/webserver/static/styles.css @@ -58,7 +58,9 @@ input, select { .quoted-tweet { padding: 1.3em; margin-top: 1em; +} +.rounded-gray-outline { outline-color: lightgray; outline-style: solid; outline-width: 1px; @@ -144,6 +146,27 @@ a.entity { max-width: 100%; max-height: 40em; } +.embedded-link { + padding: 1.3em; + margin-top: 1em; + display: flex; + flex-direction: column; + background-color: var(--color-twitter-off-white); +} +.embedded-link-description { + color: var(--color-twitter-text-gray); + font-size: 0.8em; + margin: 0; +} +.embedded-link-title { + margin: 0.5em 0; +} +.embedded-link-domain-container { + margin-top: 0.2em +} +.embedded-link-domain { + margin-left: 0.3em; +} .thread-parent-tweet:first-child, .focused-tweet:first-child { padding-top: 1em; } @@ -413,3 +436,38 @@ input[type="submit"] { margin-top: 1em; gap: 4em; } + +.poll { + padding: 1em; +} +.poll-choice { + position: relative; + margin: 0.3em 0; +} +.poll-fill-bar { + position: absolute; + height: 100%; + z-index: -1; + background-color: var(--color-twitter-off-white-dark); +} +.poll-fill-bar.poll-winner { + background-color: var(--color-twitter-blue-light); +} +.poll-info-container { + width: 100%; + line-height: 2em; + margin: 0 0.5em; +} +.poll-choice-label { +/* flex-grow: 1;*/ + width: 50%; +} +.poll-choice-votes { + width: 50%; +/* flex-grow: 1;*/ +} +.poll-metadata { + color: var(--color-twitter-text-gray); + margin: 0; + font-size: 0.9em; +} diff --git a/internal/webserver/tpl/tweet_page_includes/poll.tpl b/internal/webserver/tpl/tweet_page_includes/poll.tpl new file mode 100644 index 0000000..7dbc24a --- /dev/null +++ b/internal/webserver/tpl/tweet_page_includes/poll.tpl @@ -0,0 +1,36 @@ +{{define "poll-choice"}} +
+
+
+ {{.label}} + {{.votes}} ({{printf "%.1f" (.poll.VotePercentage .votes)}}%) +
+
+ +{{end}} + + +{{define "poll"}} +
+ {{template "poll-choice" (dict "label" .Choice1 "votes" .Choice1_Votes "poll" .)}} + {{template "poll-choice" (dict "label" .Choice2 "votes" .Choice2_Votes "poll" .)}} + {{if (gt .NumChoices 2)}} + {{template "poll-choice" (dict "label" .Choice3 "votes" .Choice3_Votes "poll" .)}} + {{end}} + {{if (gt .NumChoices 3)}} + {{template "poll-choice" (dict "label" .Choice4 "votes" .Choice4_Votes "poll" .)}} + {{end}} + +

+ + {{if .IsOpen}} + Poll open, voting ends at {{.FormatEndsAt}} + {{else}} + Poll ended {{.FormatEndsAt}} + {{end}} + + - + {{.TotalVotes}} votes +

+
+{{end}} diff --git a/internal/webserver/tpl/tweet_page_includes/single_tweet.tpl b/internal/webserver/tpl/tweet_page_includes/single_tweet.tpl index 66707cb..84f260e 100644 --- a/internal/webserver/tpl/tweet_page_includes/single_tweet.tpl +++ b/internal/webserver/tpl/tweet_page_includes/single_tweet.tpl @@ -64,12 +64,26 @@ {{end}} + {{range $main_tweet.Urls}} + + +

{{.Title}}

+

{{.Description}}

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