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>
This commit is contained in:
parent
8ace5c1161
commit
cae8c63517
@ -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">
|
||||
|
@ -54,7 +54,6 @@
|
||||
}
|
||||
|
||||
.swipe-bar {
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
|
Loading…
x
Reference in New Issue
Block a user