From 51767eeabfb4f2fbddc2f1c9e6f83f3b9c01e754 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Mon, 9 Nov 2020 21:06:34 +0100
Subject: artists animation

---
 .../views/viewer/checklist/credits.components.js   |  2 +-
 .../app/views/viewer/checklist/credits.css         | 11 +++++++++++
 .../player/components.inline/inline.utility.js     | 23 +++++++++++-----------
 .../views/viewer/player/components.media/media.css | 14 +++++++------
 4 files changed, 31 insertions(+), 19 deletions(-)

(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
index 9e0b6f2..91855ef 100644
--- a/animism-align/frontend/app/views/viewer/checklist/credits.components.js
+++ b/animism-align/frontend/app/views/viewer/checklist/credits.components.js
@@ -92,7 +92,7 @@ const CreditsVenue = ({ venue, open, setOpen }) => {
 export const ArtistColumns = ({ artists }) => {
   const artistGroups = groupColumns(artists.trim().split('\n'), 4)
   return (
-    <div>
+    <div className='artist-columns'>
       <div className='credits-title'>
         Artists
       </div>
diff --git a/animism-align/frontend/app/views/viewer/checklist/credits.css b/animism-align/frontend/app/views/viewer/checklist/credits.css
index 0375703..8dda469 100644
--- a/animism-align/frontend/app/views/viewer/checklist/credits.css
+++ b/animism-align/frontend/app/views/viewer/checklist/credits.css
@@ -86,4 +86,15 @@
 }
 .venue-info .credits-info div {
   min-height: 0.875rem;
+}
+
+/* artists */
+
+.artist-columns {
+  height: 0;
+  overflow: hidden;
+  transition: height 0.5s;
+}
+.open + .artist-columns {
+  height: 10rem;
 }
\ 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 17d0990..59d1ff5 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
@@ -47,13 +47,12 @@ const ScheduleComponent = ({ episodes }) => {
         <i>Animism</i>
         {' on '}
         <a href="https://e-flux.com/">e-flux.com</a>
-        {' 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.'}
+        {' '}
+        {'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.'}
         <br/><br/>
         {'Presented here in its digital iteration, '}
         {'the exhibition will be released in four episodes starting October 2020.'}
@@ -63,6 +62,7 @@ const ScheduleComponent = ({ episodes }) => {
         {episodes.order.map(id => {
           const episode = episodes.lookup[id]
           const isOpen = episode.id === open
+          const hasTitle = !!episode.title && episode.title !== "TBD"
           let className = 'schedule-row'
           if (episode.is_live) {
             className += ' active'
@@ -82,14 +82,13 @@ const ScheduleComponent = ({ episodes }) => {
                   {episode.release_date}
                 </div>
                 <div className='schedule-title'>
-                  {'Episode '}{episode.episode_number}{': '}
-                  <i>{episode.title}</i>
+                  {'Episode '}{episode.episode_number}
+                  {hasTitle && ': '}
+                  {hasTitle && <i>{episode.title}</i>}
                 </div>
                 {episode.is_live && <Arrow type={isOpen ? 'up' : 'down'} />}
               </div>
-              {isOpen &&
-                <ArtistColumns artists={episode.settings.artists} />
-              }
+              <ArtistColumns artists={episode.settings.artists} />
             </div>
           )
         })}
diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.css b/animism-align/frontend/app/views/viewer/player/components.media/media.css
index 72eec07..6f9e96a 100644
--- a/animism-align/frontend/app/views/viewer/player/components.media/media.css
+++ b/animism-align/frontend/app/views/viewer/player/components.media/media.css
@@ -51,6 +51,11 @@
 .viewer-fullscreen .carousel-component .nav-arrow {
   max-height: calc(100vh - 19rem);
 }
+.carousel-component .nav-arrow polygon {
+  fill: #fff;
+  stroke-width: 0.1px;
+  stroke: #444;
+}
 .carousel-component .nav-arrow.prev {
   left: 0;
 }
@@ -61,20 +66,17 @@
   background: transparent;
   outline: 0;
 }
+/*
 .carousel-component .nav-arrow:hover {
   backdrop-filter: contrast(344%) grayscale(100%);
   background: rgba(255,255,255,0.9)
 }
-/*.white .carousel-component .nav-arrow { background: rgba(255,255,255,0.0); }
-.white .carousel-component .nav-arrow:hover { background: rgba(255,255,255,0.0); }
-*/.black .carousel-component .nav-arrow { background: rgba(0,0,0,0.0); }
-.black .carousel-component .nav-arrow:hover { background: rgba(0,0,0,0.0); }
-.carousel-component .arrow {
+*/.carousel-component .arrow {
    width: 4rem;
 }
 .carousel-component .arrow-disabled {
   cursor: default;
-  opacity: 0.2;
+  opacity: 0.0;
 }
 .carousel-component .dots {
   position: absolute;
-- 
cgit v1.2.3-70-g09d2