me/offline-twitter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make Followers/Followees pages show the user header at the top

Browse Source 
- also make the followees/followers count indicators in a user header link to their respective pages
This commit is contained in:
Alessio 2023-12-31 16:32:43 -06:00
parent 0fdba20c58
commit 17c9ab77ea
6 changed files with 78 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
internal/webserver/handler_lists.go
View File

@ -8,6 +8,8 @@ import (
type ListData struct {
Title string
HeaderUserID scraper.UserID
HeaderTweetID scraper.TweetID
UserIDs []scraper.UserID
}

2
internal/webserver/handler_user_feed.go
View File

@ -116,11 +116,13 @@ func (app *Application) UserFollowees(w http.ResponseWriter, r *http.Request, us
data, trove := NewListData(app.Profile.GetFollowees(user.ID))
trove.Users[user.ID] = user // Not loaded otherwise; needed to profile image in the login button on the sidebar
data.Title = fmt.Sprintf("Followed by @%s", user.Handle)
data.HeaderUserID = user.ID
app.buffered_render_page(w, "tpl/list.tpl", PageGlobalData{TweetTrove: trove}, data)
}
func (app *Application) UserFollowers(w http.ResponseWriter, r *http.Request, user scraper.User) {
data, trove := NewListData(app.Profile.GetFollowers(user.ID))
trove.Users[user.ID] = user
data.Title = fmt.Sprintf("@%s's followers", user.Handle)
data.HeaderUserID = user.ID
app.buffered_render_page(w, "tpl/list.tpl", PageGlobalData{TweetTrove: trove}, data)
}

8
internal/webserver/static/styles.css
View File

@ -216,14 +216,14 @@ h3 {
border: 1px solid var(--color-outline-gray);
}
.user-feed-header {
.user-header {
border-bottom: 1px solid var(--color-outline-gray);
}
.user-feed-header .author-info {
.user-header .author-info {
font-size: 1.3em;
padding: 1em;
}
.user-feed-header .profile-image {
.user-header .profile-image {
width: 8em;
height: 8em;
}
@ -354,7 +354,7 @@ ul.quick-links {
align-items: center;
gap: 0.3em;
}
.user-feed-header-info-container {
.user-header-info-container {
padding: 2em;
border-bottom: 1px solid var(--color-outline-gray);
}

59
internal/webserver/tpl/includes/user_header.tpl Normal file
View File

@ -0,0 +1,59 @@
{{define "user-header"}}
<div class="user-header">
{{if .BannerImageLocalPath}}
{{if .IsContentDownloaded}}
<img class="profile-banner-image" src="/content/profile_images/{{.BannerImageLocalPath}}" />
{{else}}
<img class="profile-banner-image" src="{{.BannerImageUrl}}" />
{{end}}
{{end}}
<div class="user-header-info-container">
<div class="row">
{{template "author-info" .}}
{{template "following-button" .}}
</div>
<div class="user-bio">
{{template "text-with-entities" .Bio}}
</div>
{{if .Location}}
<div class="user-location bio-info-with-icon">
<img class="svg-icon" src="/static/icons/location.svg" />
<span>{{.Location}}</span>
</div>
{{end}}
{{if .Website}}
<div class="user-website bio-info-with-icon">
<img class="svg-icon" src="/static/icons/website.svg" />
<a class="unstyled-link" target="_blank" href="{{.Website}}">{{.Website}}</a>
</div>
{{end}}
<div class="user-join-date bio-info-with-icon">
<img class="svg-icon" src="/static/icons/calendar.svg" />
<span>{{.JoinDate.Time.Format "Jan 2, 2006"}}</span>
</div>
<div class="followers-followees-container row">
<a href="/{{.Handle}}/followers" class="followers-container unstyled-link">
<span class="followers-count">{{.FollowersCount}}</span>
<span class="followers-label">followers</span>
</a>
<a href="/{{.Handle}}/followees" class="followers-container unstyled-link">
<span class="following-label">is following</span>
<span class="following-count">{{.FollowingCount}}</span>
</a>
<div class="spacer"></div>
<div class="user-feed-buttons-container">
<a class="unstyled-link quick-link" target="_blank" href="https://twitter.com/{{.Handle}}" title="Open on twitter.com">
<img class="svg-icon" src="/static/icons/external-link.svg" />
</a>
<a class="unstyled-link quick-link" hx-get="?scrape" hx-target="body" title="Refresh">
<img class="svg-icon" src="/static/icons/refresh.svg" />
</a>
</div>
</div>
</div>
</div>
{{end}}

10
internal/webserver/tpl/list.tpl
View File

@ -1,5 +1,15 @@
{{define "title"}}{{.Title}}{{end}}
{{define "main"}}
{{if .HeaderUserID}}
{{template "user-header" (user .HeaderUserID)}}
{{else if .HeaderTweetID}}
{{template "tweet" (tweet .HeaderTweetID)}}
{{end}}
<h3>
{{.Title}}
</h3>
{{template "list" .UserIDs}}
{{end}}

56
internal/webserver/tpl/user_feed.tpl
View File

@ -3,61 +3,7 @@
{{define "main"}}
{{$user := (user .UserID)}}
<div class="user-feed-header">
{{if $user.BannerImageLocalPath}}
{{if $user.IsContentDownloaded}}
<img class="profile-banner-image" src="/content/profile_images/{{$user.BannerImageLocalPath}}" />
{{else}}
<img class="profile-banner-image" src="{{$user.BannerImageUrl}}" />
{{end}}
{{end}}
<div class="user-feed-header-info-container">
<div class="row">
{{template "author-info" $user}}
{{template "following-button" $user}}
</div>
<div class="user-bio">
{{template "text-with-entities" $user.Bio}}
</div>
{{if $user.Location}}
<div class="user-location bio-info-with-icon">
<img class="svg-icon" src="/static/icons/location.svg" />
<span>{{$user.Location}}</span>
</div>
{{end}}
{{if $user.Website}}
<div class="user-website bio-info-with-icon">
<img class="svg-icon" src="/static/icons/website.svg" />
<a class="unstyled-link" target="_blank" href="{{$user.Website}}">{{$user.Website}}</a>
</div>
{{end}}
<div class="user-join-date bio-info-with-icon">
<img class="svg-icon" src="/static/icons/calendar.svg" />
<span>{{$user.JoinDate.Time.Format "Jan 2, 2006"}}</span>
</div>
<div class="followers-followees-container row">
<a href="/{{$user.Handle}}/followers" class="followers-container unstyled-link">
<span class="followers-count">{{$user.FollowersCount}}</span>
<span class="followers-label">followers</span>
</a>
<a href="/{{$user.Handle}}/followees" class="followers-container unstyled-link">
<span class="following-label">is following</span>
<span class="following-count">{{$user.FollowingCount}}</span>
</a>
<div class="spacer"></div>
<div class="user-feed-buttons-container">
<a class="unstyled-link quick-link" target="_blank" href="https://twitter.com/{{$user.Handle}}" title="Open on twitter.com">
<img class="svg-icon" src="/static/icons/external-link.svg" />
</a>
<a class="unstyled-link quick-link" hx-get="?scrape" hx-target="body" title="Refresh">
<img class="svg-icon" src="/static/icons/refresh.svg" />
</a>
</div>
</div>
</div>
{{template "user-header" $user}}
<div class="row tabs-container">
<a class="tab unstyled-link {{if (eq .FeedType "")}}active-tab{{end}}" href="/{{$user.Handle}}">