From abf5ce5644f7fca739a75349ef1859efd7c57e6c Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Wed, 14 Oct 2020 20:18:55 +0200
Subject: redo credits

---
 animism-align/frontend/app/utils/viewer.utils.js   |  9 +++
 .../views/viewer/checklist/credits.components.js   | 66 +++++++++-------------
 .../app/views/viewer/checklist/credits.css         | 12 +++-
 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 {
-- 
cgit v1.2.3-70-g09d2