diff options
Diffstat (limited to 'animism-align/frontend')
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 { |