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:
parent
7166629d9c
commit
5b92bc1bec
5 changed files with 31 additions and 7 deletions
|
@ -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}
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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}}">
|
||||||
|
|
Reference in a new issue