aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorzeripath2021-10-21 20:38:29 +0100
committerGitHub2021-10-21 20:38:29 +0100
commitcae8c63517d310b0f58820b4713a24e245b73aff (patch)
treeb14b862dca58a421c7590d2ab91e2d7b154e84c1
parent8ace5c1161c1d04e4698e2d9f98c6d8c2f303414 (diff)
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>
-rw-r--r--templates/repo/diff/image_diff.tmpl12
-rw-r--r--web_src/less/features/imagediff.less1
2 files changed, 6 insertions, 7 deletions
diff --git a/templates/repo/diff/image_diff.tmpl b/templates/repo/diff/image_diff.tmpl
index 33fa8c9e2..3d100ac99 100644
--- 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 f38ea98d7..55a67c6ec 100644
--- 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;