stub inline vitrine

5 files changed, 92 insertions, 52 deletions

diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.gallery.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.gallery.js
index 31a4176..58bcfaa 100644
--- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.gallery.js
+++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.gallery.js
@@ -10,7 +10,6 @@ export const FullscreenVitrine = ({ element, media, transitionDuration }) => {
     color: color.textColor,
     transitionDuration,
   }
-  console.log(item)
   return (
     <div
       className='fullscreen-element vitrine'
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js
new file mode 100644
index 0000000..34a8633
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js
@@ -0,0 +1,39 @@
+import React from 'react'
+
+import { MediaCitation, Vitrine } from '../components.utility'
+
+export const InlineVitrine = ({ element, media, transitionDuration }) => {
+  const { color } = element
+  const item = media.lookup[element.settings.media_id]
+  const style = {
+    backgroundColor: color.backgroundColor,
+    color: color.textColor,
+    transitionDuration,
+  }
+  return (
+    <div
+      className='media vitrine'
+      style={style}
+    >
+      <Vitrine media={item} />
+      <MediaCitation media={item} />
+    </div>
+  )
+}
+
+export const InlineGallery = ({ element, media, transitionDuration }) => {
+  const { color } = element
+  const item = media.lookup[element.settings.media_id]
+  const style = {
+    backgroundColor: color.backgroundColor,
+    color: color.textColor,
+    transitionDuration,
+  }
+  return (
+    <div
+      className='media gallery'
+      style={style}
+    >
+    </div>
+  )
+}
diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/vitrine.css b/animism-align/frontend/app/views/viewer/player/components.utility/vitrine.css
new file mode 100644
index 0000000..171ab84
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/player/components.utility/vitrine.css
@@ -0,0 +1,51 @@
+/* vitrine */
+
+.vitrine .heading {
+  font-family: "Freight Text", serif;
+  font-size: 3rem;
+  line-height: 1.28;
+  width: 80%;
+  margin: 0 auto;
+  padding-bottom: 2rem;
+  text-align: center;
+}
+.vitrine .citation {
+  width: 45rem;
+  margin: 0 auto;
+  padding: 1rem 0;
+  font-family: "Neue Haas Unica";
+  color: #888;
+}
+.vitrine-items {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 1rem;
+}
+.vitrine-items .vitrine-item {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: space-between;
+  height: calc(45vh - 6rem);
+}
+.vitrine-items .vitrine-item .vitrine-image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 80%;
+  cursor: pointer;
+}
+.vitrine-items .vitrine-item .vitrine-image img {
+  max-width: 100%;
+  max-height: 100%;
+  pointer-events: none;
+}
+.vitrine-items .vitrine-item .zoomPlus {
+  cursor: pointer;  
+}
+.vitrine-items .vitrine-item:hover .zoomPlus path {
+  stroke: #000;
+}
diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
index 29f68c2..e6a3504 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
@@ -61,60 +61,10 @@
   justify-content: space-between;
   align-items: center;
 }
-.vitrine .heading {
-  font-family: "Freight Text", serif;
-  font-size: 3rem;
-  line-height: 1.28;
-  width: 80%;
-  margin: 0 auto;
-  padding-bottom: 2rem;
-  text-align: center;
-}
-.vitrine .citation {
-  width: 45rem;
-  margin: 0 auto;
-  padding: 1rem 0;
-  font-family: "Neue Haas Unica";
-  color: #888;
-}
-
 .viewer-fullscreen .fullscreen-element.vitrine .heading {
   margin-top: 4rem;
+  padding-bottom: 1rem;
 }
 .viewer-fullscreen .fullscreen-element.vitrine .citation {
   margin-bottom: 3rem;
 }
-
-.vitrine-items {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 1rem;
-}
-.vitrine-items .vitrine-item {
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: center;
-  justify-content: space-between;
-  height: calc(45vh - 7rem);
-}
-.vitrine-items .vitrine-item .vitrine-image {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 80%;
-  cursor: pointer;
-}
-.vitrine-items .vitrine-item .vitrine-image img {
-  max-width: 100%;
-  max-height: 100%;
-  pointer-events: none;
-}
-.vitrine-items .vitrine-item .zoomPlus {
-  cursor: pointer;  
-}
-.vitrine-items .vitrine-item:hover .zoomPlus path {
-  stroke: #000;
-}
diff --git a/animism-align/frontend/app/views/viewer/viewer.container.js b/animism-align/frontend/app/views/viewer/viewer.container.js
index 225055c..c7fb7ea 100644
--- a/animism-align/frontend/app/views/viewer/viewer.container.js
+++ b/animism-align/frontend/app/views/viewer/viewer.container.js
@@ -13,6 +13,7 @@ import './checklist/checklist.css'
 import './player/player.container.css'
 import './player/player.fullscreen.css'
 import './player/player.transcript.css'
+import './player/components.utility/vitrine.css'
 
 import actions from 'app/actions'
 import { Loader } from 'app/common'