Fix SVG side by side comparison link () ()

Backport 

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>
This commit is contained in:
zeripath 2021-10-21 20:38:29 +01:00 committed by GitHub
parent 8ace5c1161
commit cae8c63517
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 7 deletions
templates/repo/diff
web_src/less/features

View file

@ -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">

View file

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