From 599d3e0758d6f1a3cf5ce69cfc03eab484c3ff17 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 23 Jul 2020 22:43:31 +0200
Subject: styling the sections

---
 .../app/views/viewer/sections/sections.css         | 34 ++++++++++++++++
 .../app/views/viewer/sections/viewer.sections.js   | 47 ++++++++++++++++++++++
 .../views/viewer/sections/viewer.sections.nav.js   | 43 ++++++++++++++++++++
 3 files changed, 124 insertions(+)
 create mode 100644 animism-align/frontend/app/views/viewer/sections/sections.css
 create mode 100644 animism-align/frontend/app/views/viewer/sections/viewer.sections.js
 create mode 100644 animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js

(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
new file mode 100644
index 0000000..9243cd5
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/sections/sections.css
@@ -0,0 +1,34 @@
+/* Viewer sections */
+
+.viewer-sections {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: black;
+  color: white;
+  display: block;
+  white-space: nowrap;
+}
+.viewer-sections .viewer-section {
+  display: inline-flex;
+  white-space: normal;
+  width: 12rem;
+  margin: 1rem 0 1rem 1rem;
+  font-size: 16px;
+}
+.viewer-section > div {
+  height: 20rem;
+}
+.viewer-sections .section-thumbnail {
+  display: block;
+  border-radius: 1rem;
+  width: 12rem;
+  height: 8rem;
+  margin-bottom: 0.5rem;
+  background-size: cover;
+  background-position: center center;
+}
+.viewer-sections .section-media {
+  font-size: 14px;
+}
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js
new file mode 100644
index 0000000..c4681b8
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js
@@ -0,0 +1,47 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+
+import actions from 'app/actions'
+import ViewerSectionsNav from './viewer.sections.nav'
+import { ROMAN_NUMERALS } from 'app/constants'
+import { thumbnailURL } from 'app/views/align/align.util'
+
+class ViewerSections extends Component {
+  componentDidMount() {
+  }
+  
+  render() {
+    const { sections } = this.props
+    return (
+      <div className="viewer-sections">
+        {sections.map(section => {
+          console.log(section)
+          return (
+            <div className="viewer-section" key={section.index}>
+              <div>
+                <div className="section-thumbnail" style={{
+                  backgroundImage: section.media.length && 'url(' + thumbnailURL(section.media[0]) + ')',
+                }}/>
+                <div className="section-title">
+                  {ROMAN_NUMERALS[section.index]}<br />
+                  {section.title}
+                </div>
+                <div className="section-media">
+                  {section.media.map(media => media.type).join(', ')}
+                </div>
+              </div>
+            </div>
+          )
+        })}
+        <ViewerSectionsNav />
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  sections: state.viewer.sections,
+})
+
+export default connect(mapStateToProps)(ViewerSections)
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
new file mode 100644
index 0000000..a619d81
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js
@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+
+import actions from 'app/actions'
+import { Arrow } from '../nav/viewer.icons'
+
+class ViewerSectionsNav extends Component {
+  componentDidMount() {
+  }
+  
+  render() {
+    const { } = this.props
+    return (
+      <div className="viewer-nav">
+        <div className='nav-row'>
+          <div>
+            <span className="share-link link">
+              <Arrow type={'up'} />
+              {'Share'}
+            </span>
+          </div>
+          <div>
+            <span className="checklist-link link">
+              <Arrow type={'up'} />
+              {'Checklist'}
+            </span>
+          </div>
+          <div>
+            <span className="transcript-link link" onClick={() => actions.viewer.showSection('transcript')}>
+              {'Transcript'}
+            </span>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+})
+
+export default connect(mapStateToProps)(ViewerSectionsNav)
-- 
cgit v1.2.3-70-g09d2