diff options
Diffstat (limited to 'animism-align/frontend')
11 files changed, 242 insertions, 250 deletions
diff --git a/animism-align/frontend/app/constants.js b/animism-align/frontend/app/constants.js index a9f51ec..1cf26cd 100644 --- a/animism-align/frontend/app/constants.js +++ b/animism-align/frontend/app/constants.js @@ -108,4 +108,4 @@ export const GROWL = { REACHED_END_OF_FIRST_SECTION: "Click \"Next\" to advance the exhibition.", } -export const VIDEO_SCRUBBER_HIDE_DELAY = 2000 +export const VIDEO_SCRUBBER_HIDE_DELAY = 1500 diff --git a/animism-align/frontend/app/utils/viewer.utils.js b/animism-align/frontend/app/utils/viewer.utils.js index b61f998..efc7a35 100644 --- a/animism-align/frontend/app/utils/viewer.utils.js +++ b/animism-align/frontend/app/utils/viewer.utils.js @@ -12,3 +12,22 @@ export const getNextSection = section => { } return sections[section.index + 1] } + +export const parseCredits = lines => { + let sections = [] + let current + lines.split("\n").forEach((s, i) => { + if (s[0] === "#") { + current = { + title: s.replace("#", "").trim(), + lines: [], + i + } + sections.push(current) + } else { + current.lines.push(s.trim()) + } + }) + return sections +} + diff --git a/animism-align/frontend/app/views/episode/components/episode.form.js b/animism-align/frontend/app/views/episode/components/episode.form.js index 8a2fb8f..01b13e6 100644 --- a/animism-align/frontend/app/views/episode/components/episode.form.js +++ b/animism-align/frontend/app/views/episode/components/episode.form.js @@ -174,22 +174,6 @@ export default class EpisodeForm extends Component { /> <TextArea - title="Curator" - name="curator" - data={data.settings} - onChange={this.handleSettingsChangeEvent} - autoComplete="off" - /> - - <TextArea - title="Author" - name="author" - data={data.settings} - onChange={this.handleSettingsChangeEvent} - autoComplete="off" - /> - - <TextArea title="Artists" name="artists" data={data.settings} diff --git a/animism-align/frontend/app/views/venue/components/venue.form.js b/animism-align/frontend/app/views/venue/components/venue.form.js index 7e611eb..b1a124f 100644 --- a/animism-align/frontend/app/views/venue/components/venue.form.js +++ b/animism-align/frontend/app/views/venue/components/venue.form.js @@ -155,14 +155,6 @@ export default class VenueForm extends Component { /> <TextArea - title="Curator" - name="curator" - data={data.settings} - onChange={this.handleSettingsChangeEvent} - autoComplete="off" - /> - - <TextArea title="Artists" name="artists" data={data.settings} @@ -170,23 +162,6 @@ export default class VenueForm extends Component { autoComplete="off" /> - <TextInput - title="Publication Heading" - name="publication_heading" - required - data={data.settings} - onChange={this.handleSettingsChangeEvent} - autoComplete="off" - /> - - <TextArea - title="Publication" - name="publication" - data={data.settings} - onChange={this.handleSettingsChangeEvent} - autoComplete="off" - /> - <TextArea title="Credits" name="credits" diff --git a/animism-align/frontend/app/views/venue/venue.css b/animism-align/frontend/app/views/venue/venue.css index fc9f36d..e19c170 100644 --- a/animism-align/frontend/app/views/venue/venue.css +++ b/animism-align/frontend/app/views/venue/venue.css @@ -13,4 +13,9 @@ .venue-list div a { display: block; margin-bottom: 0.25rem; -}
\ No newline at end of file +} + +.venueContainer textarea[name="credits"] { + width: 30rem; + height: 20rem; +} diff --git a/animism-align/frontend/app/views/viewer/checklist/credits.components.js b/animism-align/frontend/app/views/viewer/checklist/credits.components.js new file mode 100644 index 0000000..6063843 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/checklist/credits.components.js @@ -0,0 +1,112 @@ +import React from 'react' +import { connect } from 'react-redux' +import { Arrow } from '../nav/viewer.icons' +import { parseCredits } from 'app/utils/viewer.utils' + +const VenuesComponent = ({ venues }) => { + // const [ open, setOpen ] = React.useState(-1) + return ( + <div className='site-credits'> + <div className='credits-title'> + Previous venues + </div> + {venues.order.map(id => ( + <CreditsVenue + key={id} + venue={venues.lookup[id]} + /> + ))} + </div> + ) +} + +const mapStateToProps = state => ({ + episodes: state.episode.index, + venues: state.venue.index, +}) + +export const Venues = connect(mapStateToProps)(VenuesComponent) + +export const CreditsColumns = ({ lines }) => { + const creditSections = parseCredits(lines) + return ( + <div className='credits'> + {creditSections.map(section => ( + <div key={section.i}> + <div className='credits-title'> + {section.title} + </div> + <div className='credits-info'> + {section.lines.map((line, j) => ( + <div + key={j} + dangerouslySetInnerHTML={{ __html: line || " " }} + /> + ))} + </div> + </div> + ))} + </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> + )} + </div> + ) +} diff --git a/animism-align/frontend/app/views/viewer/checklist/credits.content.js b/animism-align/frontend/app/views/viewer/checklist/credits.content.js index 8683563..29e534e 100644 --- a/animism-align/frontend/app/views/viewer/checklist/credits.content.js +++ b/animism-align/frontend/app/views/viewer/checklist/credits.content.js @@ -2,8 +2,8 @@ import React, { Component } from 'react' import { Schedule, - Credits, } from '../player/components.inline/inline.utility' +import { Venues } from './credits.components' import SubscriptionForm from '../forms/subscription.form' @@ -15,7 +15,7 @@ export default class CreditsContent extends Component { <span>Credits</span> </div> <Schedule /> - <Credits /> + <Venues /> <SubscriptionForm /> </div> ) diff --git a/animism-align/frontend/app/views/viewer/checklist/credits.css b/animism-align/frontend/app/views/viewer/checklist/credits.css new file mode 100644 index 0000000..730813d --- /dev/null +++ b/animism-align/frontend/app/views/viewer/checklist/credits.css @@ -0,0 +1,82 @@ +/* schedule credits */ + +.credits-content { + font-size: 0.875rem; +} +.credits-content a { + color: #000; + text-decoration: none; + border-bottom: 1px solid; +} +.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; + min-height: 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; +}
\ No newline at end of file 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; -} diff --git a/animism-align/frontend/app/views/viewer/viewer.container.js b/animism-align/frontend/app/views/viewer/viewer.container.js index 6395a68..dde5ba6 100644 --- a/animism-align/frontend/app/views/viewer/viewer.container.js +++ b/animism-align/frontend/app/views/viewer/viewer.container.js @@ -12,6 +12,7 @@ import './sections/subscribe.css' import './sections/footnotes.css' import './transcript/transcript.css' import './checklist/checklist.css' +import './checklist/credits.css' import './modals/modals.css' import './forms/forms.css' import './player/player.container.css' |