adding grid

4 files changed, 96 insertions, 11 deletions

diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/index.js b/animism-align/frontend/app/views/viewer/player/components.utility/index.js
index c4ac419..4fcf649 100644
--- a/animism-align/frontend/app/views/viewer/player/components.utility/index.js
+++ b/animism-align/frontend/app/views/viewer/player/components.utility/index.js
@@ -16,9 +16,14 @@ import {
   Carousel
 } from './media.carousel'
 
+import {
+  Grid
+} from './media.grid'
+
 export {
   MediaCitation,
   Vitrine,
   Gallery,
   Carousel,
+  Grid,
 }
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.css b/animism-align/frontend/app/views/viewer/player/components.utility/media.css
index 1519c40..28cc841 100644
--- a/animism-align/frontend/app/views/viewer/player/components.utility/media.css
+++ b/animism-align/frontend/app/views/viewer/player/components.utility/media.css
@@ -1,6 +1,7 @@
 /* carousel */
 
 .carousel-container {
+  margin-top: 0.5rem;
   padding: 1rem;
 }
 .carousel-item {
@@ -17,6 +18,7 @@
   overflow-x: scroll;
   width: 100%;
   padding: 1rem;
+  margin-bottom: 1.5rem;
 }
 .gallery-scroll {
   display: flex;
@@ -34,6 +36,7 @@
   height: 25rem;
 }
 .gallery-image img {
+  display: block;
   max-height: 25rem;
 }
 .gallery-caption {
@@ -58,6 +61,31 @@
   background: #000;
 }
 
+/* grid */
+
+.grid-container {
+  margin: 0 auto 1.5rem auto;
+  width: 45rem;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+.grid-item {
+  width: 22rem;
+  margin-bottom: 0.5rem;
+}
+.grid-item:nth-child(odd) {
+  margin-right: 1rem;
+}
+.grid-item img {
+  display: block;
+  width: 22rem;
+}
+.grid-caption {
+  margin-top: 0.5rem;
+  color: #888;
+}
 
 /* vitrine */
 
diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js b/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js
index 3ad16b2..7cec52b 100644
--- a/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js
+++ b/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js
@@ -1,20 +1,30 @@
 import React, { Component } from 'react'
 
-export const Gallery = ({ media }) => {
+import { CURTAIN_COLOR_LOOKUP } from 'app/constants'
+
+export const Gallery = ({ media, annotation }) => {
   const { image_order, image_lookup, display_lookup, thumbnail_lookup, caption_lookup } = media.settings
+  const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
+  const style = {
+    backgroundColor: color.backgroundColor,
+    color: color.textColor,
+  }
+
   // console.log(display_lookup)
   // console.log(width)
   return (
-    <div className='gallery-items'>
-      <div className='gallery-scroll'>
-        {image_order.map(id => {
-          const image = display_lookup[id]
-          const caption = (caption_lookup && caption_lookup[id]) || {}
-          // console.log(image)
-          return (
-            <GalleryItem key={id} image={image} caption={caption} />
-          )
-        })}
+    <div style={style} className='gallery-container'>
+      <div className='gallery-items'>
+        <div className='gallery-scroll'>
+          {image_order.map(id => {
+            const image = display_lookup[id]
+            const caption = (caption_lookup && caption_lookup[id]) || {}
+            // console.log(image)
+            return (
+              <GalleryItem key={id} image={image} caption={caption} />
+            )
+          })}
+        </div>
       </div>
     </div>
   )
diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.grid.js b/animism-align/frontend/app/views/viewer/player/components.utility/media.grid.js
new file mode 100644
index 0000000..5bba2d5
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/player/components.utility/media.grid.js
@@ -0,0 +1,42 @@
+import React, { Component } from 'react'
+
+import { CURTAIN_COLOR_LOOKUP } from 'app/constants'
+
+export const Grid = ({ media, annotation }) => {
+  const { image_order, image_lookup, display_lookup, thumbnail_lookup, caption_lookup } = media.settings
+  const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
+  const style = {
+    // backgroundColor: color.backgroundColor,
+    // color: color.textColor,
+  }
+  // console.log(display_lookup)
+  // console.log(width)
+  return (
+    <div style={style} className='grid-container'>
+      {image_order.map(id => {
+        const image = display_lookup[id]
+        const caption = (caption_lookup && caption_lookup[id]) || {}
+        // console.log(image)
+        return (
+          <GridItem key={id} image={image} caption={caption} />
+        )
+      })}
+    </div>
+  )
+}
+
+const GridItem = ({ image, caption }) => {
+  console.log(image)
+  return (
+    <div className='grid-item'>
+      <div className='grid-image'>
+        <img src={image.url} />
+      </div>
+      {caption.caption && (
+        <div className='grid-caption'>
+          {caption.caption}
+        </div>
+      )}
+    </div>
+  )
+}