showing and hiding stuff

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;