adding grid

10 files changed, 128 insertions, 28 deletions

diff --git a/animism-align/frontend/app/views/align/components/annotations/annotation.form.js b/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
index 8b4b6fe..eb5afeb 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
@@ -16,7 +16,7 @@ const ANNOTATION_TYPES = [
   'sentence', 'section_heading', 'heading_text', 'paragraph_end',
   'video',
   'image',
-  'gallery', 'grid', 'carousel', 'vitrine',
+  'gallery', 'carousel', 'grid', 'vitrine',
   'curtain', 'intro',
 ].map(name => ({ name, label: capitalize(name.replace('_', ' ')) }))
 
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js
index ab63c98..a4ad015 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js
@@ -21,12 +21,15 @@ import {
 
 export const annotationFormLookup = {
   section_heading: AnnotationFormSectionHeading,
+
   image: AnnotationFormImage,
   video: AnnotationFormVideo,
-  intro: AnnotationFormIntro,
-  curtain: AnnotationFormCurtain,
+
   gallery: AnnotationFormGallery,
-  grid: AnnotationFormGallery,
   carousel: AnnotationFormGallery,
+  grid: AnnotationFormGallery,
   vitrine: AnnotationFormGallery,
+
+  intro: AnnotationFormIntro,
+  curtain: AnnotationFormCurtain,
 }
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js
index f69e81f..2ebe7b3 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js
@@ -29,12 +29,15 @@ export const AnnotationElementLookup = {
   heading_text: React.memo(AnnotationHeadingText),
   section_heading: React.memo(AnnotationSectionHeading),
   paragraph_end: React.memo(AnnotationParagraphEnd),
+
   video: React.memo(AnnotationVideo),
+
   image: React.memo(AnnotationImage),
   gallery: React.memo(AnnotationGallery),
+  carousel: React.memo(AnnotationGallery),
   grid: React.memo(AnnotationGallery),
   vitrine: React.memo(AnnotationGallery),
-  carousel: React.memo(AnnotationGallery),
+
   intro: React.memo(AnnotationIntro),
   curtain: React.memo(AnnotationCurtain),
 }
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/index.js b/animism-align/frontend/app/views/viewer/player/components.inline/index.js
index 5d6d08f..6ce1bbe 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/index.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/index.js
@@ -17,6 +17,7 @@ import {
 import {
   InlineCarousel,
   InlineGallery,
+  InlineGrid,
   InlineVitrine,
 } from './inline.gallery'
 
@@ -32,10 +33,13 @@ export const inlineComponents = {
   section_heading: React.memo(SectionHeading),
   heading_text: React.memo(HeadingText),
   header: React.memo(SectionHeading),
+  intro: React.memo(Intro),
+
   video: React.memo(MediaVideo),
   image: React.memo(MediaImage),
-  intro: React.memo(Intro),
+
   vitrine: InlineVitrine,
   gallery: InlineGallery,
+  grid: InlineGrid,
   carousel: InlineCarousel,
 }
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
index 277a237..5852ff1 100644
--- 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
@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { CURTAIN_COLOR_LOOKUP } from 'app/constants'
-import { MediaCitation, Vitrine, Gallery, Carousel } from '../components.utility'
+import { MediaCitation, Vitrine, Gallery, Carousel, Grid } from '../components.utility'
 
 export const InlineVitrine = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
   const annotation = paragraph.annotations[0]
@@ -26,20 +26,12 @@ export const InlineVitrine = ({ paragraph, media, currentParagraph, currentAnnot
 export const InlineGallery = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
   const annotation = paragraph.annotations[0]
   const item = media.lookup[annotation.settings.media_id]
-  const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
-  const style = {
-    backgroundColor: color.backgroundColor,
-    color: color.textColor,
-  }
 
   return (
     <div
       className='inline-element media gallery'
     >
-      <div style={style} className='gallery-container'>
-        <Gallery media={item} />
-      </div>
-      <MediaCitation media={item} />
+      <Gallery media={item} annotation={annotation} />
     </div>
   )
 }
@@ -64,3 +56,16 @@ export const InlineCarousel = ({ paragraph, media, currentParagraph, currentAnno
     </div>
   )
 }
+
+export const InlineGrid = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
+  const annotation = paragraph.annotations[0]
+  const item = media.lookup[annotation.settings.media_id]
+
+  return (
+    <div
+      className='inline-element media grid'
+    >
+      <Grid media={item} annotation={annotation} />
+    </div>
+  )
+}
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>
+  )
+}
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.css b/animism-align/frontend/app/views/viewer/player/player.transcript.css
index b1fe91b..4491a24 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -71,7 +71,7 @@
 }
 
 .player-transcript .paragraph:last-child {
-  margin-bottom: 6rem;
+  margin-bottom: 10rem;
 }
 
 .player-transcript .blockquote {