From daf62841f645e77affa0a50701a79d942c612500 Mon Sep 17 00:00:00 2001
From: Cirno the Strongest <1447794+CirnoT@users.noreply.github.com>
Date: Mon, 22 Jun 2020 21:02:27 +0200
Subject: [PATCH] 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>
---
 semantic.json                            |  1 -
 templates/repo/diff/box.tmpl             |  8 ++++----
 web_src/js/index.js                      |  3 ---
 web_src/less/_repository.less            | 10 ++++++++++
 web_src/less/themes/theme-arc-green.less |  4 ++++
 5 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/semantic.json b/semantic.json
index 5136c2030c..0187b9c68f 100644
--- a/semantic.json
+++ b/semantic.json
@@ -52,7 +52,6 @@
     "segment",
     "sidebar",
     "site",
-    "sticky",
     "tab",
     "table",
     "text",
diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index b6d1fdf3a0..cce297dc26 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -1,5 +1,5 @@
 {{if .DiffNotAvailable}}
-	<div class="diff-detail-box diff-box ui sticky">
+	<div class="diff-detail-box diff-box sticky">
 		<div>
 			<div class="ui right">
 				{{if .PageIsPullFiles}}
@@ -17,7 +17,7 @@
 	<h4>{{.i18n.Tr "repo.diff.data_not_available"}}</h4>
 {{else}}
 	<div>
-		<div class="diff-detail-box diff-box ui sticky">
+		<div class="diff-detail-box diff-box sticky">
 			<i class="fa fa-retweet"></i>
 			{{.i18n.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
 			<div class="ui right">
@@ -192,7 +192,7 @@
 																<td class="add-comment-right">
 																	{{if and $resolved (eq $line.GetCommentSide "proposed")}}
 																		<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">
 																				{{svg "octicon-unfold" 16}}
 																				{{$.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">
 																				{{svg "octicon-fold" 16}}
 																				{{$.i18n.Tr "repo.issues.review.hide_resolved"}}
-																			</button>	
+																			</button>
 																		</div>
 																	{{end}}
 																	{{if eq $line.GetCommentSide "proposed"}}
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 61059b6946..a39d8b0dd3 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -1204,8 +1204,6 @@ function initPullRequestReview() {
     return;
   }
 
-  $('.diff-detail-box.ui.sticky').sticky();
-
   $('.btn-review').on('click', function (e) {
     e.preventDefault();
     $(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) => {
       $row.replaceWith(blob);
       $(`[data-anchor="${$blob.data('anchor')}"]`).on('click', (e) => { insertBlobExcerpt(e) });
-      $('.diff-detail-box.ui.sticky').sticky();
     });
   }
   $('.ui.blob-excerpt').on('click', (e) => { insertBlobExcerpt(e) });
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 7bdfe6611f..67bd582161 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -1567,6 +1567,16 @@
         background: #ffffff;
         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 {
             clear: both;
             content: "";
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index 3c83d1cc8b..529ceeb6e8 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -1335,6 +1335,10 @@ a.ui.labels .label:hover {
     .detail-files {
         background-color: inherit;
     }
+
+    &.sticky {
+        border-bottom-color: rgba(255, 255, 255, .1);
+    }
 }
 
 .comment-code-cloud {