Nulo/gitea
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Activity

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

Browse source 
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:
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
Show stats Download patch file Download diff file Expand all files Collapse all files

12
templates/repo/diff/image_diff.tmpl
View file

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

1
web_src/less/features/imagediff.less
View file

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