diff options
| -rw-r--r-- | modules/templates/helper.go | 29 | ||||
| -rw-r--r-- | templates/explore/repo_list.tmpl | 65 | ||||
| -rw-r--r-- | templates/repo/header.tmpl | 57 | ||||
| -rw-r--r-- | templates/repo/icon.tmpl (renamed from templates/repo/header_icon.tmpl) | 2 | ||||
| -rw-r--r-- | web_src/less/_base.less | 26 | ||||
| -rw-r--r-- | web_src/less/_explore.less | 5 | ||||
| -rw-r--r-- | web_src/less/_repository.less | 32 |
7 files changed, 112 insertions, 104 deletions
diff --git a/modules/templates/helper.go b/modules/templates/helper.go index 5af1addb60..0b5ae0f013 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 fe4b278e2c..bfec17ff29 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 348c6b1ffa..8799cda655 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 index b9d49c209d..b4d8a24560 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 8885ffc409..81c6a310f5 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 5962d411e3..6d6462df6c 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 b4cff3490d..1cedb07f12 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 { |