diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer/player')
| -rw-r--r-- | animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js | 146 | ||||
| -rw-r--r-- | animism-align/frontend/app/views/viewer/player/player.transcript.css | 78 |
2 files changed, 19 insertions, 205 deletions
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js index 4235ed1..c1d4efb 100644 --- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js +++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js @@ -2,7 +2,7 @@ import React, { Component } from 'react' import { connect } from 'react-redux' import { MediaCitation } from '../components.media' -import { Arrow } from '../../nav/viewer.icons' +import { CreditsColumns } from 'app/views/viewer/checklist/credits.components' export const Intro = ({ paragraph, media, onAnnotationClick }) => { const annotation = paragraph.annotations[0] @@ -42,15 +42,22 @@ const ScheduleComponent = ({ episodes }) => { return ( <div> <div className="schedule-about"> - {'Animism on e-flux.com is the ninth iteration of the exhibition and overall '} - {'research project presented at Extra City and MuHKA, Antwerp, 2010; Kunsthalle '} - {'Bern, 2010; Generali Foundation, Vienna, 2011; the Haus der Kulturen der Welt, '} - {'Berlin, 2012; e-flux, New York, 2012; OCAT Shenzhen, 2013; Times Museum Seoul, '} - {'2013; and Ashkal Alwan, Beirut, 2014. Presented here in its digital iteration, '} + <i>Animism</i> + {' on '} + <a href="https://e-flux.com/">e-flux.com</a> + {' is the ninth iteration of the exhibition and overall '} + {'research project presented at Museum of Contemporary Art Antwerp (M HKA) and Extra City, '} + {'Antwerp, 2010, Kunsthalle Bern, 2010, '} + {'Generali Foundation, Vienna, 2011, Haus der Kulturen der Welt, '} + {'Berlin, 2012, e-flux, New York, 2012, OCT Contemporary Art Terminal (OCAT) Shenzhen, 2013, '} + {'Ilmin Museum of Art, Seoul, 2013, '} + {'and Ashkal Alwan, Beirut, 2014.'} + <br/><br/> + {'Presented here in its digital iteration, '} {'the exhibition will be released in four episodes starting October 2020.'} </div> <div className='schedule'> - <div className='schedule-heading'>Schedule</div> + <div className='schedule-heading'>Episodes</div> {episodes.order.map(id => { const episode = episodes.lookup[id] return ( @@ -66,129 +73,7 @@ const ScheduleComponent = ({ episodes }) => { ) })} </div> - <div className='credits'> - <div> - <div className='credits-title'> - Curator - </div> - <div className='credits-info'> - {currentEpisode.curator} - </div> - </div> - <div> - <div className='credits-title'> - Author - </div> - <div className='credits-info'> - {currentEpisode.author} - </div> - </div> - <div> - <div className='credits-title'> - Artists - </div> - <div className='credits-info'> - {currentEpisode.artists} - </div> - </div> - </div> - </div> - ) -} - -const CreditsComponent = ({ episodes, venues }) => { - const currentEpisode = episodes.lookup[episodes.order[0]].settings - // const [ open, setOpen ] = React.useState(-1) - const lines = currentEpisode.credits.split("\n").map((s, i) => { - if (s[0] === "#") { - return ( - <div className='credits-title' key={i}> - {s.replace("#", "").trim()} - </div> - ) - } - return ( - <div - key={i} - dangerouslySetInnerHTML={{ __html: s || " " }} - /> - ) - }) - return ( - <div className='site-credits'> - <div className='site-lines'> - {lines} - </div> - <div className='credits-title'> - Previous venues - </div> - {venues.order.map(id => ( - <CreditsVenue - key={id} - venue={venues.lookup[id]} - /> - ))} - </div> - ) -} - -const CreditsVenue = ({ venue }) => { - const [ open, setOpen ] = React.useState(-1) - const isOpen = open === venue.id - const curators = venue.settings.curator.trim().split('\n') - const artists = venue.settings.artists.trim().split('\n') - const publication_heading = venue.settings.publication_heading - const publication = venue.settings.publication.trim().split('\n') - return ( - <div className={isOpen ? 'venue open' : 'venue'}> - <div className='venue-header' onClick={() => setOpen(isOpen ? -1 : venue.id)}> - <div> - {venue.title}<br /> - {venue.date} - </div> - <Arrow type={isOpen ? 'up' : 'down'} /> - </div> - {isOpen && ( - <div className='venue-info credits'> - <div> - <div className='credits-title'> - {curators.length > 1 ? 'Curators' : 'Curator'} - </div> - <div className='credits-info'> - {curators.map((line, i) => ( - <div key={i}>{line}</div> - ))} - </div> - </div> - - <div> - <div className='credits-title'> - Artists - </div> - <div className='credits-info'> - {artists.map((line, i) => ( - <div key={i}>{line}</div> - ))} - </div> - </div> - - {publication.length > 1 && ( - <div> - <div className='credits-title'> - {publication_heading} - </div> - <div className='credits-info'> - {publication.map((line, i) => ( - <div - key={i} - dangerouslySetInnerHTML={{ __html: line || " " }} - /> - ))} - </div> - </div> - )} - </div> - )} + <CreditsColumns lines={currentEpisode.credits} /> </div> ) } @@ -199,4 +84,3 @@ const mapStateToProps = state => ({ }) export const Schedule = connect(mapStateToProps)(ScheduleComponent) -export const Credits = connect(mapStateToProps)(CreditsComponent) 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 b1bf64d..0ac1a0c 100644 --- a/animism-align/frontend/app/views/viewer/player/player.transcript.css +++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css @@ -13,6 +13,7 @@ } .player-transcript .section_heading, +.credits-content .section_heading, .player-transcript .paragraph.intro_paragraph { font-family: "Freight Text", serif; font-size: 3rem; @@ -21,9 +22,11 @@ margin: 0 auto; padding-bottom: 2rem; } +.credits-content .section_heading, .player-transcript .section_heading { text-align: center; } +.credits-content .section_heading, .player-transcript .section_heading:first-child { margin-top: 4rem; } @@ -285,7 +288,7 @@ display: flex; flex-direction: column; margin: 0 auto; - padding-top: 1.5rem; + padding-top: 2.5rem; } .schedule > div { padding: 0.375rem 0; @@ -312,76 +315,3 @@ border-bottom: 1px solid; } -/* schedule credits */ - -.credits { - display: flex; - flex-direction: row; - margin: 0 auto; - width: 45rem; - padding-top: 1rem; - padding-bottom: 1rem; -} -.credits > div { - width: 14.5rem; - margin-right: 1rem; -} -.credits > div:last-child { - margin-right: 0; -} -.credits-title { - padding: 0.375rem 0; - border-bottom: 1px solid; -} -.credits-info { - padding: 0.375rem 0; - white-space: pre-line; - line-height: 1.3; -} -.credits-info div { - padding-left: 1rem ; - text-indent: -1rem ; -} - -/* site credits */ - -.site-credits { - width: 45rem; - margin: 0 auto; - padding-top: 1rem; - padding-bottom: 1rem; - line-height: 1.3; -} -.site-credits .site-lines { - margin-bottom: 2rem -} -.site-credits .site-lines div { - min-height: 0.875rem; -} -.site-credits .site-lines .credits-title { - margin-bottom: 0.375rem; -} - -/* venues */ - -.site-credits .venue { - border-bottom: 1px solid black; -} -.venue-header { - display: flex; - flex-direction: row; - justify-content: space-between; - padding: 0.375rem 0 0 0; - cursor: pointer; -} -.venue-header svg { - width: 2.5rem; - height: 2.5rem; - transform: translateX(0.6rem) translateY(-0.5rem); -} -.venue-info.credits { - padding-top: 0rem; -} -.venue-info .credits-info div { - min-height: 0.875rem; -} |