checklist scrolling

4 files changed, 36 insertions, 12 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 c99eaa8..98737d2 100644
--- a/animism-align/frontend/app/views/viewer/checklist/checklist.container.js
+++ b/animism-align/frontend/app/views/viewer/checklist/checklist.container.js
@@ -29,9 +29,12 @@ class Checklist extends Component {
               checklistSection={checklistSection}
               onChange={this.handleSectionChange}
             />
-            <ChecklistContent
-              checklistSection={checklistSection}
-            />
+            <div className="checklist-inner">
+              <div className="checklist-dropdown-placeholder" />
+              <ChecklistContent
+                checklistSection={checklistSection}
+              />
+            </div>
           </div>
         )}
         {viewer.credits && (
diff --git a/animism-align/frontend/app/views/viewer/checklist/checklist.css b/animism-align/frontend/app/views/viewer/checklist/checklist.css
index e7ffb00..a572b84 100644
--- a/animism-align/frontend/app/views/viewer/checklist/checklist.css
+++ b/animism-align/frontend/app/views/viewer/checklist/checklist.css
@@ -21,12 +21,18 @@
 }
 
 .checklist-container {
-  margin: 0 auto;
+  width: 100%;
   height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.checklist-inner {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: flex-start;
+  margin: 0 auto;
+  width: 68rem;
 }
 
 /* dropdown */
@@ -34,8 +40,13 @@
 .checklist-dropdown-container {
   width: 12rem;
   margin-top: 1.5rem;
-  margin-left: 1.5rem;
   cursor: pointer;
+  position: relative;
+  position: absolute;
+  left: calc(50% - 33rem);
+}
+.checklist-dropdown-placeholder {
+  width: 13.5rem;
 }
 .checklist-dropdown {
   display: flex;
@@ -79,12 +90,8 @@
 
 /* checklist content */
 
-.checklist-content,
-.credits-content {
+.checklist-content {
   flex: 1;
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
 }
 .checklist-table {
   width: 51rem;
diff --git a/animism-align/frontend/app/views/viewer/checklist/checklist.dropdown.js b/animism-align/frontend/app/views/viewer/checklist/checklist.dropdown.js
index 58695e0..aa105d1 100644
--- a/animism-align/frontend/app/views/viewer/checklist/checklist.dropdown.js
+++ b/animism-align/frontend/app/views/viewer/checklist/checklist.dropdown.js
@@ -19,24 +19,34 @@ class ChecklistDropdown extends Component {
   render() {
     const { sections, checklistSection } = this.props
     const { open } = this.state
+    const showingAll = checklistSection === 'all'
+    let dropdownHeight = sections.length * 2
+    if (!showingAll) {
+      dropdownHeight += 2
+    }
     return (
       <div className="checklist-dropdown-column">
         <div className="checklist-dropdown-container">
           <div className="checklist-dropdown" onClick={() => this.handleOpen()}>
-            {checklistSection === 'all' ? 'View All' : 'Section ' + ROMAN_NUMERALS[checklistSection]}
+            {showingAll ? 'View All' : 'Section ' + ROMAN_NUMERALS[checklistSection]}
             <div className='arrow-box'>
               <Arrow type={open ? 'up' : 'down'} />
             </div>
           </div>
           <div
             className={open ? "checklist-dropdown-options open" : "checklist-dropdown-options"}
-            style={{ height: open ? ((sections.length * 2) + 'rem') : 0 }}
+            style={{ height: open ? ((dropdownHeight) + 'rem') : 0 }}
           >
             {sections.map(section => (
               <div key={section.index} onClick={() => this.handleSelect(section.index)}>
                 {'Section '}{ROMAN_NUMERALS[section.index]}
               </div>
             ))}
+            {!showingAll &&
+              <div onClick={() => this.handleSelect('all')}>
+                {'View All'}
+              </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 aecc914..0375703 100644
--- a/animism-align/frontend/app/views/viewer/checklist/credits.css
+++ b/animism-align/frontend/app/views/viewer/checklist/credits.css
@@ -1,6 +1,10 @@
 /* schedule credits */
 
 .credits-content {
+  flex: 1;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
   font-size: 0.875rem;
 }
 .credits {