From 0f6179706deb9c0a235013bddebc33596eaf08e3 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 23 Jul 2020 22:53:38 +0200
Subject: opening and closing the nav

---
 .../frontend/app/views/viewer/sections/sections.css         | 10 ++++++++--
 .../frontend/app/views/viewer/sections/viewer.sections.js   | 13 +++++++++++--
 2 files changed, 19 insertions(+), 4 deletions(-)

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

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]) + ')',
-- 
cgit v1.2.3-70-g09d2