Ensure that diff stats can scroll independently of the diff (#8581)
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
This commit is contained in:
		
							parent
							
								
									b539a6e6e3
								
							
						
					
					
						commit
						b1c1e1549b
					
				
					 3 changed files with 206 additions and 191 deletions
				
			
		|  | @ -667,8 +667,6 @@ i.icon.centerlock{top:1.5em} | |||
| .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} | ||||
|  | @ -705,6 +703,11 @@ i.icon.centerlock{top:1.5em} | |||
| .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} | ||||
|  |  | |||
|  | @ -1246,21 +1246,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; | ||||
|  | @ -1475,6 +1460,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; | ||||
|  |  | |||
|  | @ -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}} | ||||
|  |  | |||
		Loading…
	
		Reference in a new issue