Profile images in user feed headers are now clickable to open the image full-sized (are no longer links to the page you're already on)

This commit is contained in:
Alessio 2024-11-06 17:06:23 -08:00
parent a4285c2db1
commit d59ef45569
3 changed files with 35 additions and 16 deletions

View File

@ -1,16 +1,36 @@
{{define "author-info"}} {{define "author-info"}}
<div class="author-info" hx-boost="true"> <div class="author-info" hx-boost="true">
{{template "circle-profile-img" .}} {{template "circle-profile-img" .}}
<span class="author-info__name-and-handle"> <span class="author-info__name-and-handle">
<div class="author-info__display-name row"> <div class="author-info__display-name row">
{{.DisplayName}} {{.DisplayName}}
{{if .IsPrivate}} {{if .IsPrivate}}
<div class="circle-outline"> <div class="circle-outline">
<img class="svg-icon" src="/static/icons/lock.svg" width="24" height="24"> <img class="svg-icon" src="/static/icons/lock.svg" width="24" height="24">
</div> </div>
{{end}} {{end}}
</div> </div>
<div class="author-info__handle">@{{.Handle}}</div> <div class="author-info__handle">@{{.Handle}}</div>
</span> </span>
</div> </div>
{{end}}
{{/*
For User Feed header-- the profile image is no longer a link, but should pop up in the image carousel on click
*/}}
{{define "author-info-no-link"}}
<div class="author-info" hx-boost="true">
{{template "circle-profile-img-no-link" .}}
<span class="author-info__name-and-handle">
<div class="author-info__display-name row">
{{.DisplayName}}
{{if .IsPrivate}}
<div class="circle-outline">
<img class="svg-icon" src="/static/icons/lock.svg" width="24" height="24">
</div>
{{end}}
</div>
<div class="author-info__handle">@{{.Handle}}</div>
</span>
</div>
{{end}} {{end}}

View File

@ -11,7 +11,6 @@
</a> </a>
{{end}} {{end}}
<!-- TODO: How to use this in a User Feed without a ton of prop-drilling? -->
{{define "circle-profile-img-no-link"}} {{define "circle-profile-img-no-link"}}
<a class="profile-image" <a class="profile-image"
hx-trigger="click consume" hx-trigger="click consume"

View File

@ -12,7 +12,7 @@
<div class="user-header__info-container"> <div class="user-header__info-container">
<div class="row"> <div class="row">
{{template "author-info" .}} {{template "author-info-no-link" .}}
{{template "following-button" .}} {{template "following-button" .}}
</div> </div>
<div class="user-header__bio"> <div class="user-header__bio">