Fix SVG side by side comparison link (#17375) (#17391)

Backport #17375

Define unique names for image tabs in pull requests, in order to toggle tabs correctly when multiple are displayed on one page.

Fixes position of swipe-bar so it does not overlay other UI components when scrolling.

Signed-off-by: Mario Lubenka <mario.lubenka@googlemail.com>

Co-authored-by: Mario Lubenka <mario.lubenka@googlemail.com>

Author: zeripath

templates/repo/diff/image_diff.tmpl

@@ -6,15 +6,15 @@
 		<div class="image-diff" data-path-before="{{$imagePathOld}}" data-path-after="{{$imagePathNew}}">
 			<div class="ui secondary pointing tabular top attached borderless menu stackable new-menu">
 				<div class="new-menu-inner">
-					<a class="item active" data-tab="diff-side-by-side">{{.root.i18n.Tr "repo.diff.image.side_by_side"}}</a>
+					<a class="item active" data-tab="diff-side-by-side-{{ .file.Index }}">{{.root.i18n.Tr "repo.diff.image.side_by_side"}}</a>
 					{{if and .blobBase .blobHead}}
-					<a class="item" data-tab="diff-swipe">{{.root.i18n.Tr "repo.diff.image.swipe"}}</a>
-					<a class="item" data-tab="diff-overlay">{{.root.i18n.Tr "repo.diff.image.overlay"}}</a>
+					<a class="item" data-tab="diff-swipe-{{ .file.Index }}">{{.root.i18n.Tr "repo.diff.image.swipe"}}</a>
+					<a class="item" data-tab="diff-overlay-{{ .file.Index }}">{{.root.i18n.Tr "repo.diff.image.overlay"}}</a>
 					{{end}}
 				</div>
 			</div>
 			<div class="hide">
-				<div class="ui bottom attached tab image-diff-container active" data-tab="diff-side-by-side">
+				<div class="ui bottom attached tab image-diff-container active" data-tab="diff-side-by-side-{{ .file.Index }}">
 					<div class="diff-side-by-side">
 						{{if .blobBase }}
 						<span class="side">
@@ -49,7 +49,7 @@
 					</div>
 				</div>
 				{{if and .blobBase .blobHead}}
-				<div class="ui bottom attached tab image-diff-container" data-tab="diff-swipe">
+				<div class="ui bottom attached tab image-diff-container" data-tab="diff-swipe-{{ .file.Index }}">
 					<div class="diff-swipe">
 						<div class="swipe-frame">
 							<span class="before-container"><img class="image-before" /></span>
@@ -63,7 +63,7 @@
 						</div>
 					</div>
 				</div>
-				<div class="ui bottom attached tab image-diff-container" data-tab="diff-overlay">
+				<div class="ui bottom attached tab image-diff-container" data-tab="diff-overlay-{{ .file.Index }}">
 					<div class="diff-overlay">
 						<div class="overlay-frame">
 							<div class="ui centered">

web_src/less/features/imagediff.less

@@ -54,7 +54,6 @@
       }
 
       .swipe-bar {
-        z-index: 100;
         position: absolute;
         height: 100%;
         top: 0;