git724/forgejo
1
0
Fork 0
Code Issues Pull requests 3 Projects 1 Releases Packages Wiki Activity

Rework focused comment styling (#13434)

Browse source 
Had to tweak a few borders to make it work properly in all cases, also
added .comment-body class to specifically target that body.
This commit is contained in:
silverwind 2020-11-05 20:34:04 +01:00 • committed by GitHub
commit eba0ac5bf6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 87 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

2
templates/repo/diff/comments.tmpl
View file

@ -50,7 +50,7 @@
{{template "repo/issue/view_content/context_menu" Dict "ctx" $.root "item" . "delete" true "diff" true "IsCommentPoster" (and $.root.IsSigned (eq $.root.SignedUserID .PosterID))}} {{template "repo/issue/view_content/context_menu" Dict "ctx" $.root "item" . "delete" true "diff" true "IsCommentPoster" (and $.root.IsSigned (eq $.root.SignedUserID .PosterID))}}
</div> </div>
</div> </div>
<div class="ui attached segment"> <div class="ui attached segment comment-body">
<div class="render-content markdown"> <div class="render-content markdown">
{{if .RenderedContent}} {{if .RenderedContent}}
{{.RenderedContent|Str2html}} {{.RenderedContent|Str2html}}

2
templates/repo/issue/view_content.tmpl
View file

@ -56,7 +56,7 @@
{{end}} {{end}}
</div> </div>
</div> </div>
<div class="ui attached segment"> <div class="ui attached segment comment-body">
<div class="render-content markdown"> <div class="render-content markdown">
{{if .Issue.RenderedContent}} {{if .Issue.RenderedContent}}
{{.Issue.RenderedContent|Str2html}} {{.Issue.RenderedContent|Str2html}}

58
templates/repo/issue/view_content/comments.tmpl
View file

@ -22,9 +22,23 @@
<div class="ui top attached header comment-header df ac sb"> <div class="ui top attached header comment-header df ac sb">
<div class="comment-header-left df ac"> <div class="comment-header-left df ac">
{{if .OriginalAuthor }} {{if .OriginalAuthor }}
<span class="text black"><i class="fa {{MigrationIcon $.Repository.GetOriginalURLHostname}}" aria-hidden="true"></i> {{ .OriginalAuthor }}</span><span class="text grey"> {{$.i18n.Tr "repo.issues.commented_at" .Issue.HashTag $createdStr | Safe}} {{if $.Repository.OriginalURL}}</span><span class="text migrate">({{$.i18n.Tr "repo.migrated_from" $.Repository.OriginalURL $.Repository.GetOriginalURLHostname | Safe }}){{end}}</span> <span class="text black mr-2">
<i class="fa {{MigrationIcon $.Repository.GetOriginalURLHostname}}" aria-hidden="true"></i>
{{ .OriginalAuthor }}
</span>
<span class="text grey">
{{$.i18n.Tr "repo.issues.commented_at" .Issue.HashTag $createdStr | Safe}} {{if $.Repository.OriginalURL}}
</span>
<span class="text migrate">
({{$.i18n.Tr "repo.migrated_from" $.Repository.OriginalURL $.Repository.GetOriginalURLHostname | Safe }}){{end}}
</span>
{{else}} {{else}}
<span class="text grey"><a class="author"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>{{.Poster.GetDisplayName}}</a> {{$.i18n.Tr "repo.issues.commented_at" .HashTag $createdStr | Safe}}</span> <span class="text grey">
<a class="author"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>
{{.Poster.GetDisplayName}}
</a>
{{$.i18n.Tr "repo.issues.commented_at" .HashTag $createdStr | Safe}}
</span>
{{end}} {{end}}
</div> </div>
<div class="comment-header-right actions df ac"> <div class="comment-header-right actions df ac">
@ -48,7 +62,7 @@
{{end}} {{end}}
</div> </div>
</div> </div>
<div class="ui attached segment"> <div class="ui attached segment comment-body">
<div class="render-content markdown"> <div class="render-content markdown">
{{if .RenderedContent}} {{if .RenderedContent}}
{{.RenderedContent|Str2html}} {{.RenderedContent|Str2html}}
@ -425,7 +439,7 @@
{{$.i18n.Tr "repo.issues.review.left_comment" | Safe}} {{$.i18n.Tr "repo.issues.review.left_comment" | Safe}}
</span> </span>
</div> </div>
<div class="ui attached segment"> <div class="ui attached segment comment-body">
<div class="render-content markdown"> <div class="render-content markdown">
{{if .RenderedContent}} {{if .RenderedContent}}
{{.RenderedContent|Str2html}} {{.RenderedContent|Str2html}}
@ -492,32 +506,30 @@
<div class="ui comments"> <div class="ui comments">
{{range $comms}} {{range $comms}}
{{ $createdSubStr:= TimeSinceUnix .CreatedUnix $.Lang }} {{ $createdSubStr:= TimeSinceUnix .CreatedUnix $.Lang }}
<div class="comment" id="{{.HashTag}}"> <div class="comment code-comment" id="{{.HashTag}}">
{{if not .OriginalAuthor }} {{if not .OriginalAuthor }}
<a class="avatar"> <a class="avatar">
<img src="{{.Poster.RelAvatarLink}}"> <img src="{{.Poster.RelAvatarLink}}">
</a> </a>
{{end}} {{end}}
<div class="content"> <div class="content">
<div class="code-comment-content"> <span class="text grey">
<span class="text grey"> {{if .OriginalAuthor }}
{{if .OriginalAuthor }} <span class="text black"><i class="fa {{MigrationIcon $.Repository.GetOriginalURLHostname}}" aria-hidden="true"></i> {{ .OriginalAuthor }}</span><span class="text grey"> {{if $.Repository.OriginalURL}}</span><span class="text migrate">({{$.i18n.Tr "repo.migrated_from" $.Repository.OriginalURL $.Repository.GetOriginalURLHostname | Safe }}){{end}}</span>
<span class="text black"><i class="fa {{MigrationIcon $.Repository.GetOriginalURLHostname}}" aria-hidden="true"></i> {{ .OriginalAuthor }}</span><span class="text grey"> {{if $.Repository.OriginalURL}}</span><span class="text migrate">({{$.i18n.Tr "repo.migrated_from" $.Repository.OriginalURL $.Repository.GetOriginalURLHostname | Safe }}){{end}}</span> {{else}}
{{else}} <a class="author"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>{{.Poster.GetDisplayName}}</a>
<a class="author"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>{{.Poster.GetDisplayName}}</a> {{end}}
{{end}} {{$.i18n.Tr "repo.issues.commented_at" .HashTag $createdSubStr | Safe}}
{{$.i18n.Tr "repo.issues.commented_at" .HashTag $createdSubStr | Safe}} </span>
</span> <div class="text comment-content">
<div class="text"> <div class="render-content markdown">
<div class="render-content markdown"> {{if .RenderedContent}}
{{if .RenderedContent}} {{.RenderedContent|Str2html}}
{{.RenderedContent|Str2html}} {{else}}
{{else}} <span class="no-content">{{$.i18n.Tr "repo.issues.no_content"}}</span>
<span class="no-content">{{$.i18n.Tr "repo.issues.no_content"}}</span> {{end}}
{{end}}
</div>
<div class="raw-content hide">{{.Content}}</div>
</div> </div>
<div class="raw-content hide">{{.Content}}</div>
</div> </div>
</div> </div>
</div> </div>

62
web_src/less/_repository.less
View file

@ -998,6 +998,9 @@
} }
.content { .content {
border: 1px solid var(--color-secondary);
border-radius: var(--border-radius);
> .merge-section { > .merge-section {
background-color: #f7f7f7; background-color: #f7f7f7;
@ -1089,18 +1092,6 @@
} }
} }
&:target > .content {
box-shadow: 0 0 10px #8c8c8c;
}
&:target > .content > .code-comment-content {
padding: 4px;
}
&:target > .content > .code-comment-content > .text {
margin-bottom: 0;
}
.ui.form { .ui.form {
.field { .field {
&:first-child { &:first-child {
@ -1127,6 +1118,15 @@
} }
} }
.code-comment {
border: 1px solid transparent;
padding: 6px 6px 3px;
.content {
border: none !important;
}
}
.event { .event {
padding-left: 15px; padding-left: 15px;
@ -2395,6 +2395,11 @@
.segment.reactions { .segment.reactions {
padding: 0; padding: 0;
display: flex; display: flex;
border: none !important;
border-top: 1px solid var(--color-secondary) !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
.ui.label { .ui.label {
max-height: 40px; max-height: 40px;
@ -2407,7 +2412,7 @@
margin: 0; margin: 0;
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
border-color: inherit !important; border-color: var(--color-secondary) !important;
&.disabled { &.disabled {
cursor: default; cursor: default;
@ -2421,7 +2426,7 @@
.ui.label.basic.blue { .ui.label.basic.blue {
background-color: var(--color-primary-alpha-20) !important; background-color: var(--color-primary-alpha-20) !important;
border-color: inherit !important; border-color: var(--color-secondary) !important;
} }
.reaction-count { .reaction-count {
@ -2786,8 +2791,30 @@
} }
} }
.comment:target .content {
border-color: var(--color-primary) !important;
box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important;
}
.comment:target .header:before {
border-right-color: var(--color-primary) !important;
filter: drop-shadow(-3px 0 0 var(--color-primary-alpha-30)) !important;
}
.code-comment:target {
border-color: var(--color-primary) !important;
border-radius: var(--border-radius) !important;
box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important;
}
.code-comment:target .content {
box-shadow: none !important;
}
.comment-header { .comment-header {
#avatar-arrow; #avatar-arrow;
border: none !important;
border-bottom: 1px solid var(--color-secondary) !important;
font-weight: normal !important; font-weight: normal !important;
padding: .5rem 1rem !important; padding: .5rem 1rem !important;
margin: 0 !important; margin: 0 !important;
@ -2833,6 +2860,13 @@
margin-left: .25rem; margin-left: .25rem;
} }
.comment-body {
border: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
.edit-label.modal, .edit-label.modal,
.new-label.segment { .new-label.segment {
.form { .form {

4
web_src/less/themes/theme-arc-green.less
View file

@ -537,7 +537,7 @@ body {
.ui.attached.header { .ui.attached.header {
background: var(--color-secondary); background: var(--color-secondary);
border: 1px solid var(--color-secondary); border-color: var(--color-secondary);
color: #dbdbdb; color: #dbdbdb;
} }
@ -1039,7 +1039,7 @@ a.ui.basic.green.label:hover {
.ui.segment, .ui.segment,
.ui.segments, .ui.segments,
.ui.attached.segment { .ui.attached.segment {
border: 1px solid var(--color-secondary); border-color: var(--color-secondary);
} }
.ui.list > .item > .content { .ui.list > .item > .content {