5 files changed, 50 insertions, 33 deletions

diff --git a/animism-align/frontend/app/views/viewer/viewer.nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css
index da16b13..3689593 100644
--- a/animism-align/frontend/app/views/viewer/viewer.nav.css
+++ b/animism-align/frontend/app/views/viewer/nav/nav.css
@@ -111,28 +111,3 @@
   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
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/nav/viewer.sections.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js
index 76402e8..c4681b8 100644
--- a/animism-align/frontend/app/views/viewer/nav/viewer.sections.js
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js
@@ -3,7 +3,6 @@ import React, { Component } from 'react'
 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'
@@ -20,10 +19,18 @@ class ViewerSections extends Component {
           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>
+                <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>
           )
         })}
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.sections.nav.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js
index f4ab93a..a619d81 100644
--- a/animism-align/frontend/app/views/viewer/nav/viewer.sections.nav.js
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js
@@ -3,7 +3,7 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
 import actions from 'app/actions'
-import { Arrow } from './viewer.icons'
+import { Arrow } from '../nav/viewer.icons'
 
 class ViewerSectionsNav extends Component {
   componentDidMount() {
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'