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.

diff --git a/templates/repo/diff/comments.tmpl b/templates/repo/diff/comments.tmpl
index 205dd97c240c977b862804c3b2a31da508f1e33d..803627060e4931132fbb6f36636a6b24c2f65c7c 100644 (file)
--- 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))}}
                        </div>
                </div>
-               <div class="ui attached segment">
+               <div class="ui attached segment comment-body">
                        <div class="render-content markdown">
                        {{if .RenderedContent}}
                                {{.RenderedContent|Str2html}}

diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl
index 611255518efe87406f0f65513542c1467e1b5153..1dadd2ef96a3aa19744c2349b3471056c68b9f2b 100644 (file)
--- a/templates/repo/issue/view_content.tmpl
+++ b/templates/repo/issue/view_content.tmpl
@@ -56,7 +56,7 @@
                                                        {{end}}
                                                </div>
                                        </div>
-                                       <div class="ui attached segment">
+                                       <div class="ui attached segment comment-body">
                                                <div class="render-content markdown">
                                                        {{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 4ea6bd7cca6716d55e3f45fea1d0f44058c30954..c814932d1412ba1382b8b09cbb169876ddd08307 100644 (file)
--- a/templates/repo/issue/view_content/comments.tmpl
+++ b/templates/repo/issue/view_content/comments.tmpl
@@ -22,9 +22,23 @@
                                <div class="ui top attached header comment-header df ac sb">
                                        <div class="comment-header-left df ac">
                                                {{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}}
-                                                       <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}}
                                        </div>
                                        <div class="comment-header-right actions df ac">
@@ -48,7 +62,7 @@
                                                {{end}}
                                        </div>
                                </div>
-                               <div class="ui attached segment">
+                               <div class="ui attached segment comment-body">
                                        <div class="render-content markdown">
                                                {{if .RenderedContent}}
                                                        {{.RenderedContent|Str2html}}
@@ -425,7 +439,7 @@
                                                        {{$.i18n.Tr "repo.issues.review.left_comment" | Safe}}
                                                </span>
                                        </div>
-                                       <div class="ui attached segment">
+                                       <div class="ui attached segment comment-body">
                                                <div class="render-content markdown">
                                                        {{if .RenderedContent}}
                                                                {{.RenderedContent|Str2html}}
@@ -492,32 +506,30 @@
                                                                        <div class="ui comments">
                                                                                {{range $comms}}
                                                                                        {{ $createdSubStr:= TimeSinceUnix .CreatedUnix $.Lang }}
-                                                                                       <div class="comment" id="{{.HashTag}}">
+                                                                                       <div class="comment code-comment" id="{{.HashTag}}">
                                                                                                {{if not .OriginalAuthor }}
                                                                                                        <a class="avatar">
                                                                                                                <img src="{{.Poster.RelAvatarLink}}">
                                                                                                        </a>
                                                                                                {{end}}
                                                                                                <div class="content">
-                                                                                                       <div class="code-comment-content">
-                                                                                                               <span class="text grey">
-                                                                                                                       {{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>
-                                                                                                                       {{else}}
-                                                                                                                               <a class="author"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>{{.Poster.GetDisplayName}}</a>
-                                                                                                                       {{end}}
-                                                                                                                       {{$.i18n.Tr "repo.issues.commented_at" .HashTag $createdSubStr | Safe}}
-                                                                                                               </span>
-                                                                                                               <div class="text">
-                                                                                                                       <div class="render-content markdown">
-                                                                                                                       {{if .RenderedContent}}
-                                                                                                                               {{.RenderedContent|Str2html}}
-                                                                                                                       {{else}}
-                                                                                                                               <span class="no-content">{{$.i18n.Tr "repo.issues.no_content"}}</span>
-                                                                                                                       {{end}}
-                                                                                                                       </div>
-                                                                                                                       <div class="raw-content hide">{{.Content}}</div>
+                                                                                                       <span class="text grey">
+                                                                                                               {{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>
+                                                                                                               {{else}}
+                                                                                                                       <a class="author"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>{{.Poster.GetDisplayName}}</a>
+                                                                                                               {{end}}
+                                                                                                               {{$.i18n.Tr "repo.issues.commented_at" .HashTag $createdSubStr | Safe}}
+                                                                                                       </span>
+                                                                                                       <div class="text comment-content">
+                                                                                                               <div class="render-content markdown">
+                                                                                                               {{if .RenderedContent}}
+                                                                                                                       {{.RenderedContent|Str2html}}
+                                                                                                               {{else}}
+                                                                                                                       <span class="no-content">{{$.i18n.Tr "repo.issues.no_content"}}</span>
+                                                                                                               {{end}}
                                                                                                                </div>
+                                                                                                               <div class="raw-content hide">{{.Content}}</div>
                                                                                                        </div>
                                                                                                </div>
                                                                                        </div>

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 72b500d4abc2898a377392b95efc5cb13cf0e9b7..d3190f222df97d979814f5ca7cb9c8672ce788bd 100644 (file)
--- 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 5ca6a331d9839a65dc5ecd5ee06104e8381a9a60..4cb3e9d7fdc73adb5512201ead10bc952bb2929a 100644 (file)
--- 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 {