refactor viewer sections list, share, subscribe, subscription form

3 files changed, 16 insertions, 118 deletions

diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css
index f84470f..4738493 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.css
+++ b/animism-align/frontend/app/views/viewer/nav/nav.css
@@ -73,7 +73,11 @@
   align-items: center;  
   cursor: pointer;
 }
-.viewer-nav .link span {
+.viewer-nav .link > span {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;  
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -83,6 +87,13 @@
   padding-right: 1.25rem;
 }
 
+.viewer-nav .link > span.replay-link {
+  display: inline-block;
+  max-width: 30vw;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .viewer-nav .next-section-thumbnail {
   position: absolute;
   right: 0;
@@ -128,57 +139,6 @@
   opacity: 1;
 }
 
-/* Share box */
-
-.nav-share {
-  position: absolute;
-  bottom: 3rem;
-  left: 0;
-  width: 20rem;
-  transform: translateY(30rem);
-  transition: opacity 0.01s, transform 0.2s;
-  padding: 0.5rem 1.5rem;
-  background: black;
-  border: 1px solid white;
-  color: white;
-  font-size: 18px;
-  /*opacity: 0;*/
-}
-.checklist-open .nav-share {
-  top: 3rem;
-  z-index: 21;
-  transform: translateY(-30rem);
-  bottom: auto;
-}
-.share-open .nav-share {
-  transform: translateY(0);
-  opacity: 1;
-}
-.nav-share a {
-  color: white;
-  text-decoration: none;
-}
-.nav-share .share-success {
-  display: none;
-}
-.nav-share.copying .share-success {
-  margin-left: 1rem;
-  display: inline;
-  opacity: 1;
-  color: white;
-  font-size: 0.75rem;
-}
-.nav-share.copying.copied .share-success {
-  opacity: 0;
-  transition: opacity 1.0s 1.0s;
-}
-.nav-share .share-option {
-  padding: 0.5rem 0;
-}
-.nav-share .share-copy {
-  cursor: pointer;
-}
-
 /* Arrows */
 
 .arrow svg {
diff --git a/animism-align/frontend/app/views/viewer/nav/nav.parent.js b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
index c73ab7a..80340c8 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
@@ -80,7 +80,10 @@ class NavParent extends Component {
               onMouseEnter={this.handleMouseEnterNext}
               onClick={this.goToNextSection}
             >
-              {viewer.credits ? "Replay Episode 1. Animist Origins & Export Projections" : "Next"}
+              {viewer.credits
+                ? <span className="replay-link">{'Replay Episode 1. Animist Origins & Export Projections'}</span>
+                : "Next"
+              }
               <Arrow type={'right'} />
             </span>
           </div>
diff --git a/animism-align/frontend/app/views/viewer/nav/nav.share.js b/animism-align/frontend/app/views/viewer/nav/nav.share.js
deleted file mode 100644
index 1e32860..0000000
--- a/animism-align/frontend/app/views/viewer/nav/nav.share.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React, { Component } from 'react'
-
-import { writeToClipboard } from 'app/utils'
-
-export default class NavShare extends Component {
-  state = {
-    copied: false,
-  }
-  constructor(props){
-    super(props)
-    this.copyToClipboard = this.copyToClipboard.bind(this)
-  }
-  copyToClipboard() {
-    const url = "https://e-flux.com/"
-    writeToClipboard(url).then(() =>{
-      clearTimeout(this.timeout)
-      this.setState({ copying: true, copied: false, })
-      this.timeout = setTimeout(() => {
-        this.setState({ copying: true, copied: true })
-        this.timeout = setTimeout(() => this.setState({ copied: false, copying: false, }), 2200)
-      }, 50)
-    })
-  }
-  render() {
-    const { viewer } = this.props
-    let className = "nav-share"
-    if (this.state.copying) className += " copying"
-    if (this.state.copied) className += " copied"
-    const title = "Animism Episode 1"
-    const url = "https://e-flux.com/"
-    const mailtoURL = (
-      "mailto:?subject=" + encodeURIComponent(title) +
-      "&body=" + encodeURIComponent("I want to share this post on e-flux: " + url + "\n\n\n")
-    )
-    const facebookURL = (
-      "https://www.facebook.com/sharer.php" +
-      "?u=" + encodeURIComponent(url) +
-      "&t=" + encodeURIComponent(title)
-    )
-    const twitterURL = (
-      "https://twitter.com/intent/tweet" +
-      "?url=" + encodeURIComponent(url) +
-      "&text=" + encodeURIComponent(title)
-    )
-    return (
-      <div className={className}>
-        <div className="share-option">
-          <a href={mailtoURL}>Email</a>
-        </div>
-        <div className="share-option">
-          <a href={facebookURL}>Facebook</a>
-        </div>
-        <div className="share-option">
-          <a href={twitterURL}>Twitter</a>
-        </div>
-        <div className="share-option">
-          <div className="share-copy" onClick={this.copyToClipboard}>
-            Copy Link
-            <span className="share-success">success</span>
-          </div>
-        </div>
-      </div>
-    )
-  }
-}