diff --git a/internal/webserver/response_helpers.go b/internal/webserver/response_helpers.go index 57c77fc..e5b6a19 100644 --- a/internal/webserver/response_helpers.go +++ b/internal/webserver/response_helpers.go @@ -99,7 +99,6 @@ func (app *Application) get_active_user() scraper.User { return app.ActiveUser } - func func_map(extras template.FuncMap) template.FuncMap { ret := sprig.FuncMap() for i := range extras { diff --git a/internal/webserver/static/styles.css b/internal/webserver/static/styles.css index 6feb94c..6ab3826 100644 --- a/internal/webserver/static/styles.css +++ b/internal/webserver/static/styles.css @@ -1,10 +1,10 @@ :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; + --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); @@ -24,11 +24,11 @@ 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; + /* 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%; + margin: 0 30%; border-color: var(--color-twitter-off-white-dark); border-right-style: solid; border-left-style: solid; @@ -38,212 +38,217 @@ body { font-family: "Titillium Web"; } main { - padding-top: 4em; + padding-top: 4em; } input, select { - font-family: inherit; - font-size: 1em; - padding: 0.2em 0.6em; - box-sizing: border-box; - border-radius: 0.5em; + font-family: inherit; + font-size: 1em; + padding: 0.2em 0.6em; + box-sizing: border-box; + border-radius: 0.5em; } .tweet { - padding: 0 1.5em; + padding: 0 1.5em; } :not(.focused-tweet) > .tweet { - cursor: pointer; + cursor: pointer; } .quoted-tweet { - padding: 1.3em; - margin-top: 1em; + padding: 1.3em; + margin-top: 1em; - outline-color: lightgray; - outline-style: solid; - outline-width: 1px; - border-radius: 20px; + outline-color: lightgray; + outline-style: solid; + outline-width: 1px; + border-radius: 20px; } .profile-banner-image { - width: 100%; + width: 100%; } .unstyled-link { - text-decoration: none; - color: inherit; + text-decoration: none; + color: inherit; } .author-info { - display: flex; - align-items: center; + display: flex; + align-items: center; +} +.author-info a { + line-height: 0; } .author-info, .tweet-text { - cursor: default; + cursor: default; } .name-and-handle { - padding: 0 0.5em; + padding: 0 0.6em !important; /* !important to make the ".quick-link .span" rule in the login button not overrule it */ } .display-name { - font-weight: bold; + font-weight: bold; } .handle { - color: var(--color-twitter-text-gray); + color: var(--color-twitter-text-gray); } .tweet-header-container { - display: flex; - align-items: center; + display: flex; + align-items: center; } .reply-mentions-container { - display: flex; - align-items: center; - margin: 0 5em; + display: flex; + align-items: center; + margin: 0 5em; + cursor: default; } ul.reply-mentions { - list-style: none; - padding: 0.5em; + list-style: none; + padding: 0 0.5em; + margin: 0; } ul.reply-mentions li { - display: inline; + display: inline; } ul.reply-mentions li:after { - content: " ⋅"; + content: " ⋅"; } ul.reply-mentions li:last-child:after { - content: ""; + content: ""; } .replying-to-label { - color: var(--color-twitter-text-gray); + color: var(--color-twitter-text-gray); } -a.mention { - text-decoration: none; - color: var(--color-twitter-blue); +a.entity { + text-decoration: none; + color: var(--color-twitter-blue); } .tweet-text { - display: block; - margin-bottom: 0.4em; - margin-top: 0; -/* padding-bottom: 0.5em;*/ + display: block; + margin-bottom: 0.4em; + margin-top: 0; } .focused-tweet .tweet-text { - font-size: 1.4em; + font-size: 1.4em; } .focused-tweet .quoted-tweet .tweet-text { - font-size: unset; + font-size: unset; } .thread-parent-tweet:first-child, .focused-tweet:first-child { - padding-top: 1em; + padding-top: 1em; } .thread-parent-tweet .vertical-reply-line-container, .reply-chain .vertical-reply-line-container { - width: 3em; - margin-right: 0.5em; + 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; + 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); + 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; + font-size: 1.3em; + padding: 1em; } .user-feed-header .profile-image { - width: 8em; + width: 8em; } -.horizontal-container-1 { - display: flex; - flex-direction: row; +.row { + display: flex; + flex-direction: row; + align-items: center; } .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 */ + 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; + flex-grow: 1; + flex-shrink: 1; } .posted-at-container { - flex-grow: 1; + flex-grow: 1; } p.posted-at { - float: right; - color: var(--color-twitter-text-gray); - font-size: 0.875em; + float: right; + color: var(--color-twitter-text-gray); + font-size: 0.875em; } .interactions-bar { - display: flex; - flex-direction: row; - margin: 0.5em 0; + display: flex; + flex-direction: row; + margin: 0.5em 0; } .interaction-stat { - flex-grow: 1; - display: flex; + flex-grow: 1; + display: flex; } .interaction-stat span { - line-height: 1.5em; - padding: 0 0.5em; + line-height: 1.5em; + padding: 0 0.5em; } .interactions-bar .dummy { - flex-grow: 5; + flex-grow: 5; } .focused-tweet { - border-bottom: 1px solid var(--color-twitter-off-white-dark); - padding-bottom: 0.5em; + border-bottom: 1px solid var(--color-twitter-off-white-dark); + padding-bottom: 0.5em; } .reply-chain { - margin-top: 1em; + margin-top: 1em; } .reply-chain > :last-child { - padding-bottom: 1em; - border-bottom: 1px solid var(--color-twitter-off-white-dark); + padding-bottom: 1em; + border-bottom: 1px solid var(--color-twitter-off-white-dark); } .nav-sidebar { - display: flex; - flex-direction: column; + 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; + display: flex; + flex-direction: column; + list-style: none; + align-items: flex-start; + padding: 0 2em; } .quick-link { - display: flex; + display: flex; flex-direction: row; align-items: center; padding: 0.5em; @@ -255,33 +260,33 @@ ul.quick-links { background-color: var(--color-twitter-blue-light); } .quick-link:active { - transform: translate(2px, 2px); + transform: translate(0.1em, 0.1em); background-color: var(--color-twitter-blue); } .quick-link span { - padding: 0 0.3em; + padding: 0 0.3em; } .followers-count, .following-count { - font-weight: bold; + font-weight: bold; } .followers-label, .following-label { - color: var(--color-twitter-text-gray); + color: var(--color-twitter-text-gray); } .bio-info-with-icon { - display: flex; - flex-direction: row; - align-items: center; - gap: 0.3em; + display: flex; + flex-direction: row; + align-items: center; + gap: 0.3em; } .user-feed-header-info-container { - padding: 2em; + 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); + border-bottom: 1px solid var(--color-twitter-off-white-dark); padding-top: 0.8em; padding-bottom: 0.8em; } @@ -291,7 +296,7 @@ ul.quick-links { flex-direction: row; align-items: center; height: 4em; - padding: 0.5em 2em; + padding: 0.5em 1em; gap: 1em; border: 1px solid var(--color-outline-gray); position: fixed; @@ -302,20 +307,22 @@ ul.quick-links { } .back-button { - flex-grow: 0; + flex-grow: 0; border-radius: 50%; border: 2px solid black; width: 2em; position: relative; height: 2em; + box-sizing: border-box; + cursor: pointer; } img.svg-icon { - width: 1.5em; + width: 1.5em; } svg { - width: 1.5em; + width: 1.5em; } .back-button img { color: rgb(239, 243, 244); @@ -325,12 +332,12 @@ svg { transform: translate(-50%, -50%); } .search-bar { - flex-grow: 1; + flex-grow: 1; } .login { - width: 60%; - margin: 20% auto; + width: 60%; + margin: 20% auto; } .login-form input { width: 100%; @@ -349,13 +356,13 @@ svg { } .field-container { - padding: 0.5em 0; + padding: 0.5em 0; } .submit-container { - text-align: right; + text-align: right; } input[type="submit"] { - background-color: var(--color-twitter-blue-light); + background-color: var(--color-twitter-blue-light); width: 10em; padding: 1em; margin-top: 1em; @@ -364,17 +371,17 @@ input[type="submit"] { cursor: pointer; } .change-session-form select { - display: block; - width: 100%; + display: block; + width: 100%; } #logged-in-user-info { - font-size: 0.8em; - margin-top: 1em; + font-size: 0.8em; + margin-top: 1em; display: flex; flex-direction: column; align-items: center; } .quick-link .author-info { - pointer-events: none; + pointer-events: none; } diff --git a/internal/webserver/tpl/includes/base.tpl b/internal/webserver/tpl/includes/base.tpl index c625cbc..8bd3f19 100644 --- a/internal/webserver/tpl/includes/base.tpl +++ b/internal/webserver/tpl/includes/base.tpl @@ -11,9 +11,9 @@
-
+ -
+
{{template "nav-sidebar"}} diff --git a/internal/webserver/tpl/includes/nav_sidebar.tpl b/internal/webserver/tpl/includes/nav_sidebar.tpl index 3159bf4..a46b612 100644 --- a/internal/webserver/tpl/includes/nav_sidebar.tpl +++ b/internal/webserver/tpl/includes/nav_sidebar.tpl @@ -55,12 +55,14 @@ Verified - -
  • - - Profile -
    • -     + {{if (not (eq (active_user).Handle "[nobody]"))}} + +
  • + + Profile +
    • +     + {{end}}
  • diff --git a/internal/webserver/tpl/tweet_page_includes/single_tweet.tpl b/internal/webserver/tpl/tweet_page_includes/single_tweet.tpl index 17ec829..012457b 100644 --- a/internal/webserver/tpl/tweet_page_includes/single_tweet.tpl +++ b/internal/webserver/tpl/tweet_page_includes/single_tweet.tpl @@ -15,11 +15,11 @@ {{template "author-info" $author}} {{if $main_tweet.ReplyMentions}} -
    - Replying to +
    + Replying to
    @@ -32,18 +32,18 @@

    -
    +
    -

    - {{range (split "\n" $main_tweet.Text)}} -

    {{.}}

    - {{end}} -

    + {{range (split "\n" $main_tweet.Text)}} +

    + {{.}} +

    + {{end}} {{range $main_tweet.Images}} diff --git a/internal/webserver/tpl/user_feed.tpl b/internal/webserver/tpl/user_feed.tpl index 90cf8a5..2e0d168 100644 --- a/internal/webserver/tpl/user_feed.tpl +++ b/internal/webserver/tpl/user_feed.tpl @@ -13,24 +13,32 @@
    {{$user.Bio}}
    -
    - - {{$user.Location}} -
    -
    - - {{$user.Website}} -
    + {{if $user.Location}} +
    + + {{$user.Location}} +
    + {{end}} + {{if $user.Website}} +
    + + {{$user.Website}} +
    + {{end}}
    {{$user.JoinDate.Time.Format "Jan 2, 2006"}}
    -
    - {{$user.FollowersCount}} - followers - is following - {{$user.FollowingCount}} +
    +
    + {{$user.FollowersCount}} + followers +
    +
    + is following + {{$user.FollowingCount}} +