diff --git a/ui/v2.5/src/components/Changelog/versions/v080.md b/ui/v2.5/src/components/Changelog/versions/v080.md index 7ddc98741..5811aa850 100644 --- a/ui/v2.5/src/components/Changelog/versions/v080.md +++ b/ui/v2.5/src/components/Changelog/versions/v080.md @@ -12,6 +12,7 @@ * Added [DLNA server](/settings?tab=dlna). ([#1364](https://github.com/stashapp/stash/pull/1364)) ### 🎨 Improvements +* Allow navigation to previous/next image in carousel by clicking left/right side of image. ([#1516](https://github.com/stashapp/stash/pull/1516)) * Include `Host` in input to plugins. ([#1514](https://github.com/stashapp/stash/pull/1514)) * Added internationalisation for all UI pages and added zh-TW language option. ([#1471](https://github.com/stashapp/stash/pull/1471)) * Add option to disable audio for generated previews. ([#1454](https://github.com/stashapp/stash/pull/1454)) diff --git a/ui/v2.5/src/hooks/Lightbox/Lightbox.tsx b/ui/v2.5/src/hooks/Lightbox/Lightbox.tsx index 0ee1a342a..4d2c7d81a 100644 --- a/ui/v2.5/src/hooks/Lightbox/Lightbox.tsx +++ b/ui/v2.5/src/hooks/Lightbox/Lightbox.tsx @@ -31,6 +31,7 @@ const CLASSNAME_INSTANT = `${CLASSNAME_CAROUSEL}-instant`; const CLASSNAME_IMAGE = `${CLASSNAME_CAROUSEL}-image`; const CLASSNAME_NAVBUTTON = `${CLASSNAME}-navbutton`; const CLASSNAME_NAV = `${CLASSNAME}-nav`; +const CLASSNAME_NAVZONE = `${CLASSNAME}-navzone`; const CLASSNAME_NAVIMAGE = `${CLASSNAME_NAV}-image`; const CLASSNAME_NAVSELECTED = `${CLASSNAME_NAV}-selected`; @@ -183,8 +184,8 @@ export const LightboxComponent: React.FC = ({ }, [isFullscreen, hide]); const handleClose = (e: React.MouseEvent) => { - const { nodeName } = e.target as Node; - if (nodeName === "DIV" || nodeName === "PICTURE") close(); + const { className } = e.target as Element; + if (className === CLASSNAME_IMAGE) close(); }; const handleLeft = useCallback( @@ -481,6 +482,18 @@ export const LightboxComponent: React.FC = ({ media="(min-width: 800px)" /> +
+
+
+
))} diff --git a/ui/v2.5/src/hooks/Lightbox/lightbox.scss b/ui/v2.5/src/hooks/Lightbox/lightbox.scss index fa83980d0..78f6c6b5e 100644 --- a/ui/v2.5/src/hooks/Lightbox/lightbox.scss +++ b/ui/v2.5/src/hooks/Lightbox/lightbox.scss @@ -106,6 +106,14 @@ display: flex; height: 100%; margin: auto; + position: relative; + + > div { + display: flex; + height: 100%; + position: absolute; + width: 100%; + } } img { @@ -117,6 +125,11 @@ } } + &-navzone { + cursor: pointer; + width: 50%; + } + &-navbutton { z-index: 1045;