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

---
 .../frontend/app/views/viewer/nav/nav.css          | 113 +++++++++++++++++
 .../app/views/viewer/nav/viewer.sections.js        |  40 ------
 .../app/views/viewer/nav/viewer.sections.nav.js    |  43 -------
 .../app/views/viewer/sections/sections.css         |  34 +++++
 .../app/views/viewer/sections/viewer.sections.js   |  47 +++++++
 .../views/viewer/sections/viewer.sections.nav.js   |  43 +++++++
 .../frontend/app/views/viewer/viewer.container.js  |   5 +-
 .../frontend/app/views/viewer/viewer.nav.css       | 138 ---------------------
 8 files changed, 240 insertions(+), 223 deletions(-)
 create mode 100644 animism-align/frontend/app/views/viewer/nav/nav.css
 delete mode 100644 animism-align/frontend/app/views/viewer/nav/viewer.sections.js
 delete mode 100644 animism-align/frontend/app/views/viewer/nav/viewer.sections.nav.js
 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
 delete mode 100644 animism-align/frontend/app/views/viewer/viewer.nav.css

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

diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css
new file mode 100644
index 0000000..3689593
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/nav/nav.css
@@ -0,0 +1,113 @@
+.viewer-nav {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  font-size: 18px;
+}
+
+/* The main nav row */
+
+.viewer-nav > .nav-row {
+  width: 100%;
+  height: 3rem;
+  padding: 0.25rem 0 0.25rem 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.viewer-nav > .nav-row > div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32%;
+}
+.viewer-nav > .nav-row > div:nth-child(1) {
+  justify-content: flex-start;
+  align-items: center;
+}
+.viewer-nav > .nav-row > div:nth-child(2) {
+  justify-content: center;
+  align-items: center;
+}
+.viewer-nav > .nav-row > div:nth-child(3) {
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.viewer-nav .link {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;  
+  cursor: pointer;
+}
+
+.transcript-link {
+  padding-right: 1.25rem;
+}
+
+/* Arrows */
+
+.viewer-nav .arrow {
+  display: inline-block;
+  width: 2.5rem;
+  height: 2.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.viewer-nav .arrow.left,
+.viewer-nav .arrow.right {
+  width: 1.25rem;
+}
+.viewer-nav .arrow svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* Volume button */
+
+.volume {
+  cursor: pointer;
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.volume path {
+  fill: #000;
+}
+.volume.muted path {
+  fill: #fff;
+  stroke: #000;
+  stroke-width: 0.5;
+}
+.nav-open .volume path {
+  fill: #fff;
+}
+.nav-open .volume.muted path {
+  fill: #000;
+  stroke: #fff;
+}
+
+/* Play button */
+
+.playToggle {
+  cursor: pointer;
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.playToggle path,
+.playToggle polygon {
+  fill: #000;
+}
+.nav-open .playToggle path,
+.nav-open .playToggle polygon {
+  fill: #fff;
+}
+
+/* Player time */
+
+.playerTime {
+  margin-left: 0.5rem;
+  margin-right: 0.75rem;
+}
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.sections.js b/animism-align/frontend/app/views/viewer/nav/viewer.sections.js
deleted file mode 100644
index 76402e8..0000000
--- a/animism-align/frontend/app/views/viewer/nav/viewer.sections.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React, { Component } from 'react'
-// import { Link } from 'react-router-dom'
-import { connect } from 'react-redux'
-
-import actions from 'app/actions'
-import { Arrow } from './viewer.icons'
-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 className="section-thumbnail" style={{
-                backgroundImage: section.media.length && 'url(' + thumbnailURL(section.media[0]) + ')',
-              }}/>
-              {ROMAN_NUMERALS[section.index]}: {section.title}
-            </div>
-          )
-        })}
-        <ViewerSectionsNav />
-      </div>
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  sections: state.viewer.sections,
-})
-
-export default connect(mapStateToProps)(ViewerSections)
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.sections.nav.js b/animism-align/frontend/app/views/viewer/nav/viewer.sections.nav.js
deleted file mode 100644
index f4ab93a..0000000
--- a/animism-align/frontend/app/views/viewer/nav/viewer.sections.nav.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React, { Component } from 'react'
-// import { Link } from 'react-router-dom'
-import { connect } from 'react-redux'
-
-import actions from 'app/actions'
-import { Arrow } from './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)
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)
diff --git a/animism-align/frontend/app/views/viewer/viewer.container.js b/animism-align/frontend/app/views/viewer/viewer.container.js
index fbd4142..570ef42 100644
--- a/animism-align/frontend/app/views/viewer/viewer.container.js
+++ b/animism-align/frontend/app/views/viewer/viewer.container.js
@@ -5,14 +5,15 @@ import { connect } from 'react-redux'
 
 import './viewer.fonts.css'
 import './viewer.css'
-import './viewer.nav.css'
+import './nav/nav.css'
+import './sections/sections.css'
 import './transcript/transcript.css'
 
 import actions from 'app/actions'
 import { Loader } from 'app/common'
 
 import ViewerNav from './nav/viewer.nav'
-import ViewerSections from './nav/viewer.sections'
+import ViewerSections from './sections/viewer.sections'
 import ViewerRouter from './nav/viewer.router'
 import Player from './player/player.container'
 import Transcript from './transcript/transcript.container'
diff --git a/animism-align/frontend/app/views/viewer/viewer.nav.css b/animism-align/frontend/app/views/viewer/viewer.nav.css
deleted file mode 100644
index da16b13..0000000
--- a/animism-align/frontend/app/views/viewer/viewer.nav.css
+++ /dev/null
@@ -1,138 +0,0 @@
-.viewer-nav {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  font-size: 18px;
-}
-
-/* The main nav row */
-
-.viewer-nav > .nav-row {
-  width: 100%;
-  height: 3rem;
-  padding: 0.25rem 0 0.25rem 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.viewer-nav > .nav-row > div {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 32%;
-}
-.viewer-nav > .nav-row > div:nth-child(1) {
-  justify-content: flex-start;
-  align-items: center;
-}
-.viewer-nav > .nav-row > div:nth-child(2) {
-  justify-content: center;
-  align-items: center;
-}
-.viewer-nav > .nav-row > div:nth-child(3) {
-  justify-content: flex-end;
-  align-items: center;
-}
-
-.viewer-nav .link {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;  
-  cursor: pointer;
-}
-
-.transcript-link {
-  padding-right: 1.25rem;
-}
-
-/* Arrows */
-
-.viewer-nav .arrow {
-  display: inline-block;
-  width: 2.5rem;
-  height: 2.5rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.viewer-nav .arrow.left,
-.viewer-nav .arrow.right {
-  width: 1.25rem;
-}
-.viewer-nav .arrow svg {
-  width: 100%;
-  height: 100%;
-}
-
-/* Volume button */
-
-.volume {
-  cursor: pointer;
-  width: 2.5rem;
-  height: 2.5rem;
-}
-.volume path {
-  fill: #000;
-}
-.volume.muted path {
-  fill: #fff;
-  stroke: #000;
-  stroke-width: 0.5;
-}
-.nav-open .volume path {
-  fill: #fff;
-}
-.nav-open .volume.muted path {
-  fill: #000;
-  stroke: #fff;
-}
-
-/* Play button */
-
-.playToggle {
-  cursor: pointer;
-  width: 2.5rem;
-  height: 2.5rem;
-}
-.playToggle path,
-.playToggle polygon {
-  fill: #000;
-}
-.nav-open .playToggle path,
-.nav-open .playToggle polygon {
-  fill: #fff;
-}
-
-/* Player time */
-
-.playerTime {
-  margin-left: 0.5rem;
-  margin-right: 0.75rem;
-}
-
-/* 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-block;
-  padding: 1rem;
-  margin: 1rem;
-}
-.viewer-sections .section-thumbnail {
-  display: block;
-  width: 6rem;
-  height: 4rem;
-  background-size: cover;
-  background-position: center center;
-}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2