Fix sticky diff stats container (#12002)

* Fix sticky diff stats container

* Use pure CSS sticky instead of Fomantic's JS

* add border color to arc-green

* add slight padding on sides

* make linter happy

Co-authored-by: techknowlogick <techknowlogick@gitea.io>
This commit is contained in:
Cirno the Strongest 2020-06-22 21:02:27 +02:00 committed by GitHub
parent fc2f2c7602
commit daf62841f6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 18 additions and 8 deletions

View file

@ -52,7 +52,6 @@
"segment", "segment",
"sidebar", "sidebar",
"site", "site",
"sticky",
"tab", "tab",
"table", "table",
"text", "text",

View file

@ -1,5 +1,5 @@
{{if .DiffNotAvailable}} {{if .DiffNotAvailable}}
<div class="diff-detail-box diff-box ui sticky"> <div class="diff-detail-box diff-box sticky">
<div> <div>
<div class="ui right"> <div class="ui right">
{{if .PageIsPullFiles}} {{if .PageIsPullFiles}}
@ -17,7 +17,7 @@
<h4>{{.i18n.Tr "repo.diff.data_not_available"}}</h4> <h4>{{.i18n.Tr "repo.diff.data_not_available"}}</h4>
{{else}} {{else}}
<div> <div>
<div class="diff-detail-box diff-box ui sticky"> <div class="diff-detail-box diff-box sticky">
<i class="fa fa-retweet"></i> <i class="fa fa-retweet"></i>
{{.i18n.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}} {{.i18n.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
<div class="ui right"> <div class="ui right">
@ -192,7 +192,7 @@
<td class="add-comment-right"> <td class="add-comment-right">
{{if and $resolved (eq $line.GetCommentSide "proposed")}} {{if and $resolved (eq $line.GetCommentSide "proposed")}}
<div class="ui top attached header"> <div class="ui top attached header">
<span class="ui grey text left"><b>{{$resolveDoer.Name}}</b> {{$.i18n.Tr "repo.issues.review.resolved_by"}}</span> <span class="ui grey text left"><b>{{$resolveDoer.Name}}</b> {{$.i18n.Tr "repo.issues.review.resolved_by"}}</span>
<button id="show-outdated-{{(index $line.Comments 0).ID}}" data-comment="{{(index $line.Comments 0).ID}}" class="ui compact right labeled button show-outdated"> <button id="show-outdated-{{(index $line.Comments 0).ID}}" data-comment="{{(index $line.Comments 0).ID}}" class="ui compact right labeled button show-outdated">
{{svg "octicon-unfold" 16}} {{svg "octicon-unfold" 16}}
{{$.i18n.Tr "repo.issues.review.show_resolved"}} {{$.i18n.Tr "repo.issues.review.show_resolved"}}
@ -200,7 +200,7 @@
<button id="hide-outdated-{{(index $line.Comments 0).ID}}" data-comment="{{(index $line.Comments 0).ID}}" class="hide ui compact right labeled button hide-outdated"> <button id="hide-outdated-{{(index $line.Comments 0).ID}}" data-comment="{{(index $line.Comments 0).ID}}" class="hide ui compact right labeled button hide-outdated">
{{svg "octicon-fold" 16}} {{svg "octicon-fold" 16}}
{{$.i18n.Tr "repo.issues.review.hide_resolved"}} {{$.i18n.Tr "repo.issues.review.hide_resolved"}}
</button> </button>
</div> </div>
{{end}} {{end}}
{{if eq $line.GetCommentSide "proposed"}} {{if eq $line.GetCommentSide "proposed"}}

View file

@ -1204,8 +1204,6 @@ function initPullRequestReview() {
return; return;
} }
$('.diff-detail-box.ui.sticky').sticky();
$('.btn-review').on('click', function (e) { $('.btn-review').on('click', function (e) {
e.preventDefault(); e.preventDefault();
$(this).closest('.dropdown').find('.menu').toggle('visible'); $(this).closest('.dropdown').find('.menu').toggle('visible');
@ -2042,7 +2040,6 @@ function initCodeView() {
$.get(`${$blob.data('url')}?${$blob.data('query')}&anchor=${$blob.data('anchor')}`, (blob) => { $.get(`${$blob.data('url')}?${$blob.data('query')}&anchor=${$blob.data('anchor')}`, (blob) => {
$row.replaceWith(blob); $row.replaceWith(blob);
$(`[data-anchor="${$blob.data('anchor')}"]`).on('click', (e) => { insertBlobExcerpt(e) }); $(`[data-anchor="${$blob.data('anchor')}"]`).on('click', (e) => { insertBlobExcerpt(e) });
$('.diff-detail-box.ui.sticky').sticky();
}); });
} }
$('.ui.blob-excerpt').on('click', (e) => { insertBlobExcerpt(e) }); $('.ui.blob-excerpt').on('click', (e) => { insertBlobExcerpt(e) });

View file

@ -1567,6 +1567,16 @@
background: #ffffff; background: #ffffff;
line-height: 30px; line-height: 30px;
&.sticky {
position: sticky;
top: 0;
z-index: 800;
margin-bottom: 10px;
border-bottom: 1px solid #d4d4d5;
padding-left: 5px;
padding-right: 5px;
}
> div:after { > div:after {
clear: both; clear: both;
content: ""; content: "";

View file

@ -1335,6 +1335,10 @@ a.ui.labels .label:hover {
.detail-files { .detail-files {
background-color: inherit; background-color: inherit;
} }
&.sticky {
border-bottom-color: rgba(255, 255, 255, .1);
}
} }
.comment-code-cloud { .comment-code-cloud {