2 files changed, 129 insertions, 0 deletions
diff --git a/animism-align/frontend/app/views/viewer/modals/modals.css b/animism-align/frontend/app/views/viewer/modals/modals.css
new file mode 100644
index 0000000..370e588
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/modals/modals.css
@@ -0,0 +1,66 @@
+/* vitrine modal */
+
+.vitrine-modal {
+  position: fixed;
+  top: 0; left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 20;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s;
+  background: white;
+}
+.vitrine-modal.open {
+  opacity: 1;
+  pointer-events: auto;
+}
+.vitrine-modal .vitrine-modal-content {
+  display: flex;
+  flex-flow: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  width: 100%;
+  height: 100%;
+}
+.vitrine-modal .vitrine-modal-content > div {
+  width: 50%;
+  height: 100%;
+}
+.vitrine-modal .vitrine-image {
+  background-size: contain;
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+.vitrine-modal .vitrine-text {
+  background: white;
+  color: black;
+  font-family: "Freight Text", serif;
+  font-size: 1.2rem;
+  line-height: 1.5;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.vitrine-modal .vitrine-text > div {
+  max-width: 45vw;
+  padding: 1.5rem 1.5rem 1.5rem 1.5rem;
+}
+.vitrine-modal .vitrine-text-content {
+  white-space: pre-wrap;
+}
+.vitrine-modal .vitrine-caption {
+  margin-bottom: 1.5rem;
+}
+.vitrine-modal .vitrine-close {
+  position: absolute;
+  top: 23px;
+  right: 32px;
+}
+.vitrine-modal .vitrine-close svg {
+  cursor: pointer;
+  width: 26px;
+  height: 20px;
+}
+.vitrine-modal .vitrine-close svg line {
+  stroke: #000;
+}
diff --git a/animism-align/frontend/app/views/viewer/modals/modals.vitrine.js b/animism-align/frontend/app/views/viewer/modals/modals.vitrine.js
new file mode 100644
index 0000000..88b785c
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/modals/modals.vitrine.js
@@ -0,0 +1,63 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+import actions from 'app/actions'
+
+import { EfluxClose } from '../nav/eflux.icons'
+
+class VitrineModal extends Component {
+  render() {
+    const { open, media, index } = this.props.vitrineModal
+    if (!media) {
+      return (
+        <div className='vitrine-modal'></div>
+      )
+    }
+    const className = open ? 'vitrine-modal open' : 'vitrine-modal'
+    const id = media.settings.image_order[index]
+    const image = (media.settings.display_lookup || media.settings.image_lookup)[id]
+    const caption = media.settings.caption_lookup[id]
+    return (
+      <div className={className}>
+        <div className='vitrine-modal-content'>
+          <div className='vitrine-image' style={{
+            backgroundImage: 'url(' + image.url + ')',
+          }} />
+          <div className='vitrine-text'>
+            <div>
+              {caption.title && <VitrineCaption caption={caption} />}
+              <div className='vitrine-text-content'>
+                {caption.long_caption || caption.caption}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className='vitrine-close' onClick={() => actions.viewer.closeVitrineModal()}>
+          {EfluxClose}
+        </div>
+      </div>
+    )
+  }
+}
+
+const VitrineCaption = ({ caption }) => {
+  return (
+    <div className='vitrine-caption'>
+      {caption.author && (
+        <span>{caption.author}</span>
+      )}
+      {caption.title && (
+        <span><br /><i>{caption.title}</i></span>
+      )}
+      {caption.date && (
+        <span><br />{caption.date}</span>
+      )}
+    </div>
+  )
+}
+
+const mapStateToProps = state => ({
+  vitrineModal: state.viewer.vitrineModal,
+})
+
+export default connect(mapStateToProps)(VitrineModal)