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

Add users search page

Browse Source
This commit is contained in:
Alessio 2023-11-07 12:21:53 -04:00
parent 8079d44781
commit ae749a19d2
6 changed files with 102 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
internal/webserver/handler_search.go
View File

@ -17,6 +17,8 @@ type SearchPageData struct {
SearchText string
SortOrder persistence.SortOrder
SortOrderOptions []string
IsUsersSearch bool
UsersList []scraper.User
// TODO: fill out the search text in the search bar as well (needs modifying the base template)
}
@ -44,6 +46,14 @@ func (t SearchPageData) FocusedTweetID() scraper.TweetID {
return scraper.TweetID(0)
}
func (app *Application) SearchUsers(w http.ResponseWriter, r *http.Request) {
ret := NewSearchPageData()
ret.IsUsersSearch = true
ret.SearchText = strings.Trim(r.URL.Path, "/")
ret.UsersList = app.Profile.SearchUsers(ret.SearchText)
app.buffered_render_tweet_page(w, "tpl/search.tpl", ret)
}
func (app *Application) Search(w http.ResponseWriter, r *http.Request) {
app.traceLog.Printf("'Search' handler (path: %q)", r.URL.Path)
@ -60,6 +70,12 @@ func (app *Application) Search(w http.ResponseWriter, r *http.Request) {
return
}
// Handle users search
if r.URL.Query().Get("type") == "users" {
app.SearchUsers(w, r)
return
}
// Handle "@username"
if search_text[0] == '@' {
http.Redirect(w, r, fmt.Sprintf("/%s", search_text[1:]), 302)

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

@ -222,7 +222,10 @@ h3 {
.user-feed-header .profile-image {
width: 8em;
}
.user-feed-header a.user-feed-tab {
.tabs-container {
outline: 1px solid var(--color-outline-gray);
}
.tabs-container a.tab {
flex-grow: 1;
text-align: center;
font-size: 1.1em;
@ -230,11 +233,11 @@ h3 {
color: var(--color-twitter-text-gray);
padding: 0.8em;
}
.user-feed-header a.user-feed-tab.active-tab {
.tabs-container a.tab.active-tab {
color: var(--color-twitter-blue);
border-bottom: 0.2em solid var(--color-twitter-blue);
}
.user-feed-header a.user-feed-tab:hover {
.tabs-container a.tab:hover {
color: var(--color-twitter-blue);
}
@ -348,7 +351,6 @@ ul.quick-links {
}
.user-feed-header-info-container {
padding: 2em;
margin-bottom: 0.1em;
border-bottom: 1px solid var(--color-outline-gray);
}
.timeline .tweet, .quoted-tweet .tweet {
@ -600,9 +602,30 @@ ul.dropdown-items {
.users-list-container {
display: flex;
flex-direction: column;
gap: 1em;
padding: 1em;
}
.users-list-container .author-info .profile-image {
width: 4em;
}
.users-list-container .user {
border-color: var(--color-twitter-off-white-dark);
border-bottom-style: solid;
border-width: 1px;
padding: 1em;
}
.users-list-container .user p.bio {
margin: 0 5.3em;
font-size: 0.9em;
color: var(--color-twitter-text-gray);
}
.sort-order-container {
padding: 1em 1em 1em 3em;
margin-bottom: -0.5em;
border-bottom: 1px solid var(--color-outline-gray);
}
.sort-order-container select {
text-transform: capitalize;
margin: 0 1em;
}
.sort-order-container .sort-order-label {
font-weight: bold;
}

10
internal/webserver/tpl/includes/list.tpl Normal file
View File

@ -0,0 +1,10 @@
{{define "list"}}
<div class="users-list-container">
{{range .}}
<div class="user">
{{template "author-info" .}}
<p class="bio">{{.Bio}}</p>
</div>
{{end}}
</div>
{{end}}

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

@ -1,9 +1,5 @@
{{define "title"}}Followed Users{{end}}
{{define "main"}}
<div class="users-list-container">
{{range .}}
{{template "author-info" .}}
{{end}}
</div>
{{template "list" .}}
{{end}}

30
internal/webserver/tpl/search.tpl
View File

@ -2,13 +2,36 @@
{{define "main"}}
<div class="search-header">
<h2>Search results: {{.SearchText}}</h2>
<select name="sort-order" style="text-transform: capitalize;" hx-get="#" hx-target="body" hx-push-url="true">
<h2 style="text-align: center">Search results: {{.SearchText}}</h2>
<div class="row tabs-container">
<a
class="tab unstyled-link {{if (not .IsUsersSearch)}}active-tab{{end}}"
href="?type=tweets"
>
<span class="tab-inner">Tweets</span>
</a>
<a
class="tab unstyled-link {{if .IsUsersSearch}}active-tab{{end}}"
href="?type=users"
>
<span class="tab-inner">Users</span>
</a>
</div>
</div>
{{if .IsUsersSearch}}
{{template "list" .UsersList}}
{{else}}
<div class="sort-order-container">
<span class="sort-order-label">order:</span>
<select name="sort-order" hx-get="#" hx-target="body" hx-push-url="true">
{{range .SortOrderOptions}}
<option
value="{{.}}"
{{if (eq ($.SortOrder.String) .)}} selected {{end}}
style="text-transform: capitalize;"
{{if (eq ($.SortOrder.String) .)}}
selected
{{end}}
>{{.}}</option>
{{end}}
</select>
@ -16,4 +39,5 @@
<div class="timeline">
{{template "timeline" .}}
</div>
{{end}}
{{end}}

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

@ -58,18 +58,18 @@
</div>
</div>
<div class="row user-feed-tabs-container">
<a class="user-feed-tab unstyled-link {{if (eq .FeedType "")}}active-tab{{end}}" href="/{{$user.Handle}}">
<span class="user-feed-tab-inner">Tweets and replies</span>
<div class="row tabs-container">
<a class="tab unstyled-link {{if (eq .FeedType "")}}active-tab{{end}}" href="/{{$user.Handle}}">
<span class="tab-inner">Tweets and replies</span>
</a>
<a class="user-feed-tab unstyled-link {{if (eq .FeedType "without_replies")}}active-tab{{end}}" href="/{{$user.Handle}}/without_replies">
<span class="user-feed-tab-inner">Tweets</span>
<a class="tab unstyled-link {{if (eq .FeedType "without_replies")}}active-tab{{end}}" href="/{{$user.Handle}}/without_replies">
<span class="tab-inner">Tweets</span>
</a>
<a class="user-feed-tab unstyled-link {{if (eq .FeedType "media")}}active-tab{{end}}" href="/{{$user.Handle}}/media">
<span class="user-feed-tab-inner">Media</span>
<a class="tab unstyled-link {{if (eq .FeedType "media")}}active-tab{{end}}" href="/{{$user.Handle}}/media">
<span class="tab-inner">Media</span>
</a>
<a class="user-feed-tab unstyled-link {{if (eq .FeedType "likes")}}active-tab{{end}}" href="/{{$user.Handle}}/likes">
<span class="user-feed-tab-inner">Likes</span>
<a class="tab unstyled-link {{if (eq .FeedType "likes")}}active-tab{{end}}" href="/{{$user.Handle}}/likes">
<span class="tab-inner">Likes</span>
</a>
</div>
</div>