tdsds.com/gitea
1
1
Fork 0
mirror of https://github.com/go-gitea/gitea synced 2025-12-06 12:58:26 +00:00
Code Releases Activity

Don't do a full page load when clicking the follow button (#28872)

Browse Source 
- Use htmx to perform the button request
- `hx-headers='{"x-csrf-token": "{{.CsrfToken}}"}'` to authenticate (we
should probably learn to reuse this)
- `hx-post="{{.ContextUser.HomeLink}}?action=follow"` to send a POST
request to follow the user
- `hx-target="#profile-avatar-card"` to target the card div for
replacement
- `hx-swap="outerHTML"` to replace the card (as opposed to its inner
content) with the new card that shows the new follower count and button
color
- Change the backend response to return a `<div>` tag (the card) instead
of a redirect to the user page

# Before

![before](https://github.com/go-gitea/gitea/assets/20454870/86899d15-41c9-42ed-bd85-253b9caac7f8)

# After

![after](https://github.com/go-gitea/gitea/assets/20454870/59455d96-548c-4a81-a5b0-fab1dc1e87ef)

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
This commit is contained in:
Yarden Shoham
2024-01-21 00:37:22 +02:00
committed by GitHub
parent 14f6fcf448
commit 1df06e3f39
2 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
templates/shared/user/profile_big_avatar.tmpl
View File

@@ -1,4 +1,4 @@
<div class="ui card">
<div id="profile-avatar-card" class="ui card">
<div id="profile-avatar" class="content gt-df">
{{if eq .SignedUserID .ContextUser.ID}}
<a class="image" href="{{AppSubUrl}}/user/settings" data-tooltip-content="{{ctx.Locale.Tr "user.change_avatar"}}">
@@ -110,13 +110,13 @@
</li>
{{end}}
{{if and .IsSigned (ne .SignedUserID .ContextUser.ID)}}
<li class="follow">
<li class="follow" hx-headers='{"x-csrf-token": "{{.CsrfToken}}"}' hx-target="#profile-avatar-card" hx-swap="outerHTML">
{{if $.IsFollowing}}
<button class="ui basic red button link-action" data-url="{{.ContextUser.HomeLink}}?action=unfollow">
<button hx-post="{{.ContextUser.HomeLink}}?action=unfollow" class="ui basic red button">
{{svg "octicon-person"}} {{ctx.Locale.Tr "user.unfollow"}}
</button>
{{else}}
<button class="ui basic primary button link-action" data-url="{{.ContextUser.HomeLink}}?action=follow">
<button hx-post="{{.ContextUser.HomeLink}}?action=follow" class="ui basic primary button">
{{svg "octicon-person"}} {{ctx.Locale.Tr "user.follow"}}
</button>
{{end}}