refactor viewer sections list, share, subscribe, subscription form

2 files changed, 98 insertions, 0 deletions

diff --git a/animism-align/frontend/app/views/viewer/forms/forms.css b/animism-align/frontend/app/views/viewer/forms/forms.css
new file mode 100644
index 0000000..5e9d698
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/forms/forms.css
@@ -0,0 +1,49 @@
+/* form in transcript */
+
+.player-transcript .subscription-form {
+  font-family: "Freight Text", serif;
+  font-size: 3.5rem;
+  line-height: 1;
+  width: 80%;
+  max-width: 70rem;
+  margin: 0 auto;
+  margin-top: 4rem;
+  margin-bottom: 13rem;
+  position: relative;
+}
+.player-transcript .subscription-form input {
+  font-family: "Freight Text", serif;
+  font-size: 3.5rem;
+  border-bottom: 1px solid #000;
+  color: black;
+  line-height: 1;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  width: 100%;
+}
+.player-transcript .subscription-form input::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 {
+  background: transparent;
+  border: 0;
+  outline: 0;
+  color: #000;
+  border-bottom: 1px solid #000;
+}
+.player-transcript .subscription-form svg {
+  position: absolute;
+  bottom: 0;
+  right: -1rem;
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.player-transcript .subscription-form svg polygon {
+  fill: #666;
+}
diff --git a/animism-align/frontend/app/views/viewer/forms/subscription.form.js b/animism-align/frontend/app/views/viewer/forms/subscription.form.js
new file mode 100644
index 0000000..3d863cb
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/forms/subscription.form.js
@@ -0,0 +1,49 @@
+import React, { Component } from 'react'
+
+import { Arrow } from '../nav/viewer.icons'
+
+export default class SubscriptionForm extends Component {
+  state = {
+    email: "",
+  }
+  constructor(props) {
+    super(props)
+    this.handleChange = this.handleChange.bind(this)
+    this.handleKeyDown = this.handleKeyDown.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+  }
+  handleChange(e) {
+    this.setState({ email: e.target.value })
+  }
+  handleKeyDown(e) {
+    // disable tab
+    if (e.keyCode === 9) {
+      e.preventDefault()
+    }
+  }
+  handleSubmit(e) {
+    e.preventDefault()
+  }
+  render() {
+    return (
+      <form className="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}
+        />
+        <Arrow type='right' />
+      </form>
+    )
+  }
+}
\ No newline at end of file