diff options
| author | wxiaoguang <wxiaoguang@gmail.com> | 2023-08-24 20:13:23 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-08-24 12:13:23 +0000 |
| commit | 09faf43ef822ca4dbdfb2a2714ad43a782acf6e8 (patch) | |
| tree | 3ed8574c4d0437d76fee67c2ac16cc1e011e694f /templates/repo/diff | |
| parent | 4de224469774a502f560cbf62060a03016c97167 (diff) | |
| download | gitea-09faf43ef822ca4dbdfb2a2714ad43a782acf6e8.tar.gz gitea-09faf43ef822ca4dbdfb2a2714ad43a782acf6e8.zip | |
Improve Image Diff UI (#26696)
1. Use `is-loading` instead of `ui loader`
2. Introduce class name `image-diff-tabs`, instead of searching `gt-hidden`, which is fragile
3. Align the UI elements, see the screenshots.
Diffstat (limited to 'templates/repo/diff')
| -rw-r--r-- | templates/repo/diff/image_diff.tmpl | 7 |
1 files changed, 2 insertions, 5 deletions
diff --git a/templates/repo/diff/image_diff.tmpl b/templates/repo/diff/image_diff.tmpl index ec14ef9b1a..bd461d2800 100644 --- a/templates/repo/diff/image_diff.tmpl +++ b/templates/repo/diff/image_diff.tmpl @@ -11,7 +11,7 @@ {{end}} </div> </div> - <div class="gt-hidden"> + <div class="image-diff-tabs is-loading"> <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}} @@ -63,10 +63,8 @@ </div> <div class="ui bottom attached tab image-diff-container" data-tab="diff-overlay-{{.file.Index}}"> <div class="diff-overlay"> + <input type="range" min="0" max="100" value="50"> <div class="overlay-frame"> - <div class="ui centered"> - <input type="range" min="0" max="100" value="50"> - </div> <span class="before-container"><img class="image-before"></span> <span class="after-container"><img class="image-after"></span> </div> @@ -74,7 +72,6 @@ </div> {{end}} </div> - <div class="ui active centered inline loader gt-mb-4"></div> </div> </td> </tr> |