summaryrefslogtreecommitdiff
path: root/animism-align/frontend/app/views/viewer/nav
diff options
context:
space:
mode:
Diffstat (limited to 'animism-align/frontend/app/views/viewer/nav')
-rw-r--r--animism-align/frontend/app/views/viewer/nav/eflux.chrome.js21
-rw-r--r--animism-align/frontend/app/views/viewer/nav/eflux.css24
-rw-r--r--animism-align/frontend/app/views/viewer/nav/nav.css7
3 files changed, 52 insertions, 0 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 */