From 3499c61481bd6c5e9081814f959f38c5d0f5c68d Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Fri, 9 Oct 2020 16:25:08 +0200
Subject: width of these elements

---
 .../views/viewer/checklist/checklist.container.js  | 29 ++++++++---
 .../app/views/viewer/checklist/checklist.css       |  3 +-
 .../app/views/viewer/checklist/credits.content.js  | 23 +++++++++
 .../app/views/viewer/forms/subscription.form.js    | 14 +++++-
 .../app/views/viewer/player/player.container.js    |  1 -
 .../app/views/viewer/player/player.credits.js      | 25 ----------
 .../app/views/viewer/sections/sections.css         | 15 ++++--
 .../views/viewer/sections/viewer.sections.nav.js   | 58 ++++++++++++----------
 8 files changed, 103 insertions(+), 65 deletions(-)
 create mode 100644 animism-align/frontend/app/views/viewer/checklist/credits.content.js
 delete mode 100644 animism-align/frontend/app/views/viewer/player/player.credits.js

(limited to 'animism-align/frontend')

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>
     )
-- 
cgit v1.2.3-70-g09d2