From c35369a6bdee0de466765bb08f3bd27c6c93ce17 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Wed, 21 Oct 2020 18:56:42 +0200
Subject: style subscription form

---
 .../frontend/app/views/viewer/forms/forms.css      |  8 +-
 .../app/views/viewer/forms/subscription.form.js    | 72 ++++++++++++-----
 .../frontend/app/views/viewer/nav/viewer.router.js |  8 ++
 .../app/views/viewer/sections/footnotes.css        |  2 +-
 .../frontend/app/views/viewer/sections/share.css   |  3 +-
 .../app/views/viewer/sections/subscribe.css        | 91 +++++++++++++++++++---
 6 files changed, 149 insertions(+), 35 deletions(-)

(limited to 'animism-align/frontend/app')

diff --git a/animism-align/frontend/app/views/viewer/forms/forms.css b/animism-align/frontend/app/views/viewer/forms/forms.css
index 5e9d698..e50f1c9 100644
--- a/animism-align/frontend/app/views/viewer/forms/forms.css
+++ b/animism-align/frontend/app/views/viewer/forms/forms.css
@@ -11,7 +11,7 @@
   margin-bottom: 13rem;
   position: relative;
 }
-.player-transcript .subscription-form input {
+.player-transcript .subscription-form input[type='email'] {
   font-family: "Freight Text", serif;
   font-size: 3.5rem;
   border-bottom: 1px solid #000;
@@ -22,15 +22,15 @@
   padding: 0;
   width: 100%;
 }
-.player-transcript .subscription-form input::placeholder {
+.player-transcript .subscription-form input[type='email']::placeholder {
   color: #bbb;
   border-bottom: 1px solid #bbb;
 }
 .player-transcript .subscription-form input[type='email']:invalid {
   border-bottom: 1px solid #bbb;
 }
-.player-transcript .subscription-form input:focus,
-.player-transcript .subscription-form input:focus:invalid {
+.player-transcript .subscription-form input[type='email']:focus,
+.player-transcript .subscription-form input[type='email']:focus:invalid {
   background: transparent;
   border: 0;
   outline: 0;
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 9353e3e..8107358 100644
--- a/animism-align/frontend/app/views/viewer/forms/subscription.form.js
+++ b/animism-align/frontend/app/views/viewer/forms/subscription.form.js
@@ -2,19 +2,30 @@ import React, { Component } from 'react'
 
 import { Arrow } from '../nav/viewer.icons'
 
+const initialState = {
+  email: "",
+  agreed: false,
+  subscribed: false,
+}
+
 export default class SubscriptionForm extends Component {
   state = {
-    email: "",
+    ...initialState
   }
   constructor(props) {
     super(props)
     this.handleChange = this.handleChange.bind(this)
     this.handleKeyDown = this.handleKeyDown.bind(this)
     this.handleSubmit = this.handleSubmit.bind(this)
+    this.handleCheckbox = this.handleCheckbox.bind(this)
+    this.handleReset = this.handleReset.bind(this)
   }
   handleChange(e) {
     this.setState({ email: e.target.value })
   }
+  handleCheckbox(e) {
+    this.setState({ agreed: e.target.checked })
+  }
   handleKeyDown(e) {
     // disable tab
     if (e.keyCode === 9) {
@@ -23,26 +34,46 @@ export default class SubscriptionForm extends Component {
   }
   handleSubmit(e) {
     e.preventDefault()
+    if (!this.state.agreed) {
+      return
+    }
+    this.setState({ subscribed: true })
+  }
+  handleReset(e) {
+    this.setState({ ...initialState })
   }
   render() {
     return (
-      <form className="subscription-form" onSubmit={this.handleSubmit}>
+      <form
+        className={this.state.subscribed ? "subscription-form subscribed" : "subscription-form"}
+        onSubmit={this.handleSubmit}
+      >
         <div className="subscription-callout">
           Stay up to date and get notified when the next episode is available
         </div>
-        <input
-          required
-          type="email"
-          name="email"
-          value={this.state.email}
-          placeholder="Email address here"
-          autoCorrect="off"
-          autoCapitalize="off"
-          spellCheck="false"
-          onKeyDown={this.handleKeyDown}
-          onChange={this.handleChange}
-        />
-        <label className="subscription-privacy">
+        <div className="subscription-row">
+          <input
+            type="email"
+            name="email"
+            value={this.state.email}
+            placeholder="Email address here"
+            autoCorrect="off"
+            autoCapitalize="off"
+            spellCheck="false"
+            onKeyDown={this.handleKeyDown}
+            onChange={this.handleChange}
+          />
+          <button className="subscription-submit" onClick={this.handleSubmit}>
+            {'Submit '}
+            <Arrow type='right' />
+          </button>
+        </div>
+        <label className="subscription-privacy checkbox">
+          <input
+            type="checkbox"
+            checked={this.state.agreed}
+            onChange={this.handleCheckbox}
+          />
           <span>
             {"I have read e-flux’s privacy policy "}
             {"and agree that e-flux may send me emails to the email address "}
@@ -51,11 +82,12 @@ export default class SubscriptionForm extends Component {
             <a href="/privacy">privacy policy.</a>
           </span>
         </label>
-        <button onClick={this.handleSubmit}>
-          {'Submit '}
-          <Arrow type='right' />
-        </button>
+        <div className="subscription-thanks">
+          Thanks! You will receive an email soon with next steps.
+          <br />
+          <button className="subscription-reset" onClick={this.handleReset}>OK</button>
+        </div>
       </form>
     )
   }
-}
\ No newline at end of file
+}
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.router.js b/animism-align/frontend/app/views/viewer/nav/viewer.router.js
index f83f460..1e6bc41 100644
--- a/animism-align/frontend/app/views/viewer/nav/viewer.router.js
+++ b/animism-align/frontend/app/views/viewer/nav/viewer.router.js
@@ -40,6 +40,14 @@ class ViewerRouter extends Component {
       case 'footnotes':
         actions.viewer.showComponent('footnotes')
         break
+      case 'subscribe':
+        actions.viewer.showComponent('nav')
+        actions.viewer.showNavComponent('subscribe')
+        break
+      case 'share':
+        actions.viewer.showComponent('nav')
+        actions.viewer.showNavComponent('share')
+        break
       case 'textplate':
         actions.viewer.seekToTimestamp(timestampToSeconds('44:39'))
         break
diff --git a/animism-align/frontend/app/views/viewer/sections/footnotes.css b/animism-align/frontend/app/views/viewer/sections/footnotes.css
index 74426c3..7a45e37 100644
--- a/animism-align/frontend/app/views/viewer/sections/footnotes.css
+++ b/animism-align/frontend/app/views/viewer/sections/footnotes.css
@@ -8,7 +8,7 @@
   position: absolute;
   bottom: 0;
   right: -1px;
-  width: 15rem;
+  width: 14rem;
   max-height: 50vh;
   transform: translateY(100vh) translateZ(0);
   transition: opacity 0.01s, transform 0.2s;
diff --git a/animism-align/frontend/app/views/viewer/sections/share.css b/animism-align/frontend/app/views/viewer/sections/share.css
index ae5dd53..fe3aaf7 100644
--- a/animism-align/frontend/app/views/viewer/sections/share.css
+++ b/animism-align/frontend/app/views/viewer/sections/share.css
@@ -10,6 +10,7 @@
   padding: 0.5rem 0.75rem 0 0.75rem;
   background: black;
   border-top: 1px solid white;
+  border-left: 1px solid white;
   border-right: 1px solid white;
   color: white;
   font-size: 18px;
@@ -28,7 +29,7 @@
   z-index: 10;
 }
 
-.nav-share a {
+.viewer-parent .nav-share a {
   color: white;
   text-decoration: none;
 }
diff --git a/animism-align/frontend/app/views/viewer/sections/subscribe.css b/animism-align/frontend/app/views/viewer/sections/subscribe.css
index 9c27614..2b43fe2 100644
--- a/animism-align/frontend/app/views/viewer/sections/subscribe.css
+++ b/animism-align/frontend/app/views/viewer/sections/subscribe.css
@@ -4,7 +4,7 @@
   position: absolute;
   bottom: 0;
   left: -1px;
-  width: 35rem;
+  width: 29.6rem;
   transform: translateY(30rem) translateZ(0);
   transition: opacity 0.01s, transform 0.2s;
   padding: 0.5rem 0.75rem 0 0.75rem;
@@ -36,28 +36,47 @@
   white-space: normal;
   position: relative;
 }
-.nav-subscribe .subscription-form input {
+.nav-subscribe .subscription-form input[type='email'] {
   font-size: 18px;
   background: transparent;
   border: 0;
-  padding: 5px 0;
+  padding: 0.5rem 0;
+  margin-right: 0.5rem;
   width: 100%;
   color: #fff;
+  flex: 1;
 }
-.nav-subscribe .subscription-form input::placeholder {
+.nav-subscribe .subscription-form input[type='email']::placeholder {
   color: #888;
 }
-.nav-subscribe .subscription-form input:focus,
-.nav-subscribe .subscription-form input:focus:invalid {
+.nav-subscribe .subscription-form input[type='email']:focus,
+.nav-subscribe .subscription-form input[type='email']:focus:invalid {
   background: transparent;
   border: 0;
   outline: 0;
   color: #fff;
 }
+.nav-subscribe .subscription-row {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+  padding-right: 0.5rem;
+  margin: 0.25rem 0;
+}
+.nav-subscribe button.subscription-submit {
+  position: relative;
+  background: transparent;
+  border: 0;
+  padding: 0 0.75rem 0 0;
+  overflow: visible;
+  font-family: "Neue Haas Unica", sans-serif;
+  font-size: 18px;
+}
 .nav-subscribe .subscription-form .arrow {
   position: absolute;
-  bottom: -0.25rem;
-  right: -1rem;
+  bottom: -0.5rem;
+  right: -1.25rem;
   width: 2.5rem;
   height: 2.5rem;
 }
@@ -65,5 +84,59 @@
   fill: #666;
 }
 .nav-subscribe .subscription-callout {
-  width: 30rem;
+  width: 100%;
+}
+.nav-subscribe .subscription-privacy {
+  font-size: 0.8rem;
+}
+.viewer-parent .nav-subscribe a {
+  color: #fff;
+  text-decoration: underline;
+}
+.nav-subscribe .checkbox span {
+  text-transform: none;
+}
+.nav-subscribe .subscription-form label {
+  display: block;
+}
+.nav-subscribe form input[type="checkbox"] {
+  display: inline;
+  margin: 0 0.5rem 0 0;
+}
+.nav-subscribe form label span {
+  display: inline;
+}
+.nav-subscribe input[type=checkbox]:focus:after {
+  border-color: #333;
+}
+.nav-subscribe input[type="checkbox"]:checked:after {
+  border-color: #333;
+  background-color: #333;
+}
+
+.nav-subscribe .subscription-thanks {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%;
+  height: 100%;
+  background: black;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+  opacity: 0.0;
+  transition: opacity 0.4s;
+}
+.nav-subscribe .subscribed .subscription-thanks {
+  opacity: 1.0;
+  pointer-events: auto;
+}
+
+.nav-subscribe button.subscription-reset {
+  font-family: "Neue Haas Unica", sans-serif;
+  margin-top: 0.5rem;
+  font-size: 18px;
+  background: black;
+  padding: 0.25rem 0.5rem;
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2