From eba0ac5bf669aa262ac8897f87bb04f04b20450a Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 5 Nov 2020 20:34:04 +0100 Subject: [PATCH] Rework focused comment styling (#13434) Had to tweak a few borders to make it work properly in all cases, also added .comment-body class to specifically target that body. --- templates/repo/diff/comments.tmpl | 2 +- templates/repo/issue/view_content.tmpl | 2 +- .../repo/issue/view_content/comments.tmpl | 58 ++++++++++------- web_src/less/_repository.less | 62 ++++++++++++++----- web_src/less/themes/theme-arc-green.less | 4 +- 5 files changed, 87 insertions(+), 41 deletions(-) diff --git a/templates/repo/diff/comments.tmpl b/templates/repo/diff/comments.tmpl index 205dd97c24..803627060e 100644 --- a/templates/repo/diff/comments.tmpl +++ b/templates/repo/diff/comments.tmpl @@ -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))}} -
+
{{if .RenderedContent}} {{.RenderedContent|Str2html}} diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl index 611255518e..1dadd2ef96 100644 --- a/templates/repo/issue/view_content.tmpl +++ b/templates/repo/issue/view_content.tmpl @@ -56,7 +56,7 @@ {{end}}
-
+
{{if .Issue.RenderedContent}} {{.Issue.RenderedContent|Str2html}} diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl index 4ea6bd7cca..c814932d14 100644 --- a/templates/repo/issue/view_content/comments.tmpl +++ b/templates/repo/issue/view_content/comments.tmpl @@ -22,9 +22,23 @@
{{if .OriginalAuthor }} - {{ .OriginalAuthor }} {{$.i18n.Tr "repo.issues.commented_at" .Issue.HashTag $createdStr | Safe}} {{if $.Repository.OriginalURL}}({{$.i18n.Tr "repo.migrated_from" $.Repository.OriginalURL $.Repository.GetOriginalURLHostname | Safe }}){{end}} + + + {{ .OriginalAuthor }} + + + {{$.i18n.Tr "repo.issues.commented_at" .Issue.HashTag $createdStr | Safe}} {{if $.Repository.OriginalURL}} + + + ({{$.i18n.Tr "repo.migrated_from" $.Repository.OriginalURL $.Repository.GetOriginalURLHostname | Safe }}){{end}} + {{else}} - {{.Poster.GetDisplayName}} {{$.i18n.Tr "repo.issues.commented_at" .HashTag $createdStr | Safe}} + + + {{.Poster.GetDisplayName}} + + {{$.i18n.Tr "repo.issues.commented_at" .HashTag $createdStr | Safe}} + {{end}}
@@ -48,7 +62,7 @@ {{end}}
-
+
{{if .RenderedContent}} {{.RenderedContent|Str2html}} @@ -425,7 +439,7 @@ {{$.i18n.Tr "repo.issues.review.left_comment" | Safe}}
-
+
{{if .RenderedContent}} {{.RenderedContent|Str2html}} @@ -492,32 +506,30 @@
{{range $comms}} {{ $createdSubStr:= TimeSinceUnix .CreatedUnix $.Lang }} -
+
{{if not .OriginalAuthor }} {{end}}
-
- - {{if .OriginalAuthor }} - {{ .OriginalAuthor }} {{if $.Repository.OriginalURL}}({{$.i18n.Tr "repo.migrated_from" $.Repository.OriginalURL $.Repository.GetOriginalURLHostname | Safe }}){{end}} - {{else}} - {{.Poster.GetDisplayName}} - {{end}} - {{$.i18n.Tr "repo.issues.commented_at" .HashTag $createdSubStr | Safe}} - -
-
- {{if .RenderedContent}} - {{.RenderedContent|Str2html}} - {{else}} - {{$.i18n.Tr "repo.issues.no_content"}} - {{end}} -
-
{{.Content}}
+ + {{if .OriginalAuthor }} + {{ .OriginalAuthor }} {{if $.Repository.OriginalURL}}({{$.i18n.Tr "repo.migrated_from" $.Repository.OriginalURL $.Repository.GetOriginalURLHostname | Safe }}){{end}} + {{else}} + {{.Poster.GetDisplayName}} + {{end}} + {{$.i18n.Tr "repo.issues.commented_at" .HashTag $createdSubStr | Safe}} + +
+
+ {{if .RenderedContent}} + {{.RenderedContent|Str2html}} + {{else}} + {{$.i18n.Tr "repo.issues.no_content"}} + {{end}}
+
{{.Content}}
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 72b500d4ab..d3190f222d 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -998,6 +998,9 @@ } .content { + border: 1px solid var(--color-secondary); + border-radius: var(--border-radius); + > .merge-section { 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 { .field { &:first-child { @@ -1127,6 +1118,15 @@ } } + .code-comment { + border: 1px solid transparent; + padding: 6px 6px 3px; + + .content { + border: none !important; + } + } + .event { padding-left: 15px; @@ -2395,6 +2395,11 @@ .segment.reactions { padding: 0; 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 { max-height: 40px; @@ -2407,7 +2412,7 @@ margin: 0; font-size: 14px; font-weight: normal; - border-color: inherit !important; + border-color: var(--color-secondary) !important; &.disabled { cursor: default; @@ -2421,7 +2426,7 @@ .ui.label.basic.blue { background-color: var(--color-primary-alpha-20) !important; - border-color: inherit !important; + border-color: var(--color-secondary) !important; } .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 { #avatar-arrow; + border: none !important; + border-bottom: 1px solid var(--color-secondary) !important; font-weight: normal !important; padding: .5rem 1rem !important; margin: 0 !important; @@ -2833,6 +2860,13 @@ margin-left: .25rem; } +.comment-body { + border: none !important; + width: 100% !important; + max-width: 100% !important; + margin: 0 !important; +} + .edit-label.modal, .new-label.segment { .form { diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index 5ca6a331d9..4cb3e9d7fd 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -537,7 +537,7 @@ body { .ui.attached.header { background: var(--color-secondary); - border: 1px solid var(--color-secondary); + border-color: var(--color-secondary); color: #dbdbdb; } @@ -1039,7 +1039,7 @@ a.ui.basic.green.label:hover { .ui.segment, .ui.segments, .ui.attached.segment { - border: 1px solid var(--color-secondary); + border-color: var(--color-secondary); } .ui.list > .item > .content {