opening and closing the nav

8 files changed, 49 insertions, 16 deletions

diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css
index 3689593..5c62b03 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.css
+++ b/animism-align/frontend/app/views/viewer/nav/nav.css
@@ -5,6 +5,15 @@
   width: 100%;
   font-size: 18px;
 }
+.main-nav {
+  transition: all 0.2s;
+  transform: translateZ(0) translateY(0);
+}
+.sections-open .main-nav {
+  transform: translateZ(0) translateY(-22rem);
+  background: black;
+  color: white;
+}
 
 /* The main nav row */
 
@@ -65,6 +74,14 @@
   width: 100%;
   height: 100%;
 }
+.viewer-nav .arrow path,
+.viewer-nav .arrow polygon {
+  fill: #000;
+}
+.sections-open .viewer-nav .arrow path,
+.sections-open .viewer-nav .arrow polygon {
+  fill: #fff;
+}
 
 /* Volume button */
 
@@ -81,10 +98,10 @@
   stroke: #000;
   stroke-width: 0.5;
 }
-.nav-open .volume path {
+.sections-open .volume path {
   fill: #fff;
 }
-.nav-open .volume.muted path {
+.sections-open .volume.muted path {
   fill: #000;
   stroke: #fff;
 }
@@ -100,8 +117,8 @@
 .playToggle polygon {
   fill: #000;
 }
-.nav-open .playToggle path,
-.nav-open .playToggle polygon {
+.sections-open .playToggle path,
+.sections-open .playToggle polygon {
   fill: #fff;
 }
 
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.nav.js b/animism-align/frontend/app/views/viewer/nav/viewer.nav.js
index ab268a4..24fde46 100644
--- a/animism-align/frontend/app/views/viewer/nav/viewer.nav.js
+++ b/animism-align/frontend/app/views/viewer/nav/viewer.nav.js
@@ -11,13 +11,13 @@ class ViewerNav extends Component {
   }
   
   render() {
-    const { } = this.props
+    const { viewer } = this.props
     return (
       <div className="viewer-nav">
         <div className='nav-row main-nav'>
           <div>
-            <span className="section-link link" onClick={() => actions.viewer.showSection('sections')}>
-              <Arrow type={'up'} />
+            <span className="section-link link" onClick={() => actions.viewer.showSection('sectionsNav')}>
+              <Arrow type={viewer.sectionsNav ? 'down' : 'up'} />
               {ROMAN_NUMERALS[0]}
               {'. '}
               {'Introduction'}
@@ -41,6 +41,7 @@ class ViewerNav extends Component {
 }
 
 const mapStateToProps = state => ({
+  viewer: state.viewer,
 })
 
 export default connect(mapStateToProps)(ViewerNav)
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.router.js b/animism-align/frontend/app/views/viewer/nav/viewer.router.js
index 93305cc..b4aeb2e 100644
--- a/animism-align/frontend/app/views/viewer/nav/viewer.router.js
+++ b/animism-align/frontend/app/views/viewer/nav/viewer.router.js
@@ -15,7 +15,7 @@ class ViewerRouter extends Component {
         actions.viewer.showSection('transcript')
         break
       case 'sections':
-        actions.viewer.showSection('sections')
+        actions.viewer.showSection('sectionsNav')
         break
       case 'checklist':
         actions.viewer.showSection('checklist')
diff --git a/animism-align/frontend/app/views/viewer/sections/sections.css b/animism-align/frontend/app/views/viewer/sections/sections.css
index 9243cd5..334e28b 100644
--- a/animism-align/frontend/app/views/viewer/sections/sections.css
+++ b/animism-align/frontend/app/views/viewer/sections/sections.css
@@ -9,6 +9,11 @@
   color: white;
   display: block;
   white-space: nowrap;
+  transition: transform 0.2s;
+  transform: translateZ(0) translateY(25rem);
+}
+.sections-open .viewer-sections {
+  transform: translateZ(0) translateY(0);
 }
 .viewer-sections .viewer-section {
   display: inline-flex;
@@ -30,5 +35,6 @@
   background-position: center center;
 }
 .viewer-sections .section-media {
-  font-size: 14px;
-}
\ No newline at end of file
+  margin-top: 1rem;
+  font-size: 12px;
+}
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 c4681b8..268b6d9 100644
--- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.js
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js
@@ -11,14 +11,23 @@ class ViewerSections extends Component {
   componentDidMount() {
   }
   
+  handleSectionSelection(section) {
+    actions.audio.seek(section.start_ts)
+    actions.viewer.hideSection('sections')
+  }
+
   render() {
     const { sections } = this.props
     return (
       <div className="viewer-sections">
         {sections.map(section => {
-          console.log(section)
+          // console.log(section)
           return (
-            <div className="viewer-section" key={section.index}>
+            <div
+              className="viewer-section"
+              key={section.index}
+              onClick={() => this.handleSectionSelection(section)}
+            >
               <div>
                 <div className="section-thumbnail" style={{
                   backgroundImage: section.media.length && 'url(' + thumbnailURL(section.media[0]) + ')',
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index 35e26a9..2adde86 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -14,7 +14,6 @@ export const loadSections = () => dispatch => {
   const state = store.getState()
   const { order: annotationOrder, lookup: annotationLookup } = state.annotation.index
   const { lookup: mediaLookup } = state.media.index
-  console.log(state.media.index)
 
   // loop over the annotations in time order. group the media found in each section.
   annotationOrder.forEach((annotation_id, i) => {
@@ -33,7 +32,7 @@ export const loadSections = () => dispatch => {
     }
   })
 
-  console.log(sections)
+  // console.log(sections)
 
   dispatch({ type: types.viewer.load_sections, data: sections })
 }
diff --git a/animism-align/frontend/app/views/viewer/viewer.container.js b/animism-align/frontend/app/views/viewer/viewer.container.js
index 570ef42..3a6c707 100644
--- a/animism-align/frontend/app/views/viewer/viewer.container.js
+++ b/animism-align/frontend/app/views/viewer/viewer.container.js
@@ -59,6 +59,7 @@ class ViewerContainer extends Component {
     }
     let className = 'viewer'
     if (viewer.transcript) className += ' transcript-open'
+    if (viewer.sectionsNav) className += ' sections-open'
     return (
       <div>
         <div className={className}>
diff --git a/animism-align/frontend/app/views/viewer/viewer.reducer.js b/animism-align/frontend/app/views/viewer/viewer.reducer.js
index 30c7a0a..949ec45 100644
--- a/animism-align/frontend/app/views/viewer/viewer.reducer.js
+++ b/animism-align/frontend/app/views/viewer/viewer.reducer.js
@@ -4,15 +4,15 @@ const initialState = {
   transcript: false,
   checklist: false,
   nav: false,
+  sectionsNav: false,
   sections: { loading: true },
   options: {
   }
 }
 
 export default function viewerReducer(state = initialState, action) {
-  console.log(action.type, action)
+  // console.log(action.type, action)
   switch (action.type) {
-
     case types.viewer.load_sections:
       return {
         ...state,