diff options
Diffstat (limited to 'animism-align/frontend/app')
3 files changed, 18 insertions, 3 deletions
diff --git a/animism-align/frontend/app/views/viewer/nav/nav.parent.js b/animism-align/frontend/app/views/viewer/nav/nav.parent.js index 00eab26..554f5bd 100644 --- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js +++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js @@ -16,6 +16,7 @@ class NavParent extends Component { constructor(props){ super(props) this.suppressHover = false + this.handleMouseMove = this.handleMouseMove.bind(this) this.handleMouseEnter = this.handleMouseEnter.bind(this) this.handleMouseLeave = this.handleMouseLeave.bind(this) this.handleMouseEnterNext = this.handleMouseEnterNext.bind(this) @@ -54,6 +55,9 @@ class NavParent extends Component { actions.viewer.toggleComponent('nav') console.log('>> CLICK NAV') } + handleMouseMove(e) { + e && e.stopPropagation() + } goToNextSection(e) { e && e.preventDefault() e && e.stopPropagation() @@ -73,7 +77,7 @@ class NavParent extends Component { if (this.state.hoveringNav || !started) containerClassName += ' hovering-nav' if ((this.state.hoveringNext || (viewer.atEndOfSection && !playing)) && !viewer.nav && viewer.nextSection) containerClassName += ' hovering-next' return ( - <div className={containerClassName} onMouseLeave={this.handleMouseLeave}> + <div className={containerClassName} onMouseMove={this.handleMouseMove} onMouseLeave={this.handleMouseLeave}> <div className={navClassName} onClick={this.handleNavBarClick}> <div className='nav-section-name' onMouseEnter={this.handleMouseEnter}> <span className="section-link link"> diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.css b/animism-align/frontend/app/views/viewer/player/components.media/media.css index ffb3988..5f4b84f 100644 --- a/animism-align/frontend/app/views/viewer/player/components.media/media.css +++ b/animism-align/frontend/app/views/viewer/player/components.media/media.css @@ -329,10 +329,14 @@ display: flex; align-items: center; opacity: 0.0; - transition: opacity 0.2s; + transition: opacity 0.2s, transform 0.2s; + transform: translateZ(0); font-size: 1rem; z-index: 1; } +.nav-open .video-scrubber { + transform: translateZ(0) translateY(-22rem); +} .video-scrubber.show { opacity: 1.0; } diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js index a2f906c..76c7b03 100644 --- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.js +++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js @@ -4,9 +4,16 @@ import ViewerSectionsNav from './viewer.sections.nav' import ViewerSectionsList from './viewer.sections.list' export default class ViewerSections extends Component { + constructor(props) { + super(props) + this.handleMouseMove = this.handleMouseMove.bind(this) + } + handleMouseMove(e) { + e && e.stopPropagation() + } render() { return ( - <div className="viewer-sections"> + <div className="viewer-sections" onMouseMove={this.handleMouseMove}> <ViewerSectionsList /> <ViewerSectionsNav /> </div> |