style that mobile close button

3 files changed, 63 insertions, 38 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 => ({
diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.css b/animism-align/frontend/app/views/viewer/nav/eflux.css
index cc5ce04..3c464ae 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.css
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.css
@@ -28,7 +28,7 @@
   top: 20px;
   left: 28px;
 }
-.eflux-logo svg {
+.eflux-header .eflux-logo svg {
 /*
   width: 218.3px;
   height: 65px;
@@ -43,9 +43,9 @@
   top: 1rem;
   right: 1.75rem;
 }
-.eflux-nav .fullscreen-close,
-.eflux-nav .playToggle,
-.eflux-nav .transcript-icon {
+.eflux-header .fullscreen-close,
+.eflux-header .playToggle,
+.eflux-header .transcript-icon {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -57,30 +57,30 @@
   margin-left: 1rem;
   cursor: pointer;
 }
-.eflux-nav .fullscreen-close:hover,
-.eflux-nav .playToggle:hover,
-.eflux-nav .transcript-icon:hover {
+.eflux-header .fullscreen-close:hover,
+.eflux-header .playToggle:hover,
+.eflux-header .transcript-icon:hover {
   background: #ddd;
 }
-.eflux-nav svg {
+.eflux-header svg {
   width: 2rem;
   height: 2rem;
 }
-.eflux-nav .playToggle svg {
+.eflux-header .playToggle svg {
   width: 2.5rem;
   height: 2.5rem;
 }
-.eflux-nav .playToggle.paused svg {
+.eflux-header .playToggle.paused svg {
   margin-left: 2px;
 }
-.eflux-nav .fullscreen-close svg {
+.eflux-header .fullscreen-close svg {
   width: 1rem;
 }
 
-.eflux-nav svg path {
+.eflux-header svg path {
   fill: #000;
 }
-.eflux-nav svg line {
+.eflux-header svg line {
   stroke: #000;
 }
 
@@ -99,23 +99,23 @@
   stroke: #fff;
 }
 
-.black .eflux-nav .fullscreen-close,
-.black .eflux-nav .playToggle,
-.black .eflux-nav .transcript-icon {
+.black .eflux-header .fullscreen-close,
+.black .eflux-header .playToggle,
+.black .eflux-header .transcript-icon {
   background: #222;
 }
-.black .eflux-nav .fullscreen-close:hover,
-.black .eflux-nav .playToggle:hover,
-.black .eflux-nav .transcript-icon:hover {
+.black .eflux-header .fullscreen-close:hover,
+.black .eflux-header .playToggle:hover,
+.black .eflux-header .transcript-icon:hover {
   background: #444;
 }
-.black .eflux-nav svg path {
+.black .eflux-header svg path {
   fill: #fff;
 }
-.black .eflux-nav svg polygon {
+.black .eflux-header svg polygon {
   fill: #fff;
 }
-.black .eflux-nav svg line {
+.black .eflux-header svg line {
   stroke: #fff;
 }
 
diff --git a/animism-align/frontend/app/views/viewer/viewer.mobile.css b/animism-align/frontend/app/views/viewer/viewer.mobile.css
index e1a7645..ec38f01 100644
--- a/animism-align/frontend/app/views/viewer/viewer.mobile.css
+++ b/animism-align/frontend/app/views/viewer/viewer.mobile.css
@@ -63,6 +63,9 @@
   .eflux-header.white .eflux-logo svg path {
     fill: #fff;
   }
+  .eflux-header.white.is-fullscreen .eflux-logo svg path {
+    fill: #000;
+  }
   .eflux-header.white.gradient .eflux-logo svg path {
     fill: #000;
   }
@@ -70,11 +73,12 @@
     height: calc(100vh);
     background-size: auto 105%;
   }
-  .eflux-nav .transcript-icon {
+  .eflux-header .transcript-icon {
     display: none;
   }
-  .eflux-nav .playToggle,
-  .eflux-nav .transcript-icon {
+  .eflux-header .fullscreen-close,
+  .eflux-header .playToggle,
+  .eflux-header .transcript-icon {
     width: 2.5rem;
     height: 2.5rem;
     box-shadow: 0.3px 0.6px 2.6px rgba(0,0,0,0.3);
@@ -86,6 +90,21 @@
   .growl-tooltip {
     display: none;
   }
+  .eflux-header .fullscreen-close {
+    position: absolute;
+    top: 1rem;
+    left: 1.25rem;
+    margin-left: 0;
+    box-shadow: 0 0 0 rgba(0,0,0,0.0);
+    background: transparent;
+  }
+  .eflux-header .fullscreen-close svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .eflux-nav {
+    right: 1.25rem;
+  }
 
   /* nav */