From c6a1d5be32ea77d87e88f8bc3f90e82b69ce1c83 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Mon, 9 Nov 2020 21:29:54 +0100
Subject: animate open

---
 .../views/viewer/checklist/credits.components.js   | 36 ++++++++++------------
 .../app/views/viewer/checklist/credits.css         | 11 ++++++-
 2 files changed, 27 insertions(+), 20 deletions(-)

(limited to 'animism-align/frontend')

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 91855ef..d466c5d 100644
--- a/animism-align/frontend/app/views/viewer/checklist/credits.components.js
+++ b/animism-align/frontend/app/views/viewer/checklist/credits.components.js
@@ -65,26 +65,24 @@ const CreditsVenue = ({ venue, open, setOpen }) => {
         </div>
         <Arrow type={isOpen ? 'up' : 'down'} />
       </div>
-      {isOpen && (
-        <div className='venue-info'>
-          <ArtistColumns artists={venue.settings.artists} />
-          {creditSections.map(section => (
-            <div key={section.i}>
-              <div className='credits-title'>
-                {section.title}
-              </div>
-              <div className='credits-info-wide'>
-                {section.lines.map((line, j) => (
-                  <div
-                    key={j}
-                    dangerouslySetInnerHTML={{ __html: line || " " }}
-                  />
-                ))}
-              </div>
+      <div className='venue-info'>
+        <ArtistColumns artists={venue.settings.artists} />
+        {creditSections.map(section => (
+          <div key={section.i}>
+            <div className='credits-title'>
+              {section.title}
             </div>
-          ))}
-        </div>
-      )}
+            <div className='credits-info-wide'>
+              {section.lines.map((line, j) => (
+                <div
+                  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 8dda469..d7626f9 100644
--- a/animism-align/frontend/app/views/viewer/checklist/credits.css
+++ b/animism-align/frontend/app/views/viewer/checklist/credits.css
@@ -81,6 +81,14 @@
   height: 2.5rem;
   transform: translateX(0.6rem) translateY(-0.5rem);
 }
+.venue-info {
+  transition: height 0.5s;
+  overflow: hidden;
+  height: 0;
+}
+.open .venue-info {
+  height: 40rem;
+}
 .venue-info .credits {
   padding-top: 0rem;
 }
@@ -95,6 +103,7 @@
   overflow: hidden;
   transition: height 0.5s;
 }
+.open .artist-columns,
 .open + .artist-columns {
-  height: 10rem;
+  height: 17rem;
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2