From 483fdeac8f6f4f6d6ddca9d770bb37a405feaf41 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Fri, 24 Jul 2020 15:04:58 +0200
Subject: showing and hiding stuff

---
 .../frontend/app/views/viewer/checklist/checklist.css   | 15 +++++++++++++++
 animism-align/frontend/app/views/viewer/nav/nav.css     |  8 +++++++-
 .../frontend/app/views/viewer/sections/sections.css     |  5 +++++
 .../app/views/viewer/sections/viewer.sections.nav.js    | 17 +++++++++--------
 .../frontend/app/views/viewer/viewer.container.js       |  9 +++++++--
 animism-align/frontend/app/views/viewer/viewer.css      |  2 +-
 6 files changed, 44 insertions(+), 12 deletions(-)
 create mode 100644 animism-align/frontend/app/views/viewer/checklist/checklist.css

(limited to 'animism-align/frontend/app/views/viewer')

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;
-- 
cgit v1.2.3-70-g09d2