mirror of
				https://github.com/go-gitea/gitea.git
				synced 2025-10-26 12:27:06 +00:00 
			
		
		
		
	Diff box fixes (#15214)
- Fix misaligned "Show Outdated" buttons via flexbox - Add hover effect to "Show Outdated" buttons - Remove overreaching margin from selector .diff-file-box and handle cases individually. Fixes: https://github.com/go-gitea/gitea/issues/15097 Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: 6543 <6543@obermui.de> Co-authored-by: zeripath <art27@cantab.net> Co-authored-by: techknowlogick <techknowlogick@gitea.io>
This commit is contained in:
		| @@ -43,7 +43,7 @@ | |||||||
| 		</ol> | 		</ol> | ||||||
| 		{{range $i, $file := .Diff.Files}} | 		{{range $i, $file := .Diff.Files}} | ||||||
| 			{{if $file.IsIncomplete}} | 			{{if $file.IsIncomplete}} | ||||||
| 				<div class="diff-file-box diff-box file-content"> | 				<div class="diff-file-box diff-box file-content mt-3"> | ||||||
| 					<h4 class="ui top attached normal header rounded"> | 					<h4 class="ui top attached normal header rounded"> | ||||||
| 						<a role="button" class="fold-file muted mr-2"> | 						<a role="button" class="fold-file muted mr-2"> | ||||||
| 							{{svg "octicon-chevron-down" 18}} | 							{{svg "octicon-chevron-down" 18}} | ||||||
| @@ -70,7 +70,7 @@ | |||||||
| 					</h4> | 					</h4> | ||||||
| 				</div> | 				</div> | ||||||
| 			{{else}} | 			{{else}} | ||||||
| 				<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}}" id="diff-{{.Index}}"> | 				<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}} mt-3" id="diff-{{.Index}}"> | ||||||
| 					<h4 class="diff-file-header sticky-2nd-row ui top attached normal header df ac sb"> | 					<h4 class="diff-file-header sticky-2nd-row ui top attached normal header df ac sb"> | ||||||
| 						<div class="df ac"> | 						<div class="df ac"> | ||||||
| 							{{$isImage := false}} | 							{{$isImage := false}} | ||||||
| @@ -145,7 +145,7 @@ | |||||||
| 		{{end}} | 		{{end}} | ||||||
|  |  | ||||||
| 		{{if .Diff.IsIncomplete}} | 		{{if .Diff.IsIncomplete}} | ||||||
| 			<div class="diff-file-box diff-box file-content"> | 			<div class="diff-file-box diff-box file-content mt-3"> | ||||||
| 				<h4 class="ui top attached normal header"> | 				<h4 class="ui top attached normal header"> | ||||||
| 					{{$.i18n.Tr "repo.diff.too_many_files"}} | 					{{$.i18n.Tr "repo.diff.too_many_files"}} | ||||||
| 				</h4> | 				</h4> | ||||||
|   | |||||||
| @@ -3,17 +3,21 @@ | |||||||
| {{$isNotPending := (not (eq (index .comments 0).Review.Type 0))}} | {{$isNotPending := (not (eq (index .comments 0).Review.Type 0))}} | ||||||
| <div class="conversation-holder" data-path="{{(index .comments 0).TreePath}}" data-side="{{if lt (index .comments 0).Line 0}}left{{else}}right{{end}}" data-idx="{{(index .comments 0).UnsignedLine}}"> | <div class="conversation-holder" data-path="{{(index .comments 0).TreePath}}" data-side="{{if lt (index .comments 0).Line 0}}left{{else}}right{{end}}" data-idx="{{(index .comments 0).UnsignedLine}}"> | ||||||
| 	{{if $resolved}} | 	{{if $resolved}} | ||||||
| 		<div class="ui attached header resolved-placeholder"> | 		<div class="ui attached header resolved-placeholder df ac sb"> | ||||||
| 			<span class="ui grey text left"><b>{{$resolveDoer.Name}}</b> {{$.i18n.Tr "repo.issues.review.resolved_by"}}</span> | 			<div class="ui grey text"> | ||||||
| 			<button id="show-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="ui tiny right labeled button show-outdated"> | 				<b>{{$resolveDoer.Name}}</b> {{$.i18n.Tr "repo.issues.review.resolved_by"}} | ||||||
| 				{{svg "octicon-unfold"}} | 			</div> | ||||||
|  | 			<div> | ||||||
|  | 				<button id="show-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="ui tiny right labeled button show-outdated df ac"> | ||||||
|  | 					{{svg "octicon-unfold" 16 "mr-3"}} | ||||||
| 					{{$.i18n.Tr "repo.issues.review.show_resolved"}} | 					{{$.i18n.Tr "repo.issues.review.show_resolved"}} | ||||||
| 				</button> | 				</button> | ||||||
| 			<button id="hide-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="hide ui tiny right labeled button hide-outdated"> | 				<button id="hide-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="hide ui tiny right labeled button hide-outdated df ac"> | ||||||
| 				{{svg "octicon-fold"}} | 					{{svg "octicon-fold" 16 "mr-3"}} | ||||||
| 					{{$.i18n.Tr "repo.issues.review.hide_resolved"}} | 					{{$.i18n.Tr "repo.issues.review.hide_resolved"}} | ||||||
| 				</button> | 				</button> | ||||||
| 			</div> | 			</div> | ||||||
|  | 		</div> | ||||||
| 	{{end}} | 	{{end}} | ||||||
| 	<div id="code-comments-{{(index  .comments 0).ID}}" class="field comment-code-cloud {{if $resolved}}hide{{end}}"> | 	<div id="code-comments-{{(index  .comments 0).ID}}" class="field comment-code-cloud {{if $resolved}}hide{{end}}"> | ||||||
| 		<div class="comment-list"> | 		<div class="comment-list"> | ||||||
|   | |||||||
| @@ -459,22 +459,31 @@ | |||||||
| 				{{ range $filename, $lines := .Review.CodeComments}} | 				{{ range $filename, $lines := .Review.CodeComments}} | ||||||
| 					{{range $line, $comms := $lines}} | 					{{range $line, $comms := $lines}} | ||||||
| 							<div class="ui segments"> | 							<div class="ui segments"> | ||||||
| 								<div class="ui segment py-3"> | 								<div class="ui segment py-3 df ac sb"> | ||||||
| 									{{$invalid := (index $comms 0).Invalidated}} | 									{{$invalid := (index $comms 0).Invalidated}} | ||||||
| 									{{$resolved := (index $comms 0).IsResolved}} | 									{{$resolved := (index $comms 0).IsResolved}} | ||||||
| 									{{$resolveDoer := (index $comms 0).ResolveDoer}} | 									{{$resolveDoer := (index $comms 0).ResolveDoer}} | ||||||
| 									{{$isNotPending := (not (eq (index $comms 0).Review.Type 0))}} | 									{{$isNotPending := (not (eq (index $comms 0).Review.Type 0))}} | ||||||
|  | 									<div class="df ac"> | ||||||
|  | 										<a href="{{(index $comms 0).CodeCommentURL}}" class="file-comment ml-3">{{$filename}}</a> | ||||||
|  | 										{{if $invalid }} | ||||||
|  | 											<span class="ui label basic small ml-3"> | ||||||
|  | 												{{$.i18n.Tr "repo.issues.review.outdated"}} | ||||||
|  | 											</span> | ||||||
|  | 										{{end}} | ||||||
|  | 									</div> | ||||||
|  | 									<div> | ||||||
| 										{{if or $invalid $resolved}} | 										{{if or $invalid $resolved}} | ||||||
| 									<button id="show-outdated-{{(index $comms 0).ID}}" data-comment="{{(index $comms 0).ID}}" class="{{if not $resolved}}hide {{end}}ui compact right labeled button show-outdated"> | 											<button id="show-outdated-{{(index $comms 0).ID}}" data-comment="{{(index $comms 0).ID}}" class="{{if not $resolved}}hide {{end}}ui compact right labeled button show-outdated df ac"> | ||||||
| 										{{svg "octicon-unfold"}} | 												{{svg "octicon-unfold" 16 "mr-3"}} | ||||||
| 												{{if $resolved}} | 												{{if $resolved}} | ||||||
| 													{{$.i18n.Tr "repo.issues.review.show_resolved"}} | 													{{$.i18n.Tr "repo.issues.review.show_resolved"}} | ||||||
| 												{{else}} | 												{{else}} | ||||||
| 													{{$.i18n.Tr "repo.issues.review.show_outdated"}} | 													{{$.i18n.Tr "repo.issues.review.show_outdated"}} | ||||||
| 												{{end}} | 												{{end}} | ||||||
| 											</button> | 											</button> | ||||||
| 									<button id="hide-outdated-{{(index $comms 0).ID}}" data-comment="{{(index $comms 0).ID}}" class="{{if $resolved}}hide {{end}}ui compact right labeled button hide-outdated"> | 											<button id="hide-outdated-{{(index $comms 0).ID}}" data-comment="{{(index $comms 0).ID}}" class="{{if $resolved}}hide {{end}}ui compact right labeled button hide-outdated df ac"> | ||||||
| 										{{svg "octicon-fold"}} | 												{{svg "octicon-fold" 16 "mr-3"}} | ||||||
| 												{{if $resolved}} | 												{{if $resolved}} | ||||||
| 													{{$.i18n.Tr "repo.issues.review.hide_resolved"}} | 													{{$.i18n.Tr "repo.issues.review.hide_resolved"}} | ||||||
| 												{{else}} | 												{{else}} | ||||||
| @@ -482,12 +491,7 @@ | |||||||
| 												{{end}} | 												{{end}} | ||||||
| 											</button> | 											</button> | ||||||
| 										{{end}} | 										{{end}} | ||||||
| 								<a href="{{(index $comms 0).CodeCommentURL}}" class="file-comment">{{$filename}}</a> | 									</div> | ||||||
| 								{{if $invalid }} |  | ||||||
| 									<span class="ui label basic small yellow"> |  | ||||||
| 										{{$.i18n.Tr "repo.issues.review.outdated"}} |  | ||||||
| 									</span> |  | ||||||
| 								{{end}} |  | ||||||
| 								</div> | 								</div> | ||||||
| 								{{$diff := (CommentMustAsDiff (index $comms 0))}} | 								{{$diff := (CommentMustAsDiff (index $comms 0))}} | ||||||
| 								{{if $diff}} | 								{{if $diff}} | ||||||
|   | |||||||
| @@ -1107,15 +1107,6 @@ | |||||||
|  |  | ||||||
|         .segments { |         .segments { | ||||||
|           box-shadow: none; |           box-shadow: none; | ||||||
|  |  | ||||||
|           .show-outdated, |  | ||||||
|           .hide-outdated { |  | ||||||
|             display: block; |  | ||||||
|           } |  | ||||||
|  |  | ||||||
|           .label { |  | ||||||
|             margin-left: 6px; |  | ||||||
|           } |  | ||||||
|         } |         } | ||||||
|       } |       } | ||||||
|     } |     } | ||||||
| @@ -1635,9 +1626,6 @@ | |||||||
|   } |   } | ||||||
|  |  | ||||||
|   .diff-file-box { |   .diff-file-box { | ||||||
|     margin-top: 1rem; |  | ||||||
|     margin-bottom: 1rem; |  | ||||||
|  |  | ||||||
|     .header { |     .header { | ||||||
|       background-color: var(--color-box-header); |       background-color: var(--color-box-header); | ||||||
|     } |     } | ||||||
|   | |||||||
| @@ -35,11 +35,15 @@ | |||||||
|   &:not(.top) { |   &:not(.top) { | ||||||
|     margin-bottom: .5em; |     margin-bottom: .5em; | ||||||
|   } |   } | ||||||
|  | } | ||||||
|  |  | ||||||
|   .show-outdated, | .show-outdated, | ||||||
|   .hide-outdated { | .hide-outdated { | ||||||
|     display: block; |   display: block !important; | ||||||
|     margin-left: auto; |   user-select: none !important; | ||||||
|  |  | ||||||
|  |   &:hover { | ||||||
|  |     text-decoration: underline; | ||||||
|   } |   } | ||||||
| } | } | ||||||
|  |  | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user
	 silverwind
					silverwind