From 3e081c989c2ea890ec1237c9829aeb979b04f897 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Fri, 24 Jul 2020 14:03:45 +0200
Subject: eflux chrome

---
 .../frontend/app/views/viewer/nav/eflux.chrome.js  | 21 +++++++++++++++++++
 .../frontend/app/views/viewer/nav/eflux.css        | 24 ++++++++++++++++++++++
 .../frontend/app/views/viewer/nav/nav.css          |  7 +++++++
 3 files changed, 52 insertions(+)
 create mode 100644 animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
 create mode 100644 animism-align/frontend/app/views/viewer/nav/eflux.css

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

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 */
 
-- 
cgit v1.2.3-70-g09d2