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
GitHub
parent
3af2c8e4ab
commit
b92c142c97
10 changed files with 29 additions and 70 deletions
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
{{$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}}
|
||||
{{$class := "ui sha label"}}
|
||||
{{if .Signature}}
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
{{$class = (printf "%s%s" $class " isWarning")}}
|
||||
{{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>
|
||||
{{if .Signature}}
|
||||
{{template "repo/shabox_badge" dict "root" $.root "verification" .Verification}}
|
||||
|
|
|
|||
|
|
@ -11,10 +11,12 @@
|
|||
<div class="ui timeline">
|
||||
<div id="{{.Issue.HashTag}}" class="timeline-item comment first">
|
||||
{{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}}
|
||||
<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>
|
||||
{{end}}
|
||||
<div class="content comment-container">
|
||||
|
|
@ -33,7 +35,7 @@
|
|||
</span>
|
||||
{{else}}
|
||||
<a class="inline-timeline-avatar" href="{{.Issue.Poster.HomeLink}}">
|
||||
{{avatar $.Context .Issue.Poster}}
|
||||
{{avatar $.Context .Issue.Poster 24}}
|
||||
</a>
|
||||
<span class="text grey">
|
||||
{{template "shared/user/authorlink" .Issue.Poster}}
|
||||
|
|
@ -93,7 +95,7 @@
|
|||
{{if and (or .IsRepoAdmin .HasIssuesOrPullsWritePermission (not .Issue.IsLocked)) (not .Repository.IsArchived)}}
|
||||
<div class="timeline-item comment form">
|
||||
<a class="timeline-avatar" href="{{.SignedUser.HomeLink}}">
|
||||
{{avatar $.Context .SignedUser}}
|
||||
{{avatar $.Context .SignedUser 40}}
|
||||
</a>
|
||||
<div class="content">
|
||||
<form class="ui segment form" id="comment-form" action="{{$.RepoLink}}/issues/{{.Issue.Index}}/comments" method="post">
|
||||
|
|
|
|||
|
|
@ -15,10 +15,12 @@
|
|||
{{if eq .Type 0}}
|
||||
<div class="timeline-item comment" id="{{.HashTag}}">
|
||||
{{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}}
|
||||
<a class="timeline-avatar"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>
|
||||
{{avatar $.Context .Poster}}
|
||||
{{avatar $.Context .Poster 40}}
|
||||
</a>
|
||||
{{end}}
|
||||
<div class="content comment-container">
|
||||
|
|
@ -38,7 +40,7 @@
|
|||
{{else}}
|
||||
{{if gt .Poster.ID 0}}
|
||||
<a class="inline-timeline-avatar" href="{{.Poster.HomeLink}}">
|
||||
{{avatar $.Context .Poster}}
|
||||
{{avatar $.Context .Poster 24}}
|
||||
</a>
|
||||
{{end}}
|
||||
<span class="text grey muted-links">
|
||||
|
|
@ -375,8 +377,8 @@
|
|||
{{/* Some timeline avatars need a offset to correctly allign with their speech
|
||||
bubble. The condition depends on review type and for positive reviews whether
|
||||
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}}>
|
||||
{{avatar $.Context .Poster}}
|
||||
<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 40}}
|
||||
</a>
|
||||
{{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>
|
||||
|
|
@ -413,7 +415,7 @@
|
|||
<div class="comment-header-left gt-df gt-ac">
|
||||
{{if gt .Poster.ID 0}}
|
||||
<a class="inline-timeline-avatar" href="{{.Poster.HomeLink}}">
|
||||
{{avatar $.Context .Poster}}
|
||||
{{avatar $.Context .Poster 24}}
|
||||
</a>
|
||||
{{end}}
|
||||
<span class="text grey muted-links">
|
||||
|
|
@ -482,7 +484,7 @@
|
|||
{{range $filename, $lines := .Review.CodeComments}}
|
||||
{{range $line, $comms := $lines}}
|
||||
<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}}
|
||||
{{$resolved := (index $comms 0).IsResolved}}
|
||||
{{$resolveDoer := (index $comms 0).ResolveDoer}}
|
||||
|
|
@ -541,7 +543,7 @@
|
|||
<div class="comment-header-left gt-df gt-ac">
|
||||
{{if not .OriginalAuthor}}
|
||||
<a class="avatar">
|
||||
{{avatar $.Context .Poster}}
|
||||
{{avatar $.Context .Poster 20}}
|
||||
</a>
|
||||
{{end}}
|
||||
<span class="text grey muted-links">
|
||||
|
|
@ -768,7 +770,7 @@
|
|||
<div class="timeline-item-group">
|
||||
<div class="timeline-item event" id="{{.HashTag}}">
|
||||
<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>
|
||||
<span class="badge grey">{{svg "octicon-x" 16}}</span>
|
||||
{{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">
|
||||
{{if gt .Poster.ID 0}}
|
||||
<a class="inline-timeline-avatar" href="{{.Poster.HomeLink}}">
|
||||
{{avatar $.Context .Poster}}
|
||||
{{avatar $.Context .Poster 24}}
|
||||
</a>
|
||||
{{end}}
|
||||
<span class="text grey muted-links">
|
||||
|
|
|
|||
|
|
@ -115,7 +115,7 @@
|
|||
{{- else if .Issue.PullRequest.IsChecking}}yellow
|
||||
{{- else if .Issue.PullRequest.IsEmpty}}grey
|
||||
{{- 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">
|
||||
{{template "repo/pulls/status" .}}
|
||||
{{$showGeneralMergeForm := false}}
|
||||
|
|
|
|||
|
|
@ -153,7 +153,7 @@
|
|||
<div class="issue-item-icon-right text grey">
|
||||
{{range .Assignees}}
|
||||
<a class="ui assignee gt-tdn" href="{{.HomeLink}}" data-tooltip-content="{{.GetDisplayName}}">
|
||||
{{avatar $.Context .}}
|
||||
{{avatar $.Context . 20}}
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1903,11 +1903,6 @@ img.ui.avatar,
|
|||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
.repo-title .avatar {
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
}
|
||||
|
||||
.repo-title .labels {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,20 +47,8 @@
|
|||
}
|
||||
|
||||
.ui.comments .comment .avatar {
|
||||
display: block;
|
||||
width: 2.5em;
|
||||
height: auto;
|
||||
float: left;
|
||||
margin: 0.2em 0 0;
|
||||
}
|
||||
|
||||
.ui.comments .comment img.avatar,
|
||||
.ui.comments .comment .avatar img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0.25rem;
|
||||
width: 2.5em;
|
||||
}
|
||||
|
||||
.ui.comments .comment > .content {
|
||||
|
|
|
|||
|
|
@ -170,7 +170,7 @@
|
|||
|
||||
.organization.members .list .item .ui.avatar {
|
||||
width: 48px;
|
||||
height: auto;
|
||||
height: 48px;
|
||||
margin-right: 1rem;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -691,11 +691,6 @@
|
|||
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 {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
|
@ -788,23 +783,11 @@
|
|||
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" */
|
||||
.repository.view.issue .comment-list .timeline-item .inline-timeline-avatar {
|
||||
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) {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
|
@ -1063,12 +1046,12 @@
|
|||
|
||||
.repository.view.issue .comment-list .code-comment {
|
||||
border: 1px solid transparent;
|
||||
padding: 0.25rem 0.5rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.repository.view.issue .comment-list .code-comment .content {
|
||||
border: none !important;
|
||||
/* fix fomantic's border-radius via :first-child with hidden elements */
|
||||
.collapsible-comment-box:has(.gt-hidden) {
|
||||
border-radius: var(--border-radius) !important;
|
||||
}
|
||||
|
||||
.repository.view.issue .comment-list .code-comment .comment-header {
|
||||
|
|
@ -1091,13 +1074,7 @@
|
|||
}
|
||||
|
||||
.repository.view.issue .comment-list .comment > .avatar ~ .content {
|
||||
margin-left: 3em;
|
||||
}
|
||||
|
||||
.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;
|
||||
margin-left: 42px;
|
||||
}
|
||||
|
||||
.repository.view.issue .comment-list .comment-code-cloud .segment.reactions {
|
||||
|
|
@ -3085,6 +3062,7 @@ td.blob-excerpt {
|
|||
}
|
||||
|
||||
.sidebar-item-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
|
@ -3260,10 +3238,6 @@ td.blob-excerpt {
|
|||
margin-left: 6px;
|
||||
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 {
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -69,8 +69,6 @@
|
|||
}
|
||||
|
||||
.issue.list > .item .assignee img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue