diff options
| author | Jules Laplace <julescarbon@gmail.com> | 2020-11-09 21:29:54 +0100 |
|---|---|---|
| committer | Jules Laplace <julescarbon@gmail.com> | 2020-11-09 21:29:54 +0100 |
| commit | c6a1d5be32ea77d87e88f8bc3f90e82b69ce1c83 (patch) | |
| tree | 235d138388cd4e23f0172d776ee9fc959ea63cee | |
| parent | 51767eeabfb4f2fbddc2f1c9e6f83f3b9c01e754 (diff) | |
animate open
| -rw-r--r-- | animism-align/frontend/app/views/viewer/checklist/credits.components.js | 36 | ||||
| -rw-r--r-- | animism-align/frontend/app/views/viewer/checklist/credits.css | 11 |
2 files changed, 27 insertions, 20 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 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 |