diff options
Diffstat (limited to 'animism-align/frontend')
7 files changed, 49 insertions, 13 deletions
diff --git a/animism-align/frontend/app/views/nav/header.component.js b/animism-align/frontend/app/views/nav/header.component.js index 5e14ce4..96e4f2a 100644 --- a/animism-align/frontend/app/views/nav/header.component.js +++ b/animism-align/frontend/app/views/nav/header.component.js @@ -8,6 +8,9 @@ import PlayButton from 'app/views/align/components/player/playButton.component' import './nav.css' function Header(props) { + if (props.router.location && props.router.location.pathname.match("/viewer")) { + return <span /> + } return ( <header> <PlayButton /> @@ -33,6 +36,7 @@ function Header(props) { const mapStateToProps = (state) => ({ // auth: state.auth, site: state.site, + router: state.router, // username: session.get('username'), // isAuthenticated: state.auth.isAuthenticated, }) @@ -40,4 +44,4 @@ const mapStateToProps = (state) => ({ const mapDispatchToProps = (dispatch) => ({ }) -export default connect(mapStateToProps, mapDispatchToProps)(Header) +export default connect(mapStateToProps, mapDispatchToProps)(React.memo(Header)) diff --git a/animism-align/frontend/app/views/viewer/checklist/checklist.css b/animism-align/frontend/app/views/viewer/checklist/checklist.css new file mode 100644 index 0000000..b6ea6f1 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/checklist/checklist.css @@ -0,0 +1,15 @@ +.checklist { + z-index: 20; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: calc(100vh - 3rem); + transform: translateZ(0) translateY(100vh); + transition: transform 0.2s; + background: white; + color: black; +} +.checklist-open .checklist { + transform: translateZ(0) translateY(0); +} diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css index 79dc11b..69afa29 100644 --- a/animism-align/frontend/app/views/viewer/nav/nav.css +++ b/animism-align/frontend/app/views/viewer/nav/nav.css @@ -20,7 +20,9 @@ .transcript-open .viewer-nav { width: calc(100vw - 31.875rem); } - +.checklist-open .main-nav { + transform: translateZ(0) translateY(calc(-22rem - 100vh)); +} /* The main nav row */ @@ -89,6 +91,10 @@ .nav-open .viewer-nav .arrow polygon { fill: #fff; } +.checklist-open .viewer-nav .arrow path, +.checklist-open .viewer-nav .arrow polygon { + fill: #fff; +} /* Player */ diff --git a/animism-align/frontend/app/views/viewer/sections/sections.css b/animism-align/frontend/app/views/viewer/sections/sections.css index e107d3f..a94b712 100644 --- a/animism-align/frontend/app/views/viewer/sections/sections.css +++ b/animism-align/frontend/app/views/viewer/sections/sections.css @@ -16,6 +16,11 @@ .nav-open .viewer-sections { transform: translateZ(0) translateY(0); } +.checklist-open .viewer-sections { + transform: translateZ(0) translateY(calc(3rem - 100vh)); + z-index: 20; +} + .viewer-sections .viewer-section { display: inline-flex; white-space: normal; diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js index a619d81..439b905 100644 --- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js +++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js @@ -6,13 +6,10 @@ import actions from 'app/actions' import { Arrow } from '../nav/viewer.icons' class ViewerSectionsNav extends Component { - componentDidMount() { - } - render() { - const { } = this.props + const { viewer } = this.props return ( - <div className="viewer-nav"> + <div className="viewer-nav sections-nav"> <div className='nav-row'> <div> <span className="share-link link"> @@ -21,13 +18,16 @@ class ViewerSectionsNav extends Component { </span> </div> <div> - <span className="checklist-link link"> - <Arrow type={'up'} /> + <span className="checklist-link link" onClick={() => actions.viewer.toggleSection('checklist')}> + <Arrow type={viewer.checklist ? 'down': 'up'} /> {'Checklist'} </span> </div> <div> - <span className="transcript-link link" onClick={() => actions.viewer.showSection('transcript')}> + <span className="transcript-link link" onClick={() => { + actions.viewer.hideSection('checklist') + actions.viewer.toggleSection('transcript') + }}> {'Transcript'} </span> </div> @@ -38,6 +38,7 @@ class ViewerSectionsNav extends Component { } const mapStateToProps = state => ({ + viewer: state.viewer, }) export default connect(mapStateToProps)(ViewerSectionsNav) diff --git a/animism-align/frontend/app/views/viewer/viewer.container.js b/animism-align/frontend/app/views/viewer/viewer.container.js index bc1a1fc..5949c37 100644 --- a/animism-align/frontend/app/views/viewer/viewer.container.js +++ b/animism-align/frontend/app/views/viewer/viewer.container.js @@ -9,6 +9,7 @@ import './nav/nav.css' import './nav/eflux.css' import './sections/sections.css' import './transcript/transcript.css' +import './checklist/checklist.css' import actions from 'app/actions' import { Loader } from 'app/common' @@ -60,8 +61,12 @@ class ViewerContainer extends Component { return <div className='viewer loading'><Loader /></div> } let className = 'viewer' - if (viewer.transcript) className += ' transcript-open' - if (viewer.nav) className += ' nav-open' + if (viewer.checklist) { + className += ' checklist-open' + } else { + if (viewer.transcript) className += ' transcript-open' + if (viewer.nav) className += ' nav-open' + } return ( <div> <div className='viewer-parent'> diff --git a/animism-align/frontend/app/views/viewer/viewer.css b/animism-align/frontend/app/views/viewer/viewer.css index 6c50f66..da73216 100644 --- a/animism-align/frontend/app/views/viewer/viewer.css +++ b/animism-align/frontend/app/views/viewer/viewer.css @@ -1,7 +1,7 @@ .viewer-parent { position: relative; width: 100vw; - height: calc(100vh - 3.125rem); + height: 100vh; } .viewer { position: relative; |