style that mobile close button

1 files changed, 19 insertions, 13 deletions

diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
index e58e2e1..bc7e4e7 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
@@ -7,6 +7,7 @@ import {
 import { PlayButton } from './viewer.icons'
 import actions from 'app/actions'
 import { URLS } from 'app/constants'
+import { isHandheld } from 'app/utils'
 
 const PLAY_MESSAGES = {
   not_started: 'Start the Exhibition',
@@ -66,6 +67,7 @@ class EfluxChrome extends Component {
     if (navStyle) className += ' ' + navStyle
     if (navGradient) className += ' gradient'
     if (transcriptOpen) className += ' transcript-open'
+    if (isFullscreen) className += ' is-fullscreen'
     return (
       <div className={className}>
         <div className="eflux-gradient" />
@@ -81,20 +83,9 @@ class EfluxChrome extends Component {
         <div className={growlOpen ? "growl-tooltip growl-message open" : "growl-tooltip growl-message"}>
           {growlMessage}
         </div>
+        {isFullscreen && fullscreenVisible && isHandheld && this.renderCloseButton()}
         <div className="eflux-nav">
-          {isFullscreen && fullscreenVisible &&
-            <div
-              className="fullscreen-close"
-              onMouseEnter={() => this.handleMouseEnter('close')}
-              onMouseLeave={() => this.handleMouseLeave('close')}
-              onClick={() => {
-                actions.viewer.toggleFullscreenVisible(false)
-                this.handleMouseLeave('close')
-              }}
-            >
-              {EfluxClose}
-            </div>
-          }
+          {isFullscreen && fullscreenVisible && !isHandheld && this.renderCloseButton()}
           <span
             onMouseEnter={() => this.handleMouseEnter('play')}
             onMouseLeave={() => this.handleMouseLeave('play')}
@@ -143,6 +134,21 @@ class EfluxChrome extends Component {
       </div>
     )
   }
+  renderCloseButton() {
+    return (
+      <div
+        className="fullscreen-close"
+        onMouseEnter={() => this.handleMouseEnter('close')}
+        onMouseLeave={() => this.handleMouseLeave('close')}
+        onClick={() => {
+          actions.viewer.toggleFullscreenVisible(false)
+          this.handleMouseLeave('close')
+        }}
+      >
+        {EfluxClose}
+      </div>
+    )
+  }
 }
 
 const mapStateToProps = state => ({