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 --- .../views/viewer/checklist/credits.components.js | 112 ++++++++++++++++ .../app/views/viewer/checklist/credits.content.js | 4 +- .../app/views/viewer/checklist/credits.css | 82 ++++++++++++ .../player/components.inline/inline.utility.js | 146 +++------------------ .../app/views/viewer/player/player.transcript.css | 78 +---------- .../frontend/app/views/viewer/viewer.container.js | 1 + 6 files changed, 216 insertions(+), 207 deletions(-) create mode 100644 animism-align/frontend/app/views/viewer/checklist/credits.components.js create mode 100644 animism-align/frontend/app/views/viewer/checklist/credits.css (limited to 'animism-align/frontend/app/views/viewer') 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 ( +
+
+ Previous venues +
+ {venues.order.map(id => ( + + ))} +
+ ) +} + +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 ( +
+ {creditSections.map(section => ( +
+
+ {section.title} +
+
+ {section.lines.map((line, j) => ( +
+ ))} +
+
+ ))} +
+ ) +} + +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) => ( +
+ ))} +
+
+ )} +
+ )} +
+ ) +} 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 { Credits
- +
) 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 (
- {'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; -} 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' -- cgit v1.2.3-70-g09d2