eflux chrome

8 files changed, 78 insertions, 14 deletions

diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
new file mode 100644
index 0000000..8d04e8b
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
@@ -0,0 +1,21 @@
+import React from 'react'
+
+const EfluxChrome = React.memo(() => (
+  <div className="eflux-header">
+    <div className="eflux-logo">
+      <a href="/">
+        <img src="/static/img/elements/e-flux-logo.svg" />
+      </a>
+    </div>
+    <div className="eflux-nav">
+      <a href="/">
+        <img src="/static/img/elements/close.svg" />
+      </a>
+      <a href="/">
+        <img src="/static/img/elements/menu.svg" />
+      </a>
+    </div>
+  </div>
+))
+
+export default EfluxChrome
diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.css b/animism-align/frontend/app/views/viewer/nav/eflux.css
new file mode 100644
index 0000000..2dbd0be
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.css
@@ -0,0 +1,24 @@
+.eflux-header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 2;
+}
+.eflux-logo {
+  position: absolute;
+  top: 20px;
+  left: 28px;
+}
+.eflux-logo img {
+  height: 28px;
+}
+.eflux-nav {
+  position: absolute;
+  top: 23px;
+  right: 32px;
+}
+.eflux-nav img {
+  height: 20px;
+  margin-left: 34px;
+}
diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css
index 5c62b03..b28996a 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.css
+++ b/animism-align/frontend/app/views/viewer/nav/nav.css
@@ -4,16 +4,23 @@
   left: 0;
   width: 100%;
   font-size: 18px;
+  transition: all 0.2s;
 }
 .main-nav {
   transition: all 0.2s;
   transform: translateZ(0) translateY(0);
+  border-top: 1px solid transparent;
 }
 .sections-open .main-nav {
   transform: translateZ(0) translateY(-22rem);
+  border-top: 1px solid #fff;
   background: black;
   color: white;
 }
+.transcript-open .viewer-nav {
+  width: calc(100vw - 31.875rem);
+}
+
 
 /* The main nav row */
 
diff --git a/animism-align/frontend/app/views/viewer/sections/sections.css b/animism-align/frontend/app/views/viewer/sections/sections.css
index d7e963a..e18d2cc 100644
--- a/animism-align/frontend/app/views/viewer/sections/sections.css
+++ b/animism-align/frontend/app/views/viewer/sections/sections.css
@@ -11,6 +11,7 @@
   white-space: nowrap;
   transition: transform 0.2s;
   transform: translateZ(0) translateY(25rem);
+  border-top: 1px solid #fff;
 }
 .sections-open .viewer-sections {
   transform: translateZ(0) translateY(0);
diff --git a/animism-align/frontend/app/views/viewer/transcript/transcript.css b/animism-align/frontend/app/views/viewer/transcript/transcript.css
index 3545c5b..984221a 100644
--- a/animism-align/frontend/app/views/viewer/transcript/transcript.css
+++ b/animism-align/frontend/app/views/viewer/transcript/transcript.css
@@ -1,6 +1,7 @@
 /* transcript */
 
 .transcript {
+  z-index: 20;
   position: absolute;
   top: 0;
   right: 0;
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index 2adde86..3d69b1f 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -23,12 +23,12 @@ export const loadSections = () => dispatch => {
       sections.push(currentSection)
     }
     if (MEDIA_TYPES.has(annotation.type)) {
-      if (!currentSection) {
+      if (currentSection) {
+        const media = mediaLookup[annotation.settings.media_id]
+        currentSection.media.push(media)
+      } else {
         console.error("media found before first section")
-        return
       }
-      const media = mediaLookup[annotation.settings.media_id]
-      currentSection.media.push(media)
     }
   })
 
diff --git a/animism-align/frontend/app/views/viewer/viewer.container.js b/animism-align/frontend/app/views/viewer/viewer.container.js
index af9d12b..7e59881 100644
--- a/animism-align/frontend/app/views/viewer/viewer.container.js
+++ b/animism-align/frontend/app/views/viewer/viewer.container.js
@@ -6,6 +6,7 @@ import { connect } from 'react-redux'
 import './viewer.fonts.css'
 import './viewer.css'
 import './nav/nav.css'
+import './nav/eflux.css'
 import './sections/sections.css'
 import './transcript/transcript.css'
 
@@ -15,6 +16,7 @@ import { Loader } from 'app/common'
 import ViewerNav from './nav/viewer.nav'
 import ViewerSections from './sections/viewer.sections'
 import ViewerRouter from './nav/viewer.router'
+import EfluxChrome from './nav/eflux.chrome'
 import Player from './player/player.container'
 import Transcript from './transcript/transcript.container'
 import Checklist from './checklist/checklist.container'
@@ -62,15 +64,18 @@ class ViewerContainer extends Component {
     if (viewer.nav) className += ' sections-open'
     return (
       <div>
-        <div className={className}>
-          <div className='viewer-container'>
-            <Player />
+        <div className='viewer-parent'>
+          <EfluxChrome />
+          <div className={className}>
+            <div className='viewer-container'>
+              <Player />
+            </div>
+            <ViewerNav />
+            <ViewerSections />
+            <Transcript />
+            <Checklist />
+            <Route exact path='/viewer/:component/' component={ViewerRouter} />
           </div>
-          <ViewerNav />
-          <ViewerSections />
-          <Transcript />
-          <Checklist />
-          <Route exact path='/viewer/:component/' component={ViewerRouter} />
         </div>
       </div>
     )
diff --git a/animism-align/frontend/app/views/viewer/viewer.css b/animism-align/frontend/app/views/viewer/viewer.css
index dac8d96..6c50f66 100644
--- a/animism-align/frontend/app/views/viewer/viewer.css
+++ b/animism-align/frontend/app/views/viewer/viewer.css
@@ -1,8 +1,13 @@
-.viewer {
+.viewer-parent {
   position: relative;
-  overflow: hidden;
   width: 100vw;
   height: calc(100vh - 3.125rem);
+}
+.viewer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
   background: #fff;
   color: #000;
   font-family: "Neue Haas Unica", sans-serif;