hanging indent

2 files changed, 119 insertions, 6 deletions

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 0ffcd7c..83996a7 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,6 +2,7 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
 import { MediaCitation } from '../components.media'
+import { Arrow } from '../../nav/viewer.icons'
 
 export const Intro = ({ paragraph, media, onAnnotationClick }) => {
   const annotation = paragraph.annotations[0]
@@ -49,7 +50,7 @@ const ScheduleComponent = ({ episodes }) => {
         {'the exhibition will be released in four episodes starting October 2020.'}
       </div>
       <div className='schedule'>
-        <div className='schedule-title'>Schedule</div>
+        <div className='schedule-heading'>Schedule</div>
         {episodes.order.map(id => {
           const episode = episodes.lookup[id]
           return (
@@ -97,6 +98,7 @@ const ScheduleComponent = ({ episodes }) => {
 
 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 (
@@ -114,14 +116,81 @@ const CreditsComponent = ({ episodes, venues }) => {
   })
   return (
     <div className='site-credits'>
-      {lines}
+      <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 />
+    <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/player/player.transcript.css b/animism-align/frontend/app/views/viewer/player/player.transcript.css
index ce4d143..72faf7b 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -294,7 +294,10 @@
   display: flex;
   flex-direction: row;
   align-items: flex-start;
-  border-top: 1px solid;
+  border-bottom: 1px solid;
+}
+.schedule-row:last-child {
+  border-bottom: 0;
 }
 .schedule-row.inactive {
   color: #888;
@@ -305,6 +308,12 @@
 .schedule-title {
   width: 35rem;
 }
+.schedule-heading {
+  border-bottom: 1px solid;
+}
+
+/* schedule credits */
+
 .credits {
   display: flex;
   flex-direction: row;
@@ -327,17 +336,52 @@
 .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 .credits-title {
+.site-credits .site-lines .credits-title {
   margin-bottom: 0.375rem;
 }
-.site-credits div {
+
+/* 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;
 }