diff options
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' |