community
/
gitea
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Clean up various avatar dimensions (#24701) 

Clean up a few cases where avatar dimensions were overwritten via CSS,
which were no longer needed or were possible to set via HTML width.

Also included are two small fixes:

- Fix one more case of incorrect avatar offset on review timeline
- Vertically center avatars in review sidebar

There is more to be done here, but some of the work depends on Fomantic
`comment` module removal, or in the case of org member lists, a refactor
of the `avatarlink` template to accept a size.

<img width="371" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/9c5902fb-2b89-4a7d-a152-60e74c3b2c56">
<img width="306" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/c8d92e2a-91c9-4f4a-a7de-6ae1a6bc0479">

---------

Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
silverwind 2023-05-14 16:15:59 +02:00 committed by GitHub
parent 3af2c8e4ab
commit b92c142c97
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 29 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
templates/repo/commits_list_small.tmpl
View File

@ -15,7 +15,7 @@
{{$commitLink:= printf "%s/commit/%s" $.comment.Issue.PullRequest.BaseRepo.Link (PathEscape .ID.String)}} {{$commitLink:= printf "%s/commit/%s" $.comment.Issue.PullRequest.BaseRepo.Link (PathEscape .ID.String)}}
<span class="ui float right shabox"> <span class="ui float right shabox gt-df gt-ac">
{{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses "root" $.root}} {{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses "root" $.root}}
{{$class := "ui sha label"}} {{$class := "ui sha label"}}
{{if .Signature}} {{if .Signature}}
@ -32,7 +32,7 @@
{{$class = (printf "%s%s" $class " isWarning")}} {{$class = (printf "%s%s" $class " isWarning")}}
{{end}} {{end}}
{{end}} {{end}}
<a href="{{$commitLink}}" rel="nofollow" class="{{$class}}"> <a href="{{$commitLink}}" rel="nofollow" class="gt-ml-3 {{$class}}">
<span class="shortsha">{{ShortSha .ID.String}}</span> <span class="shortsha">{{ShortSha .ID.String}}</span>
{{if .Signature}} {{if .Signature}}
{{template "repo/shabox_badge" dict "root" $.root "verification" .Verification}} {{template "repo/shabox_badge" dict "root" $.root "verification" .Verification}}

10
templates/repo/issue/view_content.tmpl
View File

@ -11,10 +11,12 @@
<div class="ui timeline"> <div class="ui timeline">
<div id="{{.Issue.HashTag}}" class="timeline-item comment first"> <div id="{{.Issue.HashTag}}" class="timeline-item comment first">
{{if .Issue.OriginalAuthor}} {{if .Issue.OriginalAuthor}}
<span class="timeline-avatar"><img src="{{AppSubUrl}}/assets/img/avatar_default.png"></span> <span class="timeline-avatar">
<img src="{{AppSubUrl}}/assets/img/avatar_default.png" width="40" height="40">
</span>
{{else}} {{else}}
<a class="timeline-avatar" {{if gt .Issue.Poster.ID 0}}href="{{.Issue.Poster.HomeLink}}"{{end}}> <a class="timeline-avatar" {{if gt .Issue.Poster.ID 0}}href="{{.Issue.Poster.HomeLink}}"{{end}}>
{{avatar $.Context .Issue.Poster}} {{avatar $.Context .Issue.Poster 40}}
</a> </a>
{{end}} {{end}}
<div class="content comment-container"> <div class="content comment-container">
@ -33,7 +35,7 @@
</span> </span>
{{else}} {{else}}
<a class="inline-timeline-avatar" href="{{.Issue.Poster.HomeLink}}"> <a class="inline-timeline-avatar" href="{{.Issue.Poster.HomeLink}}">
{{avatar $.Context .Issue.Poster}} {{avatar $.Context .Issue.Poster 24}}
</a> </a>
<span class="text grey"> <span class="text grey">
{{template "shared/user/authorlink" .Issue.Poster}} {{template "shared/user/authorlink" .Issue.Poster}}
@ -93,7 +95,7 @@
{{if and (or .IsRepoAdmin .HasIssuesOrPullsWritePermission (not .Issue.IsLocked)) (not .Repository.IsArchived)}} {{if and (or .IsRepoAdmin .HasIssuesOrPullsWritePermission (not .Issue.IsLocked)) (not .Repository.IsArchived)}}
<div class="timeline-item comment form"> <div class="timeline-item comment form">
<a class="timeline-avatar" href="{{.SignedUser.HomeLink}}"> <a class="timeline-avatar" href="{{.SignedUser.HomeLink}}">
{{avatar $.Context .SignedUser}} {{avatar $.Context .SignedUser 40}}
</a> </a>
<div class="content"> <div class="content">
<form class="ui segment form" id="comment-form" action="{{$.RepoLink}}/issues/{{.Issue.Index}}/comments" method="post"> <form class="ui segment form" id="comment-form" action="{{$.RepoLink}}/issues/{{.Issue.Index}}/comments" method="post">

22
templates/repo/issue/view_content/comments.tmpl
View File

@ -15,10 +15,12 @@
{{if eq .Type 0}} {{if eq .Type 0}}
<div class="timeline-item comment" id="{{.HashTag}}"> <div class="timeline-item comment" id="{{.HashTag}}">
{{if .OriginalAuthor}} {{if .OriginalAuthor}}
<span class="timeline-avatar"><img src="{{AppSubUrl}}/assets/img/avatar_default.png"></span> <span class="timeline-avatar">
<img src="{{AppSubUrl}}/assets/img/avatar_default.png" width="40" height="40">
</span>
{{else}} {{else}}
<a class="timeline-avatar"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}> <a class="timeline-avatar"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>
{{avatar $.Context .Poster}} {{avatar $.Context .Poster 40}}
</a> </a>
{{end}} {{end}}
<div class="content comment-container"> <div class="content comment-container">
@ -38,7 +40,7 @@
{{else}} {{else}}
{{if gt .Poster.ID 0}} {{if gt .Poster.ID 0}}
<a class="inline-timeline-avatar" href="{{.Poster.HomeLink}}"> <a class="inline-timeline-avatar" href="{{.Poster.HomeLink}}">
{{avatar $.Context .Poster}} {{avatar $.Context .Poster 24}}
</a> </a>
{{end}} {{end}}
<span class="text grey muted-links"> <span class="text grey muted-links">
@ -375,8 +377,8 @@
{{/* Some timeline avatars need a offset to correctly allign with their speech {{/* Some timeline avatars need a offset to correctly allign with their speech
bubble. The condition depends on review type and for positive reviews whether bubble. The condition depends on review type and for positive reviews whether
there is a comment element or not */}} there is a comment element or not */}}
<a class="timeline-avatar{{if or (and (eq .Review.Type 1) (or .Content .Attachments)) (eq .Review.Type 2) (eq .Review.Type 3)}} timeline-avatar-offset{{end}}"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}> <a class="timeline-avatar{{if or (and (eq .Review.Type 1) (or .Content .Attachments)) (and (eq .Review.Type 2) (or .Content .Attachments)) (eq .Review.Type 3)}} timeline-avatar-offset{{end}}"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>
{{avatar $.Context .Poster}} {{avatar $.Context .Poster 40}}
</a> </a>
{{end}} {{end}}
<span class="badge{{if eq .Review.Type 1}} gt-bg-green gt-text-white{{else if eq .Review.Type 3}} gt-bg-red gt-text-white{{end}}">{{svg (printf "octicon-%s" .Review.Type.Icon)}}</span> <span class="badge{{if eq .Review.Type 1}} gt-bg-green gt-text-white{{else if eq .Review.Type 3}} gt-bg-red gt-text-white{{end}}">{{svg (printf "octicon-%s" .Review.Type.Icon)}}</span>
@ -413,7 +415,7 @@
<div class="comment-header-left gt-df gt-ac"> <div class="comment-header-left gt-df gt-ac">
{{if gt .Poster.ID 0}} {{if gt .Poster.ID 0}}
<a class="inline-timeline-avatar" href="{{.Poster.HomeLink}}"> <a class="inline-timeline-avatar" href="{{.Poster.HomeLink}}">
{{avatar $.Context .Poster}} {{avatar $.Context .Poster 24}}
</a> </a>
{{end}} {{end}}
<span class="text grey muted-links"> <span class="text grey muted-links">
@ -482,7 +484,7 @@
{{range $filename, $lines := .Review.CodeComments}} {{range $filename, $lines := .Review.CodeComments}}
{{range $line, $comms := $lines}} {{range $line, $comms := $lines}}
<div class="ui segments"> <div class="ui segments">
<div class="ui segment gt-py-3 gt-df gt-ac gt-sb"> <div class="ui segment collapsible-comment-box gt-py-3 gt-df gt-ac gt-sb">
{{$invalid := (index $comms 0).Invalidated}} {{$invalid := (index $comms 0).Invalidated}}
{{$resolved := (index $comms 0).IsResolved}} {{$resolved := (index $comms 0).IsResolved}}
{{$resolveDoer := (index $comms 0).ResolveDoer}} {{$resolveDoer := (index $comms 0).ResolveDoer}}
@ -541,7 +543,7 @@
<div class="comment-header-left gt-df gt-ac"> <div class="comment-header-left gt-df gt-ac">
{{if not .OriginalAuthor}} {{if not .OriginalAuthor}}
<a class="avatar"> <a class="avatar">
{{avatar $.Context .Poster}} {{avatar $.Context .Poster 20}}
</a> </a>
{{end}} {{end}}
<span class="text grey muted-links"> <span class="text grey muted-links">
@ -768,7 +770,7 @@
<div class="timeline-item-group"> <div class="timeline-item-group">
<div class="timeline-item event" id="{{.HashTag}}"> <div class="timeline-item event" id="{{.HashTag}}">
<a class="timeline-avatar"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}> <a class="timeline-avatar"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>
<img src="{{.Poster.AvatarLink $.Context}}"> <img src="{{.Poster.AvatarLink $.Context}}" width="40" height="40">
</a> </a>
<span class="badge grey">{{svg "octicon-x" 16}}</span> <span class="badge grey">{{svg "octicon-x" 16}}</span>
{{template "shared/user/avatarlink" dict "Context" $.Context "user" .Poster}} {{template "shared/user/avatarlink" dict "Context" $.Context "user" .Poster}}
@ -789,7 +791,7 @@
<div class="ui top attached header comment-header-left gt-df gt-ac arrow-top"> <div class="ui top attached header comment-header-left gt-df gt-ac arrow-top">
{{if gt .Poster.ID 0}} {{if gt .Poster.ID 0}}
<a class="inline-timeline-avatar" href="{{.Poster.HomeLink}}"> <a class="inline-timeline-avatar" href="{{.Poster.HomeLink}}">
{{avatar $.Context .Poster}} {{avatar $.Context .Poster 24}}
</a> </a>
{{end}} {{end}}
<span class="text grey muted-links"> <span class="text grey muted-links">

2
templates/repo/issue/view_content/pull.tmpl
View File

@ -115,7 +115,7 @@
{{- else if .Issue.PullRequest.IsChecking}}yellow {{- else if .Issue.PullRequest.IsChecking}}yellow
{{- else if .Issue.PullRequest.IsEmpty}}grey {{- else if .Issue.PullRequest.IsEmpty}}grey
{{- else if .Issue.PullRequest.CanAutoMerge}}green {{- else if .Issue.PullRequest.CanAutoMerge}}green
{{- else}}red{{end}}">{{svg "octicon-git-merge" 32}}</a> {{- else}}red{{end}}">{{svg "octicon-git-merge" 40}}</a>
<div class="content"> <div class="content">
{{template "repo/pulls/status" .}} {{template "repo/pulls/status" .}}
{{$showGeneralMergeForm := false}} {{$showGeneralMergeForm := false}}

2
templates/shared/issuelist.tmpl
View File

@ -153,7 +153,7 @@
<div class="issue-item-icon-right text grey"> <div class="issue-item-icon-right text grey">
{{range .Assignees}} {{range .Assignees}}
<a class="ui assignee gt-tdn" href="{{.HomeLink}}" data-tooltip-content="{{.GetDisplayName}}"> <a class="ui assignee gt-tdn" href="{{.HomeLink}}" data-tooltip-content="{{.GetDisplayName}}">
{{avatar $.Context .}} {{avatar $.Context . 20}}
</a> </a>
{{end}} {{end}}
</div> </div>

5
web_src/css/base.css
View File

@ -1903,11 +1903,6 @@ img.ui.avatar,
color: var(--color-text-light); color: var(--color-text-light);
} }
.repo-title .avatar {
width: 32px !important;
height: 32px !important;
}
.repo-title .labels { .repo-title .labels {
margin-left: 0.5rem; margin-left: 0.5rem;
} }

14
web_src/css/modules/comment.css
View File

@ -47,20 +47,8 @@
} }
.ui.comments .comment .avatar { .ui.comments .comment .avatar {
display: block;
width: 2.5em;
height: auto;
float: left; float: left;
margin: 0.2em 0 0; width: 2.5em;
}
.ui.comments .comment img.avatar,
.ui.comments .comment .avatar img {
display: block;
margin: 0 auto;
width: 100%;
height: 100%;
border-radius: 0.25rem;
} }
.ui.comments .comment > .content { .ui.comments .comment > .content {

2
web_src/css/organization.css
View File

@ -170,7 +170,7 @@
.organization.members .list .item .ui.avatar { .organization.members .list .item .ui.avatar {
width: 48px; width: 48px;
height: auto; height: 48px;
margin-right: 1rem; margin-right: 1rem;
align-self: flex-start; align-self: flex-start;
} }

36
web_src/css/repository.css
View File

@ -691,11 +691,6 @@
margin-right: 5px; margin-right: 5px;
} }
.repository.view.issue .merge.box .timeline-avatar {
margin-top: 3px;
margin-left: 4px;
}
.repository.view.issue .merge.box .branch-update.grid .row { .repository.view.issue .merge.box .branch-update.grid .row {
padding-bottom: 1rem; padding-bottom: 1rem;
} }
@ -788,23 +783,11 @@
left: -68px; left: -68px;
} }
.repository.view.issue .comment-list .timeline-item .timeline-avatar img {
width: 40px !important;
height: 40px !important;
}
/* Don't show the mobile oriented avatar ".inline-timeline-avatar" on desktop. Desktop uses the avatar with class ".timeline-avatar" */ /* Don't show the mobile oriented avatar ".inline-timeline-avatar" on desktop. Desktop uses the avatar with class ".timeline-avatar" */
.repository.view.issue .comment-list .timeline-item .inline-timeline-avatar { .repository.view.issue .comment-list .timeline-item .inline-timeline-avatar {
display: none; display: none;
} }
.repository.view.issue .comment-list .timeline-item img.avatar,
.repository.view.issue .comment-list .timeline-item .avatar img {
width: 20px;
height: 20px;
vertical-align: middle;
}
.repository.view.issue .comment-list .timeline-item:first-child:not(.commit) { .repository.view.issue .comment-list .timeline-item:first-child:not(.commit) {
padding-top: 0 !important; padding-top: 0 !important;
} }
@ -1063,12 +1046,12 @@
.repository.view.issue .comment-list .code-comment { .repository.view.issue .comment-list .code-comment {
border: 1px solid transparent; border: 1px solid transparent;
padding: 0.25rem 0.5rem;
margin: 0; margin: 0;
} }
.repository.view.issue .comment-list .code-comment .content { /* fix fomantic's border-radius via :first-child with hidden elements */
border: none !important; .collapsible-comment-box:has(.gt-hidden) {
border-radius: var(--border-radius) !important;
} }
.repository.view.issue .comment-list .code-comment .comment-header { .repository.view.issue .comment-list .code-comment .comment-header {
@ -1091,13 +1074,7 @@
} }
.repository.view.issue .comment-list .comment > .avatar ~ .content { .repository.view.issue .comment-list .comment > .avatar ~ .content {
margin-left: 3em; margin-left: 42px;
}
.repository.view.issue .comment-code-cloud .comment-list .code-comment img.avatar,
.repository.view.issue .comment-code-cloud .comment-list .comment img.avatar {
width: 28px;
height: 28px;
} }
.repository.view.issue .comment-list .comment-code-cloud .segment.reactions { .repository.view.issue .comment-list .comment-code-cloud .segment.reactions {
@ -3085,6 +3062,7 @@ td.blob-excerpt {
} }
.sidebar-item-link { .sidebar-item-link {
display: inline-flex;
align-items: center; align-items: center;
word-break: break-all; word-break: break-all;
} }
@ -3260,10 +3238,6 @@ td.blob-excerpt {
margin-left: 6px; margin-left: 6px;
margin-right: 2px; margin-right: 2px;
} }
.repository.view.issue .comment-list .timeline .inline-timeline-avatar img.avatar {
height: 24px;
width: 24px;
}
.repository.view.issue .comment-list .timeline .comment-header { .repository.view.issue .comment-list .timeline .comment-header {
padding-left: 4px; padding-left: 4px;
} }

2
web_src/css/shared/issuelist.css
View File

@ -69,8 +69,6 @@
} }
.issue.list > .item .assignee img { .issue.list > .item .assignee img {
width: 20px;
height: 20px;
margin-right: 2px; margin-right: 2px;
} }