Skip to content

Commit 2d81ee4

Browse files
silverwindsilverwind
committed
Rework focused comment styling
Had to tweak a few borders to make it work properly in all cases, also added .comment-body class to specifically target that body.
1 parent 5b636bd commit 2d81ee4

File tree

5 files changed

+87
-41
lines changed

5 files changed

+87
-41
lines changed

‎templates/repo/diff/comments.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
{{template "repo/issue/view_content/context_menu" Dict "ctx" $.root "item" . "delete" true "diff" true "IsCommentPoster" (and $.root.IsSigned (eq $.root.SignedUserID .PosterID))}}
5151
</div>
5252
</div>
53-
<div class="ui attached segment">
53+
<div class="ui attached segment comment-body">
5454
<div class="render-content markdown">
5555
{{if .RenderedContent}}
5656
{{.RenderedContent|Str2html}}

‎templates/repo/issue/view_content.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
{{end}}
5757
</div>
5858
</div>
59-
<div class="ui attached segment">
59+
<div class="ui attached segment comment-body">
6060
<div class="render-content markdown">
6161
{{if .Issue.RenderedContent}}
6262
{{.Issue.RenderedContent|Str2html}}

‎templates/repo/issue/view_content/comments.tmpl

+35-23
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,23 @@
2222
<div class="ui top attached header comment-header df ac sb">
2323
<div class="comment-header-left df ac">
2424
{{if .OriginalAuthor }}
25-
<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>
25+
<span class="text black mr-2">
26+
<i class="fa {{MigrationIcon $.Repository.GetOriginalURLHostname}}" aria-hidden="true"></i>
27+
{{ .OriginalAuthor }}
28+
</span>
29+
<span class="text grey">
30+
{{$.i18n.Tr "repo.issues.commented_at" .Issue.HashTag $createdStr | Safe}} {{if $.Repository.OriginalURL}}
31+
</span>
32+
<span class="text migrate">
33+
({{$.i18n.Tr "repo.migrated_from" $.Repository.OriginalURL $.Repository.GetOriginalURLHostname | Safe }}){{end}}
34+
</span>
2635
{{else}}
27-
<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>
36+
<span class="text grey">
37+
<a class="author"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>
38+
{{.Poster.GetDisplayName}}
39+
</a>
40+
{{$.i18n.Tr "repo.issues.commented_at" .HashTag $createdStr | Safe}}
41+
</span>
2842
{{end}}
2943
</div>
3044
<div class="comment-header-right actions df ac">
@@ -48,7 +62,7 @@
4862
{{end}}
4963
</div>
5064
</div>
51-
<div class="ui attached segment">
65+
<div class="ui attached segment comment-body">
5266
<div class="render-content markdown">
5367
{{if .RenderedContent}}
5468
{{.RenderedContent|Str2html}}
@@ -425,7 +439,7 @@
425439
{{$.i18n.Tr "repo.issues.review.left_comment" | Safe}}
426440
</span>
427441
</div>
428-
<div class="ui attached segment">
442+
<div class="ui attached segment comment-body">
429443
<div class="render-content markdown">
430444
{{if .RenderedContent}}
431445
{{.RenderedContent|Str2html}}
@@ -492,32 +506,30 @@
492506
<div class="ui comments">
493507
{{range $comms}}
494508
{{ $createdSubStr:= TimeSinceUnix .CreatedUnix $.Lang }}
495-
<div class="comment" id="{{.HashTag}}">
509+
<div class="comment code-comment" id="{{.HashTag}}">
496510
{{if not .OriginalAuthor }}
497511
<a class="avatar">
498512
<img src="{{.Poster.RelAvatarLink}}">
499513
</a>
500514
{{end}}
501515
<div class="content">
502-
<div class="code-comment-content">
503-
<span class="text grey">
504-
{{if .OriginalAuthor }}
505-
<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>
506-
{{else}}
507-
<a class="author"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>{{.Poster.GetDisplayName}}</a>
508-
{{end}}
509-
{{$.i18n.Tr "repo.issues.commented_at" .HashTag $createdSubStr | Safe}}
510-
</span>
511-
<div class="text">
512-
<div class="render-content markdown">
513-
{{if .RenderedContent}}
514-
{{.RenderedContent|Str2html}}
515-
{{else}}
516-
<span class="no-content">{{$.i18n.Tr "repo.issues.no_content"}}</span>
517-
{{end}}
518-
</div>
519-
<div class="raw-content hide">{{.Content}}</div>
516+
<span class="text grey">
517+
{{if .OriginalAuthor }}
518+
<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>
519+
{{else}}
520+
<a class="author"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>{{.Poster.GetDisplayName}}</a>
521+
{{end}}
522+
{{$.i18n.Tr "repo.issues.commented_at" .HashTag $createdSubStr | Safe}}
523+
</span>
524+
<div class="text comment-content">
525+
<div class="render-content markdown">
526+
{{if .RenderedContent}}
527+
{{.RenderedContent|Str2html}}
528+
{{else}}
529+
<span class="no-content">{{$.i18n.Tr "repo.issues.no_content"}}</span>
530+
{{end}}
520531
</div>
532+
<div class="raw-content hide">{{.Content}}</div>
521533
</div>
522534
</div>
523535
</div>

‎web_src/less/_repository.less

+48-14
Original file line numberDiff line numberDiff line change
@@ -998,6 +998,9 @@
998998
}
999999

10001000
.content {
1001+
border: 1px solid var(--color-secondary);
1002+
border-radius: var(--border-radius);
1003+
10011004
> .merge-section {
10021005
background-color: #f7f7f7;
10031006

@@ -1089,18 +1092,6 @@
10891092
}
10901093
}
10911094

1092-
&:target > .content {
1093-
box-shadow: 0 0 10px #8c8c8c;
1094-
}
1095-
1096-
&:target > .content > .code-comment-content {
1097-
padding: 4px;
1098-
}
1099-
1100-
&:target > .content > .code-comment-content > .text {
1101-
margin-bottom: 0;
1102-
}
1103-
11041095
.ui.form {
11051096
.field {
11061097
&:first-child {
@@ -1127,6 +1118,15 @@
11271118
}
11281119
}
11291120

1121+
.code-comment {
1122+
border: 1px solid transparent;
1123+
padding: 6px 6px 3px;
1124+
1125+
.content {
1126+
border: none !important;
1127+
}
1128+
}
1129+
11301130
.event {
11311131
padding-left: 15px;
11321132

@@ -2395,6 +2395,11 @@
23952395
.segment.reactions {
23962396
padding: 0;
23972397
display: flex;
2398+
border: none !important;
2399+
border-top: 1px solid var(--color-secondary) !important;
2400+
width: 100% !important;
2401+
max-width: 100% !important;
2402+
margin: 0 !important;
23982403

23992404
.ui.label {
24002405
max-height: 40px;
@@ -2407,7 +2412,7 @@
24072412
margin: 0;
24082413
font-size: 14px;
24092414
font-weight: normal;
2410-
border-color: inherit !important;
2415+
border-color: var(--color-secondary) !important;
24112416

24122417
&.disabled {
24132418
cursor: default;
@@ -2421,7 +2426,7 @@
24212426

24222427
.ui.label.basic.blue {
24232428
background-color: var(--color-primary-alpha-20) !important;
2424-
border-color: inherit !important;
2429+
border-color: var(--color-secondary) !important;
24252430
}
24262431

24272432
.reaction-count {
@@ -2786,8 +2791,30 @@
27862791
}
27872792
}
27882793

2794+
.comment:target .content {
2795+
border-color: var(--color-primary) !important;
2796+
box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important;
2797+
}
2798+
2799+
.comment:target .header:before {
2800+
border-right-color: var(--color-primary) !important;
2801+
filter: drop-shadow(-3px 0 0 var(--color-primary-alpha-30)) !important;
2802+
}
2803+
2804+
.code-comment:target {
2805+
border-color: var(--color-primary) !important;
2806+
border-radius: var(--border-radius) !important;
2807+
box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important;
2808+
}
2809+
2810+
.code-comment:target .content {
2811+
box-shadow: none !important;
2812+
}
2813+
27892814
.comment-header {
27902815
#avatar-arrow;
2816+
border: none !important;
2817+
border-bottom: 1px solid var(--color-secondary) !important;
27912818
font-weight: normal !important;
27922819
padding: .5rem 1rem !important;
27932820
margin: 0 !important;
@@ -2833,6 +2860,13 @@
28332860
margin-left: .25rem;
28342861
}
28352862

2863+
.comment-body {
2864+
border: none !important;
2865+
width: 100% !important;
2866+
max-width: 100% !important;
2867+
margin: 0 !important;
2868+
}
2869+
28362870
.edit-label.modal,
28372871
.new-label.segment {
28382872
.form {

‎web_src/less/themes/theme-arc-green.less

+2-2
Original file line numberDiff line numberDiff line change
@@ -537,7 +537,7 @@ body {
537537

538538
.ui.attached.header {
539539
background: var(--color-secondary);
540-
border: 1px solid var(--color-secondary);
540+
border-color: var(--color-secondary);
541541
color: #dbdbdb;
542542
}
543543

@@ -1039,7 +1039,7 @@ a.ui.basic.green.label:hover {
10391039
.ui.segment,
10401040
.ui.segments,
10411041
.ui.attached.segment {
1042-
border: 1px solid var(--color-secondary);
1042+
border-color: var(--color-secondary);
10431043
}
10441044

10451045
.ui.list > .item > .content {

0 commit comments

Comments
 (0)