Ensure that diff stats can scroll independently of the diff (#8581) (#8611)

This PR ensures that once opened the diff stats detail box can be scrolled independently of the diff on the compare page.

Fixes #5532 

Details:

* make diff-detail-box the main container
* move file diff at the same level as diff-stats
* make diff-view options sticy again
* make diff-stats scroll if to mouch
* rm useless css info
* less: mv diff-stats to own class
* use new css class
* cleanup less file
* diff-counter: margin-right: 15px;
* make CI work
* make numbers colorful
* add sign (-/+) to numbers

public/css/index.css

@@ -659,8 +659,6 @@ footer .ui.left,footer .ui.right{line-height:40px}
 .repository #commits-table td.sha .sha.label.isSigned.isVerified:hover,.repository #repo-files-table .sha.label.isSigned.isVerified:hover{background:rgba(33,186,69,.3)!important}
 .repository .diff-detail-box{padding:7px 0;background:#fff;line-height:30px}
 .repository .diff-detail-box>div:after{clear:both;content:"";display:block}
-.repository .diff-detail-box ol{clear:both;padding-left:0;margin-top:5px;margin-bottom:28px}
-.repository .diff-detail-box ol li{list-style:none;padding-bottom:4px;margin-bottom:4px;border-bottom:1px dashed #ddd;padding-left:6px}
 .repository .diff-detail-box span.status{display:inline-block;width:12px;height:12px;margin-right:8px;vertical-align:middle}
 .repository .diff-detail-box span.status.modify{background-color:#f0db88}
 .repository .diff-detail-box span.status.add{background-color:#b4e2b4}
@@ -697,6 +695,11 @@ footer .ui.left,footer .ui.right{line-height:40px}
 .repository .diff-file-box.file-content{clear:right}
 .repository .diff-file-box.file-content img{max-width:100%;padding:5px 5px 0 5px}
 .repository .diff-file-box.file-content img.emoji{padding:0}
+.repository .diff-stats{clear:both;margin-bottom:5px;max-height:400px;overflow:auto;padding-left:0}
+.repository .diff-stats li{list-style:none;padding-bottom:4px;margin-bottom:4px;border-bottom:1px dashed #ddd;padding-left:6px}
+.repository .diff-stats .diff-counter{margin-right:15px}
+.repository .diff-stats .diff-counter .del{color:red}
+.repository .diff-stats .diff-counter .add{color:green}
 .repository .repo-search-result{padding-top:10px;padding-bottom:10px}
 .repository .repo-search-result .lines-num a{color:inherit}
 .repository.quickstart .guide .item{padding:1em}

public/less/_repository.less

@@ -1237,21 +1237,6 @@
             display: block;
         }
 
-        ol {
-            clear: both;
-            padding-left: 0;
-            margin-top: 5px;
-            margin-bottom: 28px;
-
-            li {
-                list-style: none;
-                padding-bottom: 4px;
-                margin-bottom: 4px;
-                border-bottom: 1px dashed #dddddd;
-                padding-left: 6px;
-            }
-        }
-
         span.status {
             display: inline-block;
             width: 12px;
@@ -1466,6 +1451,34 @@
         }
     }
 
+    .diff-stats {
+
+        clear: both;
+        margin-bottom: 5px;
+        max-height: 400px;
+        overflow: auto;
+        padding-left: 0;
+
+        li {
+            list-style: none;
+            padding-bottom: 4px;
+            margin-bottom: 4px;
+            border-bottom: 1px dashed #dddddd;
+            padding-left: 6px;
+        }
+
+        .diff-counter {
+            margin-right: 15px;
+
+            .del {
+                color: red;
+            }
+            .add {
+                color: green;
+            }
+        }
+    }
+
     .repo-search-result {
         padding-top: 10px;
         padding-bottom: 10px;

templates/repo/diff/box.tmpl

@@ -16,8 +16,8 @@
 	</div>
 	<h4>{{.i18n.Tr "repo.diff.data_not_available"}}</h4>
 {{else}}
-	<div class="diff-detail-box diff-box ui sticky">
 	<div>
+		<div class="diff-detail-box diff-box ui sticky">
 			<i class="fa fa-retweet"></i>
 			{{.i18n.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
 			<div class="ui right">
@@ -32,17 +32,17 @@
 				{{end}}
 			</div>
 		</div>
-		<ol class="detail-files hide" id="diff-files">
+		<ol class="diff-detail-box diff-stats detail-files hide" id="diff-files">
 			{{range .Diff.Files}}
 				<li>
 					<div class="diff-counter count pull-right">
 						{{if not .IsBin}}
-							<span class="add" data-line="{{.Addition}}">{{.Addition}}</span>
+							<span class="add" data-line="{{.Addition}}">+{{.Addition}}</span>
 							<span class="bar">
 								<div class="pull-left add"></div>
 								<div class="pull-left del"></div>
 							</span>
-							<span class="del" data-line="{{.Deletion}}">{{.Deletion}}</span>
+							<span class="del" data-line="{{.Deletion}}">-{{.Deletion}}</span>
 						{{else}}
 							<span>{{$.i18n.Tr "repo.diff.bin"}}</span>
 						{{end}}
@@ -53,8 +53,6 @@
 				</li>
 			{{end}}
 		</ol>
-	</div>
-
 		{{range $i, $file := .Diff.Files}}
 			{{if $file.IsIncomplete}}
 				<div class="diff-file-box diff-box file-content">
@@ -237,4 +235,5 @@
 				});
 			</script>
 		{{end}}
+	</div>
 {{end}}