checklist

3 files changed, 18 insertions, 4 deletions

diff --git a/animism-align/frontend/app/views/viewer/checklist/checklist.container.js b/animism-align/frontend/app/views/viewer/checklist/checklist.container.js
index 11310e7..c99eaa8 100644
--- a/animism-align/frontend/app/views/viewer/checklist/checklist.container.js
+++ b/animism-align/frontend/app/views/viewer/checklist/checklist.container.js
@@ -23,8 +23,8 @@ class Checklist extends Component {
     const { checklistSection } = this.state
     return (
       <div className="checklist">
-        {viewer.checklist && (
-          <div>
+        {!viewer.credits && (
+          <div className="checklist-container">
             <ChecklistDropdown
               checklistSection={checklistSection}
               onChange={this.handleSectionChange}
diff --git a/animism-align/frontend/app/views/viewer/checklist/checklist.css b/animism-align/frontend/app/views/viewer/checklist/checklist.css
index c805ed9..e7ffb00 100644
--- a/animism-align/frontend/app/views/viewer/checklist/checklist.css
+++ b/animism-align/frontend/app/views/viewer/checklist/checklist.css
@@ -20,6 +20,14 @@
   transform: translateZ(0) translateY(0);
 }
 
+.checklist-container {
+  margin: 0 auto;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
 
 /* dropdown */
 
diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js
index f4162ba..1c0f49d 100644
--- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js
@@ -15,14 +15,20 @@ class ViewerSectionsNav extends Component {
       <div className="viewer-nav sections-nav">
         <div className='nav-row'>
 
-          <div className="checklist-element" onClick={() => actions.viewer.toggleNavComponent('checklist')}>
+          <div className="checklist-element" onClick={() => {
+              actions.viewer.hideNavComponent('credits')
+              actions.viewer.toggleNavComponent('checklist')
+            }}>
             <div className="checklist-link link">
               <Arrow type={viewer.checklist ? 'down': 'up'} />
               {'Checklist'}
             </div>
           </div>
 
-          <div className="credits-element" onClick={() => actions.viewer.toggleNavComponent('credits')}>
+          <div className="credits-element" onClick={() => {
+              actions.viewer.hideNavComponent('checklist')
+              actions.viewer.toggleNavComponent('credits')
+            }}>
             <div className="credits-link link">
               <Arrow type={viewer.credits ? 'down': 'up'} />
               {'Credits'}