mirror of
				https://github.com/go-gitea/gitea
				synced 2025-10-31 11:28:24 +00:00 
			
		
		
		
	Fix code view (diff) broken layout (#23096)
Close #22911 I think it's ready for review now, feel free to test it, welcome to help to improve. ### Before  ### After 
This commit is contained in:
		| @@ -19,14 +19,14 @@ | ||||
| 					</a> | ||||
| 				{{end}} | ||||
| 			</td> | ||||
| 			<td colspan="5" class="lines-code lines-code-old ">{{$inlineDiff := $.section.GetComputedInlineDiffFor $line $.locale}}{{/* | ||||
| 			<td colspan="7" class="lines-code lines-code-old ">{{$inlineDiff := $.section.GetComputedInlineDiffFor $line $.locale}}{{/* | ||||
| 				*/}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.locale}}</td> | ||||
| 		{{else}} | ||||
| 			{{$inlineDiff := $.section.GetComputedInlineDiffFor $line $.locale}} | ||||
| 			<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}"><span rel="{{if $line.LeftIdx}}diff-{{$.FileNameHash}}L{{$line.LeftIdx}}{{end}}"></span></td> | ||||
| 			<td class="blob-excerpt lines-escape lines-escape-old">{{if and $line.LeftIdx $inlineDiff.EscapeStatus.Escaped}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></a>{{end}}</td> | ||||
| 			<td class="blob-excerpt lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="gt-mono" data-type-marker=""></span>{{end}}</td> | ||||
| 			<td class="blob-excerpt lines-code lines-code-old halfwidth">{{/* | ||||
| 			<td class="blob-excerpt lines-code lines-code-old">{{/* | ||||
| 				*/}}{{if $line.LeftIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.locale}}{{else}}{{/* | ||||
| 					*/}}<code class="code-inner"></code>{{/* | ||||
| 				*/}}{{end}}{{/* | ||||
| @@ -34,7 +34,7 @@ | ||||
| 			<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{$.FileNameHash}}R{{$line.RightIdx}}{{end}}"></span></td> | ||||
| 			<td class="blob-excerpt lines-escape lines-escape-new">{{if and $line.RightIdx $inlineDiff.EscapeStatus.Escaped}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></a>{{end}}</td> | ||||
| 			<td class="blob-excerpt lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="gt-mono" data-type-marker=""></span>{{end}}</td> | ||||
| 			<td class="blob-excerpt lines-code lines-code-new halfwidth">{{/* | ||||
| 			<td class="blob-excerpt lines-code lines-code-new">{{/* | ||||
| 				*/}}{{if $line.RightIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.locale}}{{else}}{{/* | ||||
| 					*/}}<code class="code-inner"></code>{{/* | ||||
| 				*/}}{{end}}{{/* | ||||
|   | ||||
| @@ -1,4 +1,14 @@ | ||||
| {{$file := .file}} | ||||
| <colgroup> | ||||
| 	<col width="50"> | ||||
| 	<col width="10"> | ||||
| 	<col width="10"> | ||||
| 	<col> | ||||
| 	<col width="50"> | ||||
| 	<col width="10"> | ||||
| 	<col width="10"> | ||||
| 	<col> | ||||
| </colgroup> | ||||
| {{range $j, $section := $file.Sections}} | ||||
| 	{{range $k, $line := $section.Lines}} | ||||
| 		{{$hasmatch := ne $line.Match -1}} | ||||
| @@ -33,7 +43,7 @@ | ||||
| 					<td class="lines-num lines-num-old del-code" data-line-num="{{$line.LeftIdx}}"><span rel="diff-{{$file.NameHash}}L{{$line.LeftIdx}}"></span></td> | ||||
| 					<td class="lines-escape del-code lines-escape-old">{{if $line.LeftIdx}}{{if $leftDiff.EscapeStatus.Escaped}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $leftDiff "locale" $.root.locale}}"></a>{{end}}{{end}}</td> | ||||
| 					<td class="lines-type-marker lines-type-marker-old del-code"><span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td> | ||||
| 					<td class="lines-code lines-code-old halfwidth del-code">{{/* | ||||
| 					<td class="lines-code lines-code-old del-code">{{/* | ||||
| 						*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/* | ||||
| 							*/}}<a class="ui primary button add-code-comment add-code-comment-left{{if (not $line.CanComment)}} invisible{{end}}" data-side="left" data-idx="{{$line.LeftIdx}}">{{/* | ||||
| 								*/}}{{svg "octicon-plus"}}{{/* | ||||
| @@ -48,7 +58,7 @@ | ||||
| 					<td class="lines-num lines-num-new add-code" data-line-num="{{if $match.RightIdx}}{{$match.RightIdx}}{{end}}"><span rel="{{if $match.RightIdx}}diff-{{$file.NameHash}}R{{$match.RightIdx}}{{end}}"></span></td> | ||||
| 					<td class="lines-escape add-code lines-escape-new">{{if $match.RightIdx}}{{if $rightDiff.EscapeStatus.Escaped}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $rightDiff "locale" $.root.locale}}"></a>{{end}}{{end}}</td> | ||||
| 					<td class="lines-type-marker lines-type-marker-new add-code">{{if $match.RightIdx}}<span class="gt-mono" data-type-marker="{{$match.GetLineTypeMarker}}"></span>{{end}}</td> | ||||
| 					<td class="lines-code lines-code-new halfwidth add-code">{{/* | ||||
| 					<td class="lines-code lines-code-new add-code">{{/* | ||||
| 						*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/* | ||||
| 							*/}}<a class="ui primary button add-code-comment add-code-comment-right{{if (not $match.CanComment)}} invisible{{end}}" data-side="right" data-idx="{{$match.RightIdx}}">{{/* | ||||
| 								*/}}{{svg "octicon-plus"}}{{/* | ||||
| @@ -65,7 +75,7 @@ | ||||
| 					<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}"><span rel="{{if $line.LeftIdx}}diff-{{$file.NameHash}}L{{$line.LeftIdx}}{{end}}"></span></td> | ||||
| 					<td class="lines-escape lines-escape-old">{{if $line.LeftIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></a>{{end}}{{end}}</td> | ||||
| 					<td class="lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td> | ||||
| 					<td class="lines-code lines-code-old halfwidth">{{/* | ||||
| 					<td class="lines-code lines-code-old">{{/* | ||||
| 						*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 2))}}{{/* | ||||
| 							*/}}<a class="ui primary button add-code-comment add-code-comment-left{{if (not $line.CanComment)}} invisible{{end}}" data-side="left" data-idx="{{$line.LeftIdx}}">{{/* | ||||
| 								*/}}{{svg "octicon-plus"}}{{/* | ||||
| @@ -80,7 +90,7 @@ | ||||
| 					<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{$file.NameHash}}R{{$line.RightIdx}}{{end}}"></span></td> | ||||
| 					<td class="lines-escape lines-escape-new">{{if $line.RightIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></a>{{end}}{{end}}</td> | ||||
| 					<td class="lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td> | ||||
| 					<td class="lines-code lines-code-new halfwidth">{{/* | ||||
| 					<td class="lines-code lines-code-new">{{/* | ||||
| 						*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 3))}}{{/* | ||||
| 							*/}}<a class="ui primary button add-code-comment add-code-comment-right{{if (not $line.CanComment)}} invisible{{end}}" data-side="right" data-idx="{{$line.RightIdx}}">{{/* | ||||
| 								*/}}{{svg "octicon-plus"}}{{/* | ||||
| @@ -98,9 +108,6 @@ | ||||
| 				{{$match := index $section.Lines $line.Match}} | ||||
| 				{{if or (gt (len $line.Comments) 0) (gt (len $match.Comments) 0)}} | ||||
| 					<tr class="add-comment" data-line-type="{{DiffLineTypeToStr .GetType}}"> | ||||
| 						<td class="lines-num"></td> | ||||
| 						<td class="lines-escape"></td> | ||||
| 						<td class="lines-type-marker"></td> | ||||
| 						<td class="add-comment-left" colspan="4"> | ||||
| 							{{if gt (len $line.Comments) 0}} | ||||
| 								{{if eq $line.GetCommentSide "previous"}} | ||||
| @@ -113,9 +120,6 @@ | ||||
| 								{{end}} | ||||
| 							{{end}} | ||||
| 						</td> | ||||
| 						<td class="lines-num"></td> | ||||
| 						<td class="lines-escape"></td> | ||||
| 						<td class="lines-type-marker"></td> | ||||
| 						<td class="add-comment-right" colspan="4"> | ||||
| 							{{if eq $line.GetCommentSide "proposed"}} | ||||
| 								{{template "repo/diff/conversation" mergeinto $.root "comments" $line.Comments}} | ||||
| @@ -130,9 +134,6 @@ | ||||
| 				{{end}} | ||||
| 			{{else if gt (len $line.Comments) 0}} | ||||
| 				<tr class="add-comment" data-line-type="{{DiffLineTypeToStr .GetType}}"> | ||||
| 					<td class="lines-num"></td> | ||||
| 					<td class="lines-escape"></td> | ||||
| 					<td class="lines-type-marker"></td> | ||||
| 					<td class="add-comment-left" colspan="4"> | ||||
| 						{{if gt (len $line.Comments) 0}} | ||||
| 							{{if eq $line.GetCommentSide "previous"}} | ||||
| @@ -140,9 +141,6 @@ | ||||
| 							{{end}} | ||||
| 						{{end}} | ||||
| 					</td> | ||||
| 					<td class="lines-num"></td> | ||||
| 					<td class="lines-escape"></td> | ||||
| 					<td class="lines-type-marker"></td> | ||||
| 					<td class="add-comment-right" colspan="4"> | ||||
| 						{{if eq $line.GetCommentSide "proposed"}} | ||||
| 							{{template "repo/diff/conversation" mergeinto $.root "comments" $line.Comments}} | ||||
|   | ||||
| @@ -1,4 +1,11 @@ | ||||
| {{$file := .file}} | ||||
| <colgroup> | ||||
| 	<col width="50"> | ||||
| 	<col width="50"> | ||||
| 	<col width="10"> | ||||
| 	<col width="10"> | ||||
| 	<col> | ||||
| </colgroup> | ||||
| {{range $j, $section := $file.Sections}} | ||||
| 	{{range $k, $line := $section.Lines}} | ||||
| 		<tr class="{{DiffLineTypeToStr .GetType}}-code nl-{{$k}} ol-{{$k}}" data-line-type="{{DiffLineTypeToStr .GetType}}"> | ||||
| @@ -49,7 +56,6 @@ | ||||
| 		</tr> | ||||
| 		{{if gt (len $line.Comments) 0}} | ||||
| 			<tr class="add-comment" data-line-type="{{DiffLineTypeToStr .GetType}}"> | ||||
| 				<td colspan="3" class="lines-num"></td> | ||||
| 				<td class="add-comment-left add-comment-right" colspan="5"> | ||||
| 					{{template "repo/diff/conversation" mergeinto $.root "comments" $line.Comments}} | ||||
| 				</td> | ||||
|   | ||||
| @@ -48,7 +48,7 @@ | ||||
| 									<td><strong>{{.locale.Tr "repo.file_too_large"}}</strong></td> | ||||
| 								{{else}} | ||||
| 									<td class="lines-num">{{.LineNums}}</td> | ||||
| 									<td class="lines-code"><pre><code class="{{.HighlightClass}}"><ol class="linenums">{{.FileContent}}</ol></code></pre></td> | ||||
| 									<td class="lines-code"><pre><code class="{{.HighlightClass}}"><ol>{{.FileContent}}</ol></code></pre></td> | ||||
| 								{{end}} | ||||
| 								</tr> | ||||
| 							</tbody> | ||||
|   | ||||
| @@ -1806,8 +1806,14 @@ | ||||
|   padding: 0 !important; | ||||
| } | ||||
|  | ||||
| .repository .diff-file-box .code-diff tbody tr td.halfwidth { | ||||
|   width: 49%; /* halfwidth is used in split view - and in that case, 1% of each */ | ||||
| .repository .diff-file-box .code-diff table { | ||||
|   table-layout: fixed; | ||||
| } | ||||
|  | ||||
| .repository .diff-file-box .code-diff tbody tr td.lines-num, | ||||
| .repository .diff-file-box .code-diff tbody tr td.lines-escape, | ||||
| .repository .diff-file-box .code-diff tbody tr td.lines-type-marker { | ||||
|   white-space: nowrap; | ||||
| } | ||||
|  | ||||
| .repository .diff-file-box .code-diff tbody tr td.center { | ||||
|   | ||||
| @@ -53,12 +53,6 @@ | ||||
|   margin-bottom: 0.5em; | ||||
| } | ||||
|  | ||||
| .add-comment .lines-num, | ||||
| .add-comment .lines-escape, | ||||
| .add-comment .lines-type-marker { | ||||
|   display: none; | ||||
| } | ||||
|  | ||||
| .show-outdated:hover, | ||||
| .hide-outdated:hover { | ||||
|   text-decoration: underline; | ||||
|   | ||||
| @@ -504,18 +504,9 @@ export function initRepoPullRequestReview() { | ||||
|       ntr = $(` | ||||
|         <tr class="add-comment" data-line-type="${lineType}"> | ||||
|           ${isSplit ? ` | ||||
|             <td class="lines-num"></td> | ||||
|             <td class="lines-escape"></td> | ||||
|             <td class="lines-type-marker"></td> | ||||
|             <td class="add-comment-left" colspan="4"></td> | ||||
|             <td class="lines-num"></td> | ||||
|             <td class="lines-escape"></td> | ||||
|             <td class="lines-type-marker"></td> | ||||
|             <td class="add-comment-right" colspan="4"></td> | ||||
|           ` : ` | ||||
|             <td class="lines-num"></td> | ||||
|             <td class="lines-num"></td> | ||||
|             <td class="lines-escape"></td> | ||||
|             <td class="add-comment-left add-comment-right" colspan="5"></td> | ||||
|           `} | ||||
|         </tr>`); | ||||
|   | ||||
		Reference in New Issue
	
	Block a user