animate credits height

2 files changed, 16 insertions, 4 deletions

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 d466c5d..3e03ace 100644
--- a/animism-align/frontend/app/views/viewer/checklist/credits.components.js
+++ b/animism-align/frontend/app/views/viewer/checklist/credits.components.js
@@ -90,7 +90,7 @@ const CreditsVenue = ({ venue, open, setOpen }) => {
 export const ArtistColumns = ({ artists }) => {
   const artistGroups = groupColumns(artists.trim().split('\n'), 4)
   return (
-    <div className='artist-columns'>
+    <div className={'artist-columns columns-' + Math.floor(artistGroups[0].length / 2)}>
       <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 d7626f9..f4bbf42 100644
--- a/animism-align/frontend/app/views/viewer/checklist/credits.css
+++ b/animism-align/frontend/app/views/viewer/checklist/credits.css
@@ -103,7 +103,19 @@
   overflow: hidden;
   transition: height 0.5s;
 }
-.open .artist-columns,
-.open + .artist-columns {
+.open .artist-columns {
   height: 17rem;
-}
\ No newline at end of file
+}
+.open .artist-columns.columns-1,
+.open .artist-columns.columns-2,
+.open .artist-columns.columns-3 { height: 14rem; }
+.open .artist-columns.columns-4,
+.open .artist-columns.columns-5 { height: 17rem; }
+.open .artist-columns.columns-6 { height: 21rem; }
+.open .artist-columns.columns-7,
+.open .artist-columns.columns-8 { height: 23rem; }
+.open .artist-columns.columns-9,
+.open .artist-columns.columns-10 { height: 27rem; }
+.open .artist-columns.columns-11,
+.open .artist-columns.columns-12,
+.open .artist-columns.columns-13 { height: 30rem; }