ui - cut timeline length with last element on issue view (#7355)

* cut timeline length with last element on issue view

fix #7304

- lightly enlight dark theme issue timeline color

Signed-off-by: Michael Gnehr <michael@gnehr.de>

* remove new container

Signed-off-by: Michael Gnehr <michael@gnehr.de>

5 files changed, 31 insertions, 7 deletions

diff --git a/public/css/index.css b/public/css/index.css
index f4f95ce081..8af38e4825 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -524,7 +524,9 @@ footer .ui.left,footer .ui.right{line-height:40px}
 .repository.view.issue .pull .review-item .type-icon{float:right;margin-right:1em}
 .repository.view.issue .pull .review-item .divider{margin:.5rem 0}
 .repository.view.issue .pull .review-item .review-content{padding:1em 0 1em 3.8em}
-.repository.view.issue .comment-list:before{display:block;content:"";position:absolute;margin-top:12px;margin-bottom:14px;top:0;bottom:0;left:96px;width:2px;background-color:#f3f3f3;z-index:-1}
+.repository.view.issue .comment-list:not(.prevent-before-timeline):before{display:block;content:"";position:absolute;margin-top:12px;margin-bottom:14px;top:0;bottom:0;left:96px;width:2px;background-color:#f3f3f3;z-index:-1}
+.repository.view.issue .comment-list .timeline-line{position:relative;display:block;width:100%;max-width:100%}
+.repository.view.issue .comment-list .timeline-line:before{display:block;content:"";position:absolute;margin-top:12px;margin-bottom:14px;top:0;bottom:0;left:82px;width:2px;background-color:#f3f3f3;z-index:-1}
 .repository.view.issue .comment-list .comment .avatar{width:3em}
 .repository.view.issue .comment-list .comment .tag{color:#767676;margin-top:3px;padding:2px 5px;font-size:12px;border:1px solid rgba(0,0,0,.1);border-radius:3px}
 .repository.view.issue .comment-list .comment .actions .item{float:left}
diff --git a/public/css/theme-arc-green.css b/public/css/theme-arc-green.css
index a93404cad0..2a7836efc8 100644
--- a/public/css/theme-arc-green.css
+++ b/public/css/theme-arc-green.css
@@ -118,7 +118,7 @@ footer{background:#2e323e;border-top:1px solid #313131}
 .repository.new.issue .comment.form .content:after{border-right-color:#353945}
 .repository.view.issue .comment-list .comment .content .header:before{border-right-color:#404552}
 .repository.new.issue .comment.form .content:before{border-right-color:#353945}
-.repository.view.issue .comment-list:before{background-color:#313c47}
+.repository.view.issue .comment-list .timeline-line:before,.repository.view.issue .comment-list:not(.prevent-before-timeline):before{background-color:#3b4954}
 .repository .comment.form .content .form:after{border-right-color:#313c47}
 .repository .comment.form .content .form:before{border-right-color:#313c47}
 .ui .text.grey a:hover{color:#dbdbdb!important}
diff --git a/public/less/_repository.less b/public/less/_repository.less
index 5a57f5db71..dd986c8832 100644
--- a/public/less/_repository.less
+++ b/public/less/_repository.less
@@ -749,7 +749,7 @@
         }
 
         .comment-list {
-            &:before {
+            &:not(.prevent-before-timeline):before {
                 display: block;
                 content: "";
                 position: absolute;
@@ -763,6 +763,27 @@
                 z-index: -1;
             }
 
+            .timeline-line {
+                position: relative;
+                display: block;
+                width: 100%;
+                max-width: 100%;
+
+                &:before {
+                    display: block;
+                    content: "";
+                    position: absolute;
+                    margin-top: 12px;
+                    margin-bottom: 14px;
+                    top: 0;
+                    bottom: 0;
+                    left: 82px;
+                    width: 2px;
+                    background-color: #f3f3f3;
+                    z-index: -1;
+                }
+            }
+
             .comment {
                 .avatar {
                     width: @comment-avatar-width;
diff --git a/public/less/themes/arc-green.less b/public/less/themes/arc-green.less
index 4780756bce..d4200b5162 100644
--- a/public/less/themes/arc-green.less
+++ b/public/less/themes/arc-green.less
@@ -619,8 +619,9 @@ a.ui.basic.green.label:hover {
     border-right-color: #353945;
 }
 
-.repository.view.issue .comment-list:before {
-    background-color: #313c47;
+.repository.view.issue .comment-list:not(.prevent-before-timeline):before,
+.repository.view.issue .comment-list .timeline-line:before {
+    background-color: #3b4954;
 }
 
 .repository .comment.form .content .form:after {
diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl
index cb85c5be97..16700a8dc1 100644
--- a/templates/repo/issue/view_content.tmpl
+++ b/templates/repo/issue/view_content.tmpl
@@ -9,8 +9,8 @@
 	{{end}}
 
 	{{ $createdStr:= TimeSinceUnix .Issue.CreatedUnix $.Lang }}
-	<div class="twelve wide column comment-list">
-		<ui class="ui comments">
+	<div class="twelve wide column comment-list prevent-before-timeline">
+		<ui class="ui comments timeline-line">
 			<div class="comment">
 				<a class="avatar" {{if gt .Issue.Poster.ID 0}}href="{{.Issue.Poster.HomeLink}}"{{end}}>
 					<img src="{{.Issue.Poster.RelAvatarLink}}">