Fix SVG side by side comparison link (#17375)

* Remove swipe-bar z-index

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

Signed-off-by: Mario Lubenka <mario.lubenka@googlemail.com>
* Unique names for image tabs in pull request

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

Signed-off-by: Mario Lubenka <mario.lubenka@googlemail.com>
Co-authored-by: Lauris BH <lauris@nix.lv>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

diff --git a/templates/repo/diff/image_diff.tmpl b/templates/repo/diff/image_diff.tmpl
index 33fa8c9e2c40f4d3b3bbc1e22550fe5068ae4015..3d100ac9920ca31fbebc169126c823bcf60967a2 100644 (file)
--- a/templates/repo/diff/image_diff.tmpl
+++ b/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">

diff --git a/web_src/less/features/imagediff.less b/web_src/less/features/imagediff.less
index f38ea98d7de17cbc9e4e9e89adb5552dc399c4da..55a67c6ec85b0c5b91c83ac9e6b31c8709120131 100644 (file)
--- a/web_src/less/features/imagediff.less
+++ b/web_src/less/features/imagediff.less
@@ -54,7 +54,6 @@
       }
 
       .swipe-bar {
-        z-index: 100;
         position: absolute;
         height: 100%;
         top: 0;