- Split up avatar rendering helpers for performance - Fix showing repo SVG icon when no avatar is set - Make repo SVG and avatar same size at 32px - Fix fork line by adding vertical flexbox on repo title Co-authored-by: 6543 <6543@obermui.de> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>tags/v1.15.0-dev
@@ -341,6 +341,7 @@ func NewFuncMap() []template.FuncMap { | |||
"svg": SVG, | |||
"avatar": Avatar, | |||
"avatarByEmail": AvatarByEmail, | |||
"repoAvatar": RepoAvatar, | |||
"SortArrow": func(normSort, revSort, urlSort string, isDefault bool) template.HTML { | |||
// if needed | |||
if len(normSort) == 0 || len(urlSort) == 0 { | |||
@@ -545,23 +546,25 @@ func SVG(icon string, others ...interface{}) template.HTML { | |||
return template.HTML("") | |||
} | |||
// Avatar renders user and repo avatars. args: user/repo, size (int), class (string) | |||
func Avatar(item interface{}, others ...interface{}) template.HTML { | |||
// Avatar renders user avatars. args: user, size (int), class (string) | |||
func Avatar(user *models.User, others ...interface{}) template.HTML { | |||
size, class := parseOthers(28, "ui avatar image", others...) | |||
if user, ok := item.(*models.User); ok { | |||
src := user.RealSizedAvatarLink(size * 2) // request double size for finer rendering | |||
if src != "" { | |||
return avatarHTML(src, size, class, user.DisplayName()) | |||
} | |||
} | |||
if repo, ok := item.(*models.Repository); ok { | |||
src := repo.RelAvatarLink() | |||
if src != "" { | |||
return avatarHTML(src, size, class, repo.FullName()) | |||
} | |||
src := user.RealSizedAvatarLink(size * 2) // request double size for finer rendering | |||
if src != "" { | |||
return avatarHTML(src, size, class, user.DisplayName()) | |||
} | |||
return template.HTML("") | |||
} | |||
// RepoAvatar renders repo avatars. args: repo, size(int), class (string) | |||
func RepoAvatar(repo *models.Repository, others ...interface{}) template.HTML { | |||
size, class := parseOthers(28, "ui avatar image", others...) | |||
src := repo.RelAvatarLink() | |||
if src != "" { | |||
return avatarHTML(src, size, class, repo.FullName()) | |||
} | |||
return template.HTML("") | |||
} | |||
@@ -1,37 +1,44 @@ | |||
<div class="ui repository list"> | |||
{{range .Repos}} | |||
<div class="item"> | |||
<div class="ui header"> | |||
{{avatar .}} | |||
<a class="name" href="{{.Link}}"> | |||
{{if or $.PageIsExplore $.PageIsProfileStarList }}{{if .Owner}}{{.Owner.Name}} / {{end}}{{end}}{{.Name}} | |||
</a> | |||
{{if .IsArchived}} | |||
<span class="ui basic label">{{$.i18n.Tr "repo.desc.archived"}}</span> | |||
{{end}} | |||
{{if .IsTemplate}} | |||
{{if .IsPrivate}} | |||
<span class="ui basic label">{{$.i18n.Tr "repo.desc.private_template"}}</span> | |||
{{else}} | |||
{{if .Owner.Visibility.IsPrivate}} | |||
<span class="ui basic label">{{$.i18n.Tr "repo.desc.internal_template"}}</span> | |||
{{end}} | |||
<div class="ui header df ac"> | |||
<div class="repo-title"> | |||
{{$avatar := (repoAvatar . 32 "mr-3")}} | |||
{{if $avatar}} | |||
{{$avatar}} | |||
{{end}} | |||
{{else}} | |||
{{if .IsPrivate}} | |||
<span class="ui basic label">{{$.i18n.Tr "repo.desc.private"}}</span> | |||
{{else}} | |||
{{if .Owner.Visibility.IsPrivate}} | |||
<span class="ui basic label">{{$.i18n.Tr "repo.desc.internal"}}</span> | |||
<a class="name" href="{{.Link}}"> | |||
{{if or $.PageIsExplore $.PageIsProfileStarList }}{{if .Owner}}{{.Owner.Name}} / {{end}}{{end}}{{.Name}} | |||
</a> | |||
<div class="labels df ac fw"> | |||
{{if .IsArchived}} | |||
<span class="ui basic label">{{$.i18n.Tr "repo.desc.archived"}}</span> | |||
{{end}} | |||
{{end}} | |||
{{end}} | |||
{{if .IsFork}} | |||
<span class="middle">{{svg "octicon-repo-forked"}}</span> | |||
{{else if .IsMirror}} | |||
<span class="middle">{{svg "octicon-mirror"}}</span> | |||
{{end}} | |||
<div class="ui right metas"> | |||
{{if .IsTemplate}} | |||
{{if .IsPrivate}} | |||
<span class="ui basic label">{{$.i18n.Tr "repo.desc.private_template"}}</span> | |||
{{else}} | |||
{{if .Owner.Visibility.IsPrivate}} | |||
<span class="ui basic label">{{$.i18n.Tr "repo.desc.internal_template"}}</span> | |||
{{end}} | |||
{{end}} | |||
{{else}} | |||
{{if .IsPrivate}} | |||
<span class="ui basic label">{{$.i18n.Tr "repo.desc.private"}}</span> | |||
{{else}} | |||
{{if .Owner.Visibility.IsPrivate}} | |||
<span class="ui basic label">{{$.i18n.Tr "repo.desc.internal"}}</span> | |||
{{end}} | |||
{{end}} | |||
{{end}} | |||
{{if .IsFork}} | |||
{{svg "octicon-repo-forked"}} | |||
{{else if .IsMirror}} | |||
{{svg "octicon-mirror"}} | |||
{{end}} | |||
</div> | |||
</div> | |||
<div class="metas"> | |||
{{if .PrimaryLanguage }} | |||
<span class="text grey"><i class="color-icon" style="background-color: {{.PrimaryLanguage.Color}}"></i>{{ .PrimaryLanguage.Language }}</span> | |||
{{end}} |
@@ -2,35 +2,40 @@ | |||
{{with .Repository}} | |||
<div class="ui container"> | |||
<div class="repo-header"> | |||
<div class="ui huge breadcrumb repo-title"> | |||
{{if .Name}} | |||
{{avatar .}} | |||
{{else}} | |||
{{template "repo/header_icon" .}} | |||
{{end}} | |||
<a href="{{AppSubUrl}}/{{.Owner.Name}}">{{.Owner.Name}}</a> | |||
<div class="divider"> / </div> | |||
<a href="{{$.RepoLink}}">{{.Name}}</a> | |||
{{if .IsTemplate}} | |||
{{if .IsPrivate}} | |||
<span class="ui basic label">{{$.i18n.Tr "repo.desc.private_template"}}</span> | |||
<div class="repo-title-wrap df fc"> | |||
<div class="repo-title"> | |||
{{$avatar := (repoAvatar . 32 "mr-3")}} | |||
{{if $avatar}} | |||
{{$avatar}} | |||
{{else}} | |||
{{if .Owner.Visibility.IsPrivate}} | |||
<span class="ui basic label">{{$.i18n.Tr "repo.desc.internal_template"}}</span> | |||
{{end}} | |||
{{template "repo/icon" .}} | |||
{{end}} | |||
{{else}} | |||
{{if .IsPrivate}} | |||
<span class="ui basic label">{{$.i18n.Tr "repo.desc.private"}}</span> | |||
{{else}} | |||
{{if .Owner.Visibility.IsPrivate}} | |||
<span class="ui basic label">{{$.i18n.Tr "repo.desc.internal"}}</span> | |||
<a href="{{AppSubUrl}}/{{.Owner.Name}}">{{.Owner.Name}}</a> | |||
<div class="mx-2">/</div> | |||
<a href="{{$.RepoLink}}">{{.Name}}</a> | |||
<div class="labels df ac fw"> | |||
{{if .IsTemplate}} | |||
{{if .IsPrivate}} | |||
<span class="ui basic label">{{$.i18n.Tr "repo.desc.private_template"}}</span> | |||
{{else}} | |||
{{if .Owner.Visibility.IsPrivate}} | |||
<span class="ui basic label">{{$.i18n.Tr "repo.desc.internal_template"}}</span> | |||
{{end}} | |||
{{end}} | |||
{{else}} | |||
{{if .IsPrivate}} | |||
<span class="ui basic label">{{$.i18n.Tr "repo.desc.private"}}</span> | |||
{{else}} | |||
{{if .Owner.Visibility.IsPrivate}} | |||
<span class="ui basic label">{{$.i18n.Tr "repo.desc.internal"}}</span> | |||
{{end}} | |||
{{end}} | |||
{{end}} | |||
{{end}} | |||
{{end}} | |||
{{if .IsArchived}} | |||
<span class="ui basic label">{{$.i18n.Tr "repo.desc.archived"}}</span> | |||
{{end}} | |||
{{if .IsArchived}} | |||
<span class="ui basic label">{{$.i18n.Tr "repo.desc.archived"}}</span> | |||
{{end}} | |||
</div> | |||
</div> | |||
{{if .IsMirror}}<div class="fork-flag">{{$.i18n.Tr "repo.mirror_from"}} <a target="_blank" rel="noopener noreferrer" href="{{if .SanitizedOriginalURL}}{{.SanitizedOriginalURL}}{{else}}{{MirrorAddress $.Mirror}}{{end}}">{{if .SanitizedOriginalURL}}{{.SanitizedOriginalURL}}{{else}}{{MirrorAddress $.Mirror}}{{end}}</a></div>{{end}} | |||
{{if .IsFork}}<div class="fork-flag">{{$.i18n.Tr "repo.forked_from"}} <a href="{{.BaseRepo.Link}}">{{SubStr .BaseRepo.RelLink 1 -1}}</a></div>{{end}} | |||
{{if .IsGenerated}}<div class="fork-flag">{{$.i18n.Tr "repo.generated_from"}} <a href="{{.TemplateRepo.Link}}">{{SubStr .TemplateRepo.RelLink 1 -1}}</a></div>{{end}} |
@@ -1,4 +1,4 @@ | |||
<div class="repo-header-icon"> | |||
<div class="repo-icon mr-3"> | |||
{{if $.IsTemplate}} | |||
{{svg "octicon-repo-template" 32}} | |||
{{else}} |
@@ -1247,6 +1247,32 @@ footer { | |||
margin-bottom: 2px !important; | |||
} | |||
.repo-title { | |||
font-size: 1.5rem; | |||
display: flex; | |||
align-items: center; | |||
flex: 1; | |||
word-break: break-all; | |||
color: var(--color-text-light); | |||
.avatar { | |||
width: 32px !important; | |||
height: 32px !important; | |||
} | |||
.labels { | |||
margin-left: .5rem; | |||
> * + * { | |||
margin-left: .5rem; | |||
} | |||
} | |||
} | |||
.repo-icon { | |||
display: inline-block; | |||
} | |||
.activity-bar-graph { | |||
background-color: var(--color-primary); | |||
color: #fff; |
@@ -49,11 +49,6 @@ | |||
.ui.tags { | |||
margin-bottom: 1em; | |||
} | |||
.ui.avatar.image { | |||
width: 24px; | |||
height: 24px; | |||
} | |||
} | |||
} | |||
@@ -8,38 +8,9 @@ | |||
margin-top: 0; | |||
} | |||
.ui.huge.breadcrumb { | |||
font-weight: 400; | |||
font-size: 1.5rem; | |||
.label { | |||
vertical-align: middle; | |||
margin-top: -.29165em; | |||
} | |||
&.repo-title .repo-header-icon { | |||
display: inline-block; | |||
position: relative; | |||
.avatar { | |||
position: absolute; | |||
right: 0; | |||
bottom: 0; | |||
width: 16px; | |||
height: 16px; | |||
color: #fafafa; | |||
box-shadow: 0 0 0 2px; | |||
margin: 0; | |||
} | |||
} | |||
} | |||
.fork-flag { | |||
margin-left: 36px; | |||
margin-top: 3px; | |||
display: block; | |||
font-size: 12px; | |||
white-space: nowrap; | |||
margin-top: 2px; | |||
} | |||
.repo-buttons .svg { | |||
@@ -2985,6 +2956,7 @@ tbody.commit-list { | |||
align-items: center; | |||
justify-content: space-between; | |||
flex-wrap: wrap; | |||
word-break: break-all; | |||
} | |||
.repo-header .repo-buttons { |