diff options
Diffstat (limited to 'animism-align/frontend/app/views')
8 files changed, 103 insertions, 65 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 3a441fa..7a8db0e 100644 --- a/animism-align/frontend/app/views/viewer/checklist/checklist.container.js +++ b/animism-align/frontend/app/views/viewer/checklist/checklist.container.js @@ -1,9 +1,11 @@ import React, { Component } from 'react' +import { connect } from 'react-redux' import actions from 'app/actions' import ChecklistDropdown from './checklist.dropdown' import ChecklistContent from './checklist.content' +import CreditsContent from './credits.content' class Checklist extends Component { state = { @@ -20,16 +22,27 @@ class Checklist extends Component { const { currentSection } = this.state return ( <div className="checklist"> - <ChecklistDropdown - currentSection={currentSection} - onChange={this.handleSectionChange} - /> - <ChecklistContent - currentSection={currentSection} - /> + (viewer.checklist && ( + <div> + <ChecklistDropdown + currentSection={currentSection} + onChange={this.handleSectionChange} + /> + <ChecklistContent + currentSection={currentSection} + /> + </div> + ) + (viewer.credits && ( + <CreditsContent /> + )) </div> ) } } -export default Checklist +const mapStateToProps = state => ({ + viewer: state.viewer, +}) + +export default connect(mapStateToProps)(Checklist) diff --git a/animism-align/frontend/app/views/viewer/checklist/checklist.css b/animism-align/frontend/app/views/viewer/checklist/checklist.css index efb4de3..c805ed9 100644 --- a/animism-align/frontend/app/views/viewer/checklist/checklist.css +++ b/animism-align/frontend/app/views/viewer/checklist/checklist.css @@ -71,7 +71,8 @@ /* checklist content */ -.checklist-content { +.checklist-content, +.credits-content { flex: 1; height: 100%; overflow-x: hidden; diff --git a/animism-align/frontend/app/views/viewer/checklist/credits.content.js b/animism-align/frontend/app/views/viewer/checklist/credits.content.js new file mode 100644 index 0000000..8683563 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/checklist/credits.content.js @@ -0,0 +1,23 @@ +import React, { Component } from 'react' + +import { + Schedule, + Credits, +} from '../player/components.inline/inline.utility' + +import SubscriptionForm from '../forms/subscription.form' + +export default class CreditsContent extends Component { + render() { + return ( + <div className='credits-content'> + <div className='section_heading'> + <span>Credits</span> + </div> + <Schedule /> + <Credits /> + <SubscriptionForm /> + </div> + ) + } +} diff --git a/animism-align/frontend/app/views/viewer/forms/subscription.form.js b/animism-align/frontend/app/views/viewer/forms/subscription.form.js index 3d863cb..9353e3e 100644 --- a/animism-align/frontend/app/views/viewer/forms/subscription.form.js +++ b/animism-align/frontend/app/views/viewer/forms/subscription.form.js @@ -42,7 +42,19 @@ export default class SubscriptionForm extends Component { onKeyDown={this.handleKeyDown} onChange={this.handleChange} /> - <Arrow type='right' /> + <label className="subscription-privacy"> + <span> + {"I have read e-flux’s privacy policy "} + {"and agree that e-flux may send me emails to the email address "} + {"entered above and that my data will be processed for this "} + {"purpose in accordance with e-flux’s "} + <a href="/privacy">privacy policy.</a> + </span> + </label> + <button onClick={this.handleSubmit}> + {'Submit '} + <Arrow type='right' /> + </button> </form> ) } diff --git a/animism-align/frontend/app/views/viewer/player/player.container.js b/animism-align/frontend/app/views/viewer/player/player.container.js index e940bfa..0b9ac11 100644 --- a/animism-align/frontend/app/views/viewer/player/player.container.js +++ b/animism-align/frontend/app/views/viewer/player/player.container.js @@ -5,7 +5,6 @@ import actions from 'app/actions' import { floatInRange, clamp } from 'app/utils' import PlayerTranscript from './player.transcript' -import PlayerCredits from './player.credits' import PlayerFullscreen from './player.fullscreen' class PlayerContainer extends Component { diff --git a/animism-align/frontend/app/views/viewer/player/player.credits.js b/animism-align/frontend/app/views/viewer/player/player.credits.js deleted file mode 100644 index 7a44d57..0000000 --- a/animism-align/frontend/app/views/viewer/player/player.credits.js +++ /dev/null @@ -1,25 +0,0 @@ -import React, { Component } from 'react' - -import { - Schedule, - Credits, -} from './components.inline/inline.utility' - -import SubscriptionForm from '../forms/subscription.form' - -export default class PlayerCredits extends Component { - render() { - return ( - <div className="player-transcript player-credits"> - <div className='content'> - <div className='section_heading'> - <span>Credits</span> - </div> - <Schedule /> - <Credits /> - <SubscriptionForm /> - </div> - </div> - ) - } -} diff --git a/animism-align/frontend/app/views/viewer/sections/sections.css b/animism-align/frontend/app/views/viewer/sections/sections.css index 9e3bcda..fd48f55 100644 --- a/animism-align/frontend/app/views/viewer/sections/sections.css +++ b/animism-align/frontend/app/views/viewer/sections/sections.css @@ -32,16 +32,22 @@ background: black; padding: 0; } +.sections-nav.viewer-nav > .nav-row > div { + width: auto; +} .sections-nav .link { position: relative; height: 3rem; padding: 0.25rem 1rem 0.25rem 0.25rem; } +.sections-nav .credits-link { + border-left: 1px solid white; +} .sections-nav .subscribe-link { - border-right: 1px solid white; + border-left: 1px solid white; } .sections-nav .share-link { - border-right: 1px solid white; + border-left: 1px solid white; } .sections-nav .footnotes-link { border-left: 1px solid white; @@ -50,8 +56,11 @@ padding-left: 1rem; border-left: 1px solid white; } -.sections-nav .checklist-element { +.sections-nav > .nav-row > div.credits-element, +.sections-nav > .nav-row > div.checklist-element { cursor: pointer; + flex: 1; + justify-content: flex-start; } /* scrolling part */ 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 1825732..f4162ba 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 @@ -14,40 +14,46 @@ class ViewerSectionsNav extends Component { return ( <div className="viewer-nav sections-nav"> <div className='nav-row'> - <div> - <div className="share-link link"> - <ViewerSectionsShare /> - <span onClick={() => actions.viewer.showNavComponent('share')}> - <Arrow type={'up'} /> - {'Share'} - </span> - </div> - <div className="subscribe-link link"> - <ViewerSectionsSubscribe /> - <span onClick={() => actions.viewer.showNavComponent('subscribe')}> - <Arrow type={viewer.subscribe ? 'down' : 'up'} /> - {'Subscribe'} - </span> - </div> - </div> + <div className="checklist-element" onClick={() => actions.viewer.toggleNavComponent('checklist')}> <div className="checklist-link link"> <Arrow type={viewer.checklist ? 'down': 'up'} /> {'Checklist'} </div> </div> - <div className='footnotes-element'> - <div className="footnotes-link link"> - <span onClick={() => actions.viewer.showNavComponent('footnotes')}> - <Arrow type={viewer.footnotes ? 'down' : 'up'} /> - {'Notes'} - </span> - </div> - <div className="transcript-link link" onClick={() => actions.viewer.openTranscript()}> - {'Transcript'} + + <div className="credits-element" onClick={() => actions.viewer.toggleNavComponent('credits')}> + <div className="credits-link link"> + <Arrow type={viewer.credits ? 'down': 'up'} /> + {'Credits'} </div> - <ViewerSectionsFootnotes /> </div> + + <div className="subscribe-link link"> + <ViewerSectionsSubscribe /> + <span onClick={() => actions.viewer.showNavComponent('subscribe')}> + <Arrow type={viewer.subscribe ? 'down' : 'up'} /> + {'Subscribe'} + </span> + </div> + <div className="share-link link"> + <ViewerSectionsShare /> + <span onClick={() => actions.viewer.showNavComponent('share')}> + <Arrow type={'up'} /> + {'Share'} + </span> + </div> + <div className="footnotes-link link"> + <span onClick={() => actions.viewer.showNavComponent('footnotes')}> + <Arrow type={viewer.footnotes ? 'down' : 'up'} /> + {'Notes'} + </span> + </div> + <div className="transcript-link link" onClick={() => actions.viewer.openTranscript()}> + {'Transcript'} + </div> + <ViewerSectionsFootnotes /> + </div> </div> ) |