Repo avatar fixes (#13891)

- 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>

diff --git a/modules/templates/helper.go b/modules/templates/helper.go
index 5af1addb60f7d8aa4d8491a3f01ee731b8deacfc..0b5ae0f013d47d3803193545d7030220c5483732 100644 (file)
--- 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 fe4b278e2ca4b0f50edd6e079a0fd2d438862b1c..bfec17ff293c8d80f66bdcadd73ff6cec6e6419b 100644 (file)
--- 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 348c6b1ffa10c934e67fdde9cdfd236b21dc9de6..8799cda65589c89496590b7cf6f4c75d5863022a 100644 (file)
--- 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/header_icon.tmpl
deleted file mode 100644 (file)
index b9d49c2..0000000
--- a/templates/repo/header_icon.tmpl
+++ /dev/null
@@ -1,20 +0,0 @@
-<div class="repo-header-icon">
-       {{if $.IsTemplate}}
-               {{svg "octicon-repo-template" 32}}
-       {{else}}
-               {{if $.IsPrivate}}
-                       {{svg "octicon-lock" 32}}
-               {{else if and (not $.IsMirror) (not $.IsFork) ($.Owner)}}
-                       {{svg "octicon-repo" 32}}
-                       {{if $.Owner.Visibility.IsPrivate}}
-                               {{avatar $.Owner}}
-                       {{end}}
-               {{else if $.IsMirror}}
-                       {{svg "octicon-mirror" 32}}
-               {{else if $.IsFork}}
-                       {{svg "octicon-repo-forked" 32}}
-               {{else}}
-                       {{svg "octicon-repo" 32}}
-               {{end}}
-       {{end}}
-</div>

diff --git a/templates/repo/icon.tmpl b/templates/repo/icon.tmpl
new file mode 100644 (file)
index 0000000..b4d8a24
--- /dev/null
+++ b/templates/repo/icon.tmpl
@@ -0,0 +1,20 @@
+<div class="repo-icon mr-3">
+       {{if $.IsTemplate}}
+               {{svg "octicon-repo-template" 32}}
+       {{else}}
+               {{if $.IsPrivate}}
+                       {{svg "octicon-lock" 32}}
+               {{else if and (not $.IsMirror) (not $.IsFork) ($.Owner)}}
+                       {{svg "octicon-repo" 32}}
+                       {{if $.Owner.Visibility.IsPrivate}}
+                               {{avatar $.Owner}}
+                       {{end}}
+               {{else if $.IsMirror}}
+                       {{svg "octicon-mirror" 32}}
+               {{else if $.IsFork}}
+                       {{svg "octicon-repo-forked" 32}}
+               {{else}}
+                       {{svg "octicon-repo" 32}}
+               {{end}}
+       {{end}}
+</div>

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 8885ffc4093553f3999679454cfc7b80675f08bf..81c6a310f5c2a75f811cd6e2cf102a7c64008cd2 100644 (file)
--- 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 5962d411e3af8c88acf136724187d5adbf555a23..6d6462df6cdd1c75add7a33e33423615864fbd60 100644 (file)
--- 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 b4cff3490d471f285dfc5eb00ac604edbbd945aa..1cedb07f1275f1282504a77372270da7ac7b87b4 100644 (file)
--- 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 {