diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer')
7 files changed, 117 insertions, 23 deletions
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 { |