diff options
3 files changed, 47 insertions, 40 deletions
diff --git a/animism-align/frontend/app/utils/viewer.utils.js b/animism-align/frontend/app/utils/viewer.utils.js index efc7a35..ef975dc 100644 --- a/animism-align/frontend/app/utils/viewer.utils.js +++ b/animism-align/frontend/app/utils/viewer.utils.js @@ -31,3 +31,12 @@ export const parseCredits = lines => { return sections } +export const groupColumns = (lines, cols) => { + const perColumn = Math.floor(lines.length / cols) + const columns = [] + for (let i = 0; i < cols; i++) { + columns.push(lines.slice(i * perColumn, (i+1) * perColumn)) + } + return columns +} + diff --git a/animism-align/frontend/app/views/viewer/checklist/credits.components.js b/animism-align/frontend/app/views/viewer/checklist/credits.components.js index 6063843..de24639 100644 --- a/animism-align/frontend/app/views/viewer/checklist/credits.components.js +++ b/animism-align/frontend/app/views/viewer/checklist/credits.components.js @@ -1,10 +1,10 @@ import React from 'react' import { connect } from 'react-redux' import { Arrow } from '../nav/viewer.icons' -import { parseCredits } from 'app/utils/viewer.utils' +import { parseCredits, groupColumns } from 'app/utils/viewer.utils' -const VenuesComponent = ({ venues }) => { - // const [ open, setOpen ] = React.useState(-1) +const VenuesList = ({ venues }) => { + const [ open, setOpen ] = React.useState(-1) return ( <div className='site-credits'> <div className='credits-title'> @@ -14,6 +14,8 @@ const VenuesComponent = ({ venues }) => { <CreditsVenue key={id} venue={venues.lookup[id]} + open={open} + setOpen={setOpen} /> ))} </div> @@ -25,7 +27,7 @@ const mapStateToProps = state => ({ venues: state.venue.index, }) -export const Venues = connect(mapStateToProps)(VenuesComponent) +export const Venues = connect(mapStateToProps)(VenuesList) export const CreditsColumns = ({ lines }) => { const creditSections = parseCredits(lines) @@ -50,13 +52,11 @@ export const CreditsColumns = ({ lines }) => { ) } -const CreditsVenue = ({ venue }) => { - const [ open, setOpen ] = React.useState(-1) +const CreditsVenue = ({ venue, open, setOpen }) => { + // 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') + const artistGroups = groupColumns(venue.settings.artists.trim().split('\n'), 4) + const creditSections = parseCredits(venue.settings.credits) return ( <div className={isOpen ? 'venue open' : 'venue'}> <div className='venue-header' onClick={() => setOpen(isOpen ? -1 : venue.id)}> @@ -67,44 +67,34 @@ const CreditsVenue = ({ venue }) => { <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 className='venue-info'> + <div className='credits-title'> + Artists </div> - - <div> - <div className='credits-title'> - Artists - </div> - <div className='credits-info'> - {artists.map((line, i) => ( - <div key={i}>{line}</div> - ))} - </div> + <div className="credits"> + {artistGroups.map((group, i) => ( + <div className='credits-info' key={i}> + {group.map((line, j) => ( + <div key={j}>{line}</div> + ))} + </div> + ))} </div> - - {publication.length > 1 && ( - <div> + {creditSections.map(section => ( + <div key={section.i}> <div className='credits-title'> - {publication_heading} + {section.title} </div> - <div className='credits-info'> - {publication.map((line, i) => ( + <div className='credits-info-wide'> + {section.lines.map((line, j) => ( <div - key={i} + key={j} dangerouslySetInnerHTML={{ __html: line || " " }} /> ))} </div> </div> - )} + ))} </div> )} </div> diff --git a/animism-align/frontend/app/views/viewer/checklist/credits.css b/animism-align/frontend/app/views/viewer/checklist/credits.css index 730813d..b44aaf2 100644 --- a/animism-align/frontend/app/views/viewer/checklist/credits.css +++ b/animism-align/frontend/app/views/viewer/checklist/credits.css @@ -36,7 +36,15 @@ padding-left: 1rem; text-indent: -1rem; min-height: 1rem; - } +} +.credits-info-wide { + padding: 0.375rem 0; + white-space: pre-line; + line-height: 1.3; +} +.credits-info-wide div { + min-height: 1rem; +} /* site credits */ @@ -74,7 +82,7 @@ height: 2.5rem; transform: translateX(0.6rem) translateY(-0.5rem); } -.venue-info.credits { +.venue-info .credits { padding-top: 0rem; } .venue-info .credits-info div { |