From 9ed29c74de68a335e85cc589983d30950a0ba044 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 14 Oct 2020 19:38:27 +0200 Subject: credits in columns --- .../player/components.inline/inline.utility.js | 146 +++------------------ .../app/views/viewer/player/player.transcript.css | 78 +---------- 2 files changed, 19 insertions(+), 205 deletions(-) (limited to 'animism-align/frontend/app/views/viewer/player') 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 (
- {'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, '} + Animism + {' on '} + e-flux.com + {' 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.'} +

+ {'Presented here in its digital iteration, '} {'the exhibition will be released in four episodes starting October 2020.'}
-
Schedule
+
Episodes
{episodes.order.map(id => { const episode = episodes.lookup[id] return ( @@ -66,129 +73,7 @@ const ScheduleComponent = ({ episodes }) => { ) })}
-
-
-
- Curator -
-
- {currentEpisode.curator} -
-
-
-
- Author -
-
- {currentEpisode.author} -
-
-
-
- Artists -
-
- {currentEpisode.artists} -
-
-
-
- ) -} - -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 ( -
- {s.replace("#", "").trim()} -
- ) - } - return ( -
- ) - }) - return ( -
-
- {lines} -
-
- Previous venues -
- {venues.order.map(id => ( - - ))} -
- ) -} - -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 ( -
-
setOpen(isOpen ? -1 : venue.id)}> -
- {venue.title}
- {venue.date} -
- -
- {isOpen && ( -
-
-
- {curators.length > 1 ? 'Curators' : 'Curator'} -
-
- {curators.map((line, i) => ( -
{line}
- ))} -
-
- -
-
- Artists -
-
- {artists.map((line, i) => ( -
{line}
- ))} -
-
- - {publication.length > 1 && ( -
-
- {publication_heading} -
-
- {publication.map((line, i) => ( -
- ))} -
-
- )} -
- )} +
) } @@ -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; -} -- cgit v1.2.3-70-g09d2