5 files changed, 116 insertions, 4 deletions
diff --git a/frontend/site/projects/museum/views/nav.css b/frontend/site/projects/museum/views/nav.css
index 273e12e..d8883ab 100644
--- a/frontend/site/projects/museum/views/nav.css
+++ b/frontend/site/projects/museum/views/nav.css
@@ -20,7 +20,8 @@
   bottom: 0;
   width: 100%;
   height: 5rem;
-  color: black;
+  /*color: black;*/
+  color: white;
 }
 .footer-gradient {
   position: absolute;
@@ -28,7 +29,7 @@
   width: 100%;
   height: 5rem;
   /*background: linear-gradient(180deg, rgba(255, 121, 13, 0.0), rgba(255, 121, 13, 1.0) 70%);*/
-  background: linear-gradient(180deg, rgba(255, 121, 13, 0.0), rgba(255, 121, 13, 1.0) 70%);
+  background: linear-gradient(180deg, rgba(0,0,0, 0.0), rgba(0,0,0, 1.0) 70%);
   transform: translateY(2rem);
   transition: transform 0.15s;
 }
@@ -46,6 +47,9 @@
 }
 .nav-arrow path {
   fill: transparent;
+
+  stroke: white;
+  stroke-width: 2px;
 }
 .nav-arrow.arrow-left {
   left: 0;
diff --git a/frontend/site/projects/museum/views/nav.overlay.js b/frontend/site/projects/museum/views/nav.overlay.js
index 01050b0..bd7812e 100644
--- a/frontend/site/projects/museum/views/nav.overlay.js
+++ b/frontend/site/projects/museum/views/nav.overlay.js
@@ -4,6 +4,7 @@ import actions from 'site/actions'
 
 import "./nav.css"
 
+import TextOverlay from './text.overlay'
 import { ARTISTS, ARTIST_ORDER, PROJECT_PAGE_SET } from "site/projects/museum/constants"
 import { ArrowLeft, ArrowRight } from "site/projects/museum/icons"
 import { history } from "site/store"
@@ -128,6 +129,7 @@ export default class NavOverlay extends Component {
             <div className="footer no-artist" />
           )
         )}
+        <TextOverlay location={this.props.location} match={this.props.match} />
       </div>
     )
   }
diff --git a/frontend/site/projects/museum/views/overlay.css b/frontend/site/projects/museum/views/overlay.css
new file mode 100644
index 0000000..1a00b95
--- /dev/null
+++ b/frontend/site/projects/museum/views/overlay.css
@@ -0,0 +1,29 @@
+
+.text-overlay-icon {
+  position: fixed;
+  cursor: pointer;
+}
+.text-overlay {
+  position: fixed;
+  background: black;
+  border: 2px solid;
+  padding: 1rem;
+  font-size: 1rem;
+  font-family: 'Helvetica', sans-serif;
+  cursor: url(/last-museum/static/uploads/3/cursor/The_Last_Museum_-_Symbols-33.png) 50 50, pointer;
+  color: #FF790D;
+  max-width: 400px;
+  max-height: 400px;
+  overflow: auto;
+}
+.text-overlay::-webkit-scrollbar {
+  background: transparent;
+  width: 3px;
+}
+.text-overlay::-webkit-scrollbar-thumb {
+  background: #ff790d;
+}
+.text-overlay p {
+  margin: 0 0 1rem 0;
+  line-height: 1.3;
+}
diff --git a/frontend/site/projects/museum/views/stl.overlay.js b/frontend/site/projects/museum/views/stl.overlay.js
index 53dc5e1..2e2c417 100644
--- a/frontend/site/projects/museum/views/stl.overlay.js
+++ b/frontend/site/projects/museum/views/stl.overlay.js
@@ -1,8 +1,6 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
-import actions from 'site/actions'
-
 import STLViewer from '../stl/STLViewer'
 import { STL_FILES } from '../stl-files.js'
 
diff --git a/frontend/site/projects/museum/views/text.overlay.js b/frontend/site/projects/museum/views/text.overlay.js
new file mode 100644
index 0000000..65fc3b2
--- /dev/null
+++ b/frontend/site/projects/museum/views/text.overlay.js
@@ -0,0 +1,79 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+import { TEXT_OVERLAYS, DEFAULT_ICON } from '../text-overlays.js'
+
+import './overlay.css'
+
+class TextOverlay extends Component {
+  state = {
+    open: false,
+    content: null,
+  }
+
+  constructor(props) {
+    super(props)
+    this.toggle = this.toggle.bind(this)
+  }
+
+  componentDidMount() {
+    this.load()
+  }
+
+  componentDidUpdate(prevProps) {
+    // console.log(this.props.location.pathname, prevProps.location.pathname)
+    if (this.props.location.pathname !== prevProps.location.pathname) {
+      this.load()
+    }
+  }
+
+  load() {
+    const { page_name } = this.props.match.params
+    if (TEXT_OVERLAYS[page_name]) {
+      this.setState({
+        content: TEXT_OVERLAYS[page_name],
+        open: false,
+      })
+    } else {
+      this.setState({
+        content: null,
+        open: false,
+      })
+    }
+  }
+
+  toggle() {
+    this.setState({ open: !this.state.open })
+  }
+
+  render() {
+    const { open, content } = this.state
+    if (!this.props.interactive || !content) return null
+    if (!open) {
+      return (
+        <div
+          className="text-overlay-icon"
+          style={content.style}
+          onClick={this.toggle}
+        >
+          <img src={content.icon || DEFAULT_ICON} />
+        </div>
+      )
+    }
+
+    return (
+      <div
+        className="text-overlay"
+        style={content.style}
+        onClick={this.toggle}
+        dangerouslySetInnerHTML={{ __html: content.text }}
+      />
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  interactive: state.site.interactive,
+})
+
+export default connect(mapStateToProps)(TextOverlay)