diff options
Diffstat (limited to 'animism-align/frontend')
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 */ |