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>
This commit is contained in:
Cherrg 2019-07-06 23:37:46 +02:00 committed by zeripath
parent 7166629d9c
commit 5b92bc1bec
5 changed files with 31 additions and 7 deletions

View file

@ -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 .type-icon{float:right;margin-right:1em}
.repository.view.issue .pull .review-item .divider{margin:.5rem 0} .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 .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 .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 .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} .repository.view.issue .comment-list .comment .actions .item{float:left}

View file

@ -118,7 +118,7 @@ footer{background:#2e323e;border-top:1px solid #313131}
.repository.new.issue .comment.form .content:after{border-right-color:#353945} .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.view.issue .comment-list .comment .content .header:before{border-right-color:#404552}
.repository.new.issue .comment.form .content:before{border-right-color:#353945} .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:after{border-right-color:#313c47}
.repository .comment.form .content .form:before{border-right-color:#313c47} .repository .comment.form .content .form:before{border-right-color:#313c47}
.ui .text.grey a:hover{color:#dbdbdb!important} .ui .text.grey a:hover{color:#dbdbdb!important}

View file

@ -749,7 +749,7 @@
} }
.comment-list { .comment-list {
&:before { &:not(.prevent-before-timeline):before {
display: block; display: block;
content: ""; content: "";
position: absolute; position: absolute;
@ -763,6 +763,27 @@
z-index: -1; 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 { .comment {
.avatar { .avatar {
width: @comment-avatar-width; width: @comment-avatar-width;

View file

@ -619,8 +619,9 @@ a.ui.basic.green.label:hover {
border-right-color: #353945; border-right-color: #353945;
} }
.repository.view.issue .comment-list:before { .repository.view.issue .comment-list:not(.prevent-before-timeline):before,
background-color: #313c47; .repository.view.issue .comment-list .timeline-line:before {
background-color: #3b4954;
} }
.repository .comment.form .content .form:after { .repository .comment.form .content .form:after {

View file

@ -9,8 +9,8 @@
{{end}} {{end}}
{{ $createdStr:= TimeSinceUnix .Issue.CreatedUnix $.Lang }} {{ $createdStr:= TimeSinceUnix .Issue.CreatedUnix $.Lang }}
<div class="twelve wide column comment-list"> <div class="twelve wide column comment-list prevent-before-timeline">
<ui class="ui comments"> <ui class="ui comments timeline-line">
<div class="comment"> <div class="comment">
<a class="avatar" {{if gt .Issue.Poster.ID 0}}href="{{.Issue.Poster.HomeLink}}"{{end}}> <a class="avatar" {{if gt .Issue.Poster.ID 0}}href="{{.Issue.Poster.HomeLink}}"{{end}}>
<img src="{{.Issue.Poster.RelAvatarLink}}"> <img src="{{.Issue.Poster.RelAvatarLink}}">