diff --git a/modules/templates/helper.go b/modules/templates/helper.go
index 5af1addb6..0b5ae0f01 100644
--- a/modules/templates/helper.go
+++ b/modules/templates/helper.go
@@ -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("")
}
diff --git a/templates/explore/repo_list.tmpl b/templates/explore/repo_list.tmpl
index fe4b278e2..bfec17ff2 100644
--- a/templates/explore/repo_list.tmpl
+++ b/templates/explore/repo_list.tmpl
@@ -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}}
diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
index 348c6b1ff..8799cda65 100644
--- a/templates/repo/header.tmpl
+++ b/templates/repo/header.tmpl
@@ -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}}
diff --git a/templates/repo/header_icon.tmpl b/templates/repo/icon.tmpl
similarity index 93%
rename from templates/repo/header_icon.tmpl
rename to templates/repo/icon.tmpl
index b9d49c209..b4d8a2456 100644
--- a/templates/repo/header_icon.tmpl
+++ b/templates/repo/icon.tmpl
@@ -1,4 +1,4 @@
-<div class="repo-header-icon">
+<div class="repo-icon mr-3">
{{if $.IsTemplate}}
{{svg "octicon-repo-template" 32}}
{{else}}
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 8885ffc40..81c6a310f 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -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;
diff --git a/web_src/less/_explore.less b/web_src/less/_explore.less
index 5962d411e..6d6462df6 100644
--- a/web_src/less/_explore.less
+++ b/web_src/less/_explore.less
@@ -49,11 +49,6 @@
.ui.tags {
margin-bottom: 1em;
}
-
- .ui.avatar.image {
- width: 24px;
- height: 24px;
- }
}
}
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index b4cff3490..1cedb07f1 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -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 {