vitrine dont wrap

2 files changed, 25 insertions, 7 deletions

diff --git a/animism-align/frontend/app/views/viewer/modals/modals.css b/animism-align/frontend/app/views/viewer/modals/modals.css
index be32184..c3ec675 100644
--- a/animism-align/frontend/app/views/viewer/modals/modals.css
+++ b/animism-align/frontend/app/views/viewer/modals/modals.css
@@ -80,6 +80,11 @@
 .vitrine-nav:hover {
   transform: translateZ(0) translateY(0);
 }
+.vitrine-nav.nav-close,
+.vitrine-nav.nav-close:hover {
+  transition: 0;
+  transform: translateZ(0) translateY(0);
+}
 .vitrine-nav.prev {
   left: 0;
 }
diff --git a/animism-align/frontend/app/views/viewer/modals/modals.vitrine.js b/animism-align/frontend/app/views/viewer/modals/modals.vitrine.js
index 070fafd..5b78295 100644
--- a/animism-align/frontend/app/views/viewer/modals/modals.vitrine.js
+++ b/animism-align/frontend/app/views/viewer/modals/modals.vitrine.js
@@ -45,19 +45,32 @@ class VitrineModal extends Component {
 }
 
 const VitrineNavigation = ({ media, index, direction }) => {
+  let id, thumbnail
   const isPrev = direction === -1
-  const className = isPrev ? 'vitrine-nav prev' : 'vitrine-nav next'
-  const targetIndex = mod(index + direction, media.settings.image_order.length)
-  const id = media.settings.image_order[targetIndex]
-  const thumbnail = media.settings.thumbnail_lookup[id]
+  let className = isPrev ? 'vitrine-nav prev' : 'vitrine-nav next'
+  // const targetIndex = mod(index + direction, media.settings.image_order.length)
+  const targetIndex = index + direction
+  const shouldClose = (targetIndex < 0) || (targetIndex === media.settings.image_order.length)
+  if (shouldClose) {
+    className += ' nav-close'
+  } else {
+    id = media.settings.image_order[targetIndex]
+    thumbnail = media.settings.thumbnail_lookup[id]
+  }
   return (
-    <div className={className} onClick={() => actions.viewer.setVitrineIndex(targetIndex)}>
+    <div className={className} onClick={() => {
+      if (shouldClose) {
+        actions.viewer.closeVitrineModal()
+      } else {
+        actions.viewer.setVitrineIndex(targetIndex)
+      }
+    }}>
       <div className='vitrine-nav-content'>
         {isPrev && <Arrow type='left'/>}
-        {isPrev ? 'Previous' : 'Next'}
+        {shouldClose ? 'Close' : isPrev ? 'Previous' : 'Next'}
         {!isPrev && <Arrow type='right'/>}
       </div>
-      <div className='vitrine-nav-thumbnail' style={{ backgroundImage: 'url(' + thumbnail.url + ')' }} />
+      {!shouldClose && <div className='vitrine-nav-thumbnail' style={{ backgroundImage: 'url(' + thumbnail.url + ')' }} />}
     </div>
   )
 }