forgejo/templates/user/profile.tmpl
wxiaoguang 82224c54e0
Improve avatar uploading / resizing / compressing, remove Fomantic card module (#24653)
Fixes: #8972
Fixes: #24263

And I think it also (partially) fix #24263 (no need to convert) ,
because users could upload any supported image format if it isn't larger
than AVATAR_MAX_ORIGIN_SIZE


The main idea: 

* if the uploaded file size is not larger than AVATAR_MAX_ORIGIN_SIZE,
use the origin
* if the resized size is larger than the origin, use the origin

Screenshots:

JPG:

<details>


![image](https://github.com/go-gitea/gitea/assets/2114189/70e98bb0-ecb9-4c4e-a89f-4a37d4e37f8e)

</details>

APNG:

<details>


![image](https://github.com/go-gitea/gitea/assets/2114189/9055135b-5e2d-4152-bd72-596fcb7c6671)


![image](https://github.com/go-gitea/gitea/assets/2114189/50364caf-f7f6-4241-a289-e485fe4cd582)

</details>

WebP (animated)

<details>


![image](https://github.com/go-gitea/gitea/assets/2114189/f642eb85-498a-49a5-86bf-0a7b04089ae0)

</details>

The only exception: if a WebP image is larger than MaxOriginSize and it
is animated, then current `webp` package can't decode it, so only in
this case it isn't supported. IMO no need to support such case: why a
user would upload a 1MB animated webp as avatar? crazy .....

---------

Co-authored-by: silverwind <me@silverwind.io>
2023-05-13 20:59:11 +02:00

159 lines
6 KiB
Handlebars

{{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content user profile">
<div class="ui container">
<div class="ui stackable grid">
<div class="ui five wide column">
<div 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="{{.locale.Tr "user.change_avatar"}}">
{{/* the size doesn't take affect (and no need to take affect), image size(width) should be controlled by the parent container since this is not a flex layout*/}}
{{avatar $.Context .ContextUser 256}}
</a>
{{else}}
<span class="image">
{{avatar $.Context .ContextUser 256}}
</span>
{{end}}
</div>
<div class="content gt-word-break profile-avatar-name">
{{if .ContextUser.FullName}}<span class="header text center">{{.ContextUser.FullName}}</span>{{end}}
<span class="username text center">{{.ContextUser.Name}}</span>
{{if .EnableFeed}}
<a href="{{.ContextUser.HomeLink}}.rss"><i class="ui text grey gt-ml-3" data-tooltip-content="{{.locale.Tr "rss_feed"}}">{{svg "octicon-rss" 18}}</i></a>
{{end}}
<div class="gt-mt-3">
<a class="muted" href="{{.ContextUser.HomeLink}}?tab=followers">{{svg "octicon-person" 18 "gt-mr-2"}}{{.NumFollowers}} {{.locale.Tr "user.followers"}}</a> ยท <a class="muted" href="{{.ContextUser.HomeLink}}?tab=following">{{.NumFollowing}} {{.locale.Tr "user.following"}}</a>
</div>
</div>
<div class="extra content gt-word-break">
<ul>
{{if .ContextUser.Location}}
<li>{{svg "octicon-location"}} {{.ContextUser.Location}}</li>
{{end}}
{{if (eq .SignedUserID .ContextUser.ID)}}
<li>
{{svg "octicon-mail"}}
<a href="mailto:{{.ContextUser.Email}}" rel="nofollow">{{.ContextUser.Email}}</a>
<a href="{{AppSubUrl}}/user/settings#keep-email-private">
{{if .ShowUserEmail}}
<i class="ui right" data-tooltip-content="{{.locale.Tr "user.email_visibility.limited"}}">
{{svg "octicon-unlock"}}
</i>
{{else}}
<i class="ui right" data-tooltip-content="{{.locale.Tr "user.email_visibility.private"}}">
{{svg "octicon-lock"}}
</i>
{{end}}
</a>
</li>
{{else}}
{{if .ShowUserEmail}}
<li>
{{svg "octicon-mail"}}
<a href="mailto:{{.ContextUser.Email}}" rel="nofollow">{{.ContextUser.Email}}</a>
</li>
{{end}}
{{end}}
{{if .ContextUser.Website}}
<li>
{{svg "octicon-link"}}
<a target="_blank" rel="noopener noreferrer me" href="{{.ContextUser.Website}}">{{.ContextUser.Website}}</a>
</li>
{{end}}
{{if $.RenderedDescription}}
<li>
<div class="render-content markup">{{$.RenderedDescription|Str2html}}</div>
</li>
{{end}}
{{range .OpenIDs}}
{{if .Show}}
<li>
{{svg "fontawesome-openid"}}
<a target="_blank" rel="noopener noreferrer" href="{{.URI}}">{{.URI}}</a>
</li>
{{end}}
{{end}}
<li>{{svg "octicon-clock"}} {{.locale.Tr "user.joined_on" (DateTime "short" .ContextUser.CreatedUnix) | Safe}}</li>
{{if and .Orgs .HasOrgsVisible}}
<li>
<ul class="user-orgs">
{{range .Orgs}}
{{if (or .Visibility.IsPublic (and ($.SignedUser) (or .Visibility.IsLimited (and (.HasMemberWithUserID $.SignedUserID) .Visibility.IsPrivate) ($.IsAdmin))))}}
<li>
<a href="{{.HomeLink}}" data-tooltip-content="{{.Name}}">
{{avatar $.Context .}}
</a>
</li>
{{end}}
{{end}}
</ul>
</li>
{{end}}
{{if .Badges}}
<li>
<ul class="user-badges">
{{range .Badges}}
<li>
<img width="64" height="64" src="{{.ImageURL}}" alt="{{.Description}}" data-tooltip-content="{{.Description}}">
</li>
{{end}}
</ul>
</li>
{{end}}
{{if and .IsSigned (ne .SignedUserID .ContextUser.ID)}}
<li class="follow">
{{if $.IsFollowing}}
<form method="post" action="{{.Link}}?action=unfollow&redirect_to={{$.Link}}">
{{$.CsrfTokenHtml}}
<button type="submit" class="ui basic red button">{{svg "octicon-person"}} {{.locale.Tr "user.unfollow"}}</button>
</form>
{{else}}
<form method="post" action="{{.Link}}?action=follow&redirect_to={{$.Link}}">
{{$.CsrfTokenHtml}}
<button type="submit" class="ui basic green button">{{svg "octicon-person"}} {{.locale.Tr "user.follow"}}</button>
</form>
{{end}}
</li>
{{end}}
</ul>
</div>
</div>
</div>
<div class="ui eleven wide column">
<div class="ui secondary stackable pointing tight menu">
{{template "user/overview/header" .}}
</div>
{{if eq .TabName "activity"}}
{{if .ContextUser.KeepActivityPrivate}}
<div class="ui info message">
<p>{{.locale.Tr "user.disabled_public_activity"}}</p>
</div>
{{end}}
{{template "user/heatmap" .}}
<div class="feeds">
{{template "user/dashboard/feeds" .}}
</div>
{{else if eq .TabName "stars"}}
<div class="stars">
{{template "explore/repo_search" .}}
{{template "explore/repo_list" .}}
{{template "base/paginate" .}}
</div>
{{else if eq .TabName "following"}}
{{template "repo/user_cards" .}}
{{else if eq .TabName "followers"}}
{{template "repo/user_cards" .}}
{{else if or (eq .TabName "repositories") (not .ProfileReadme)}}
{{template "explore/repo_search" .}}
{{template "explore/repo_list" .}}
{{template "base/paginate" .}}
{{else if .ProfileReadme}}
<div id="readme_profile" class="render-content markup"> {{$.ProfileReadme|Str2html}} </div>
{{end}}
</div>
</div>
</div>
</div>
{{template "base/footer" .}}