if only one item in gallery, remove navigation (pytest-dev#705)

Co-authored-by: Viktor Gustafsson <[email protected]>
bwardrop · Aug 13, 2023 · 8b7eca5 · 8b7eca5
1 parent a5e92c2
commit 8b7eca5
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/src/layout/css/style.scss b/src/layout/css/style.scss
@@ -156,6 +156,9 @@ div.media {
   overflow: hidden;
   height: 200px;
 }
+.media-container--fullscreen {
+  grid-template-columns: 0px auto 0px;
+}
 .media-container__nav--right,
 .media-container__nav--left {
   text-align: center;

diff --git a/src/pytest_html/resources/style.css b/src/pytest_html/resources/style.css
diff --git a/src/pytest_html/scripts/mediaviewer.js b/src/pytest_html/scripts/mediaviewer.js
@@ -31,6 +31,7 @@ const setup = (resultBody, assets) => {
     }
 
     const mediaViewer = new MediaViewer(assets)
+    const container = resultBody.querySelector('.media-container')
     const leftArrow = resultBody.querySelector('.media-container__nav--left')
     const rightArrow = resultBody.querySelector('.media-container__nav--right')
     const mediaName = resultBody.querySelector('.media__name')
@@ -68,9 +69,12 @@ const setup = (resultBody, assets) => {
     const openImg = () => {
         window.open(mediaViewer.activeFile.path, '_blank')
     }
-
-    leftArrow.addEventListener('click', moveLeft)
-    rightArrow.addEventListener('click', doRight)
+    if (assets.length === 1) {
+        container.classList.add('media-container--fullscreen')
+    } else {
+        leftArrow.addEventListener('click', moveLeft)
+        rightArrow.addEventListener('click', doRight)
+    }
     imageEl.addEventListener('click', openImg)
 }