horizontal scrolling scrollbar on nav

4 files changed, 28 insertions, 7 deletions

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 b3e8564..fcd9a38 100644
--- a/animism-align/frontend/app/views/viewer/forms/subscription.form.js
+++ b/animism-align/frontend/app/views/viewer/forms/subscription.form.js
@@ -49,7 +49,7 @@ export default class SubscriptionForm extends Component {
         onSubmit={this.handleSubmit}
       >
         <div className="subscription-callout">
-          Stay up to date and get notified when the next episode is available
+          Subscribe to e-flux and get notified when the next episode is available.
         </div>
         <div className="subscription-row">
           <input
@@ -76,7 +76,7 @@ export default class SubscriptionForm extends Component {
           />
           <span>
             {"I have read e-flux’s privacy policy "}
-            {"and agree that e-flux may send me emails to the email address "}
+            {"and agree that e-flux may send me announcements 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>
diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.css b/animism-align/frontend/app/views/viewer/nav/eflux.css
index 9f26595..819e948 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.css
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.css
@@ -38,7 +38,7 @@
   height: 3rem;
   background: white;
   border-radius: 50%;
-  margin-left: 34px;
+  margin-left: 1.5rem;
   cursor: pointer;
 }
 .eflux-nav .playToggle:hover,
@@ -50,8 +50,8 @@
   height: 2rem;
 }
 .eflux-nav .playToggle svg {
-  width: 2rem;
-  height: 2rem;
+  width: 2.5rem;
+  height: 2.5rem;
 }
 .eflux-nav .playToggle.paused svg {
   margin-left: 2px;
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 abe4871..d0cc06b 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
@@ -65,7 +65,8 @@ class NavParent extends Component {
     if (viewer.nextSection) {
       actions.viewer.seekToSection(viewer.nextSection)
     } else {
-      actions.viewer.seekToBeginning()
+      actions.viewer.showNavComponent('checklist')
+      // actions.viewer.seekToBeginning()
     }
     this.setState({ hoveringNext: false, hoveringNav: false, suppressHover: true })
   }
@@ -106,7 +107,7 @@ class NavParent extends Component {
             >
               {viewer.nextSection
                 ? "Next"
-                : <span className="replay-link">{'Replay Episode 1. Animist Origins & Export Projections'}</span>
+                : <span className="replay-link">{'View Works from Episode 1'}</span>
               }
               <Arrow type={'right'} />
             </span>
diff --git a/animism-align/frontend/app/views/viewer/sections/sections.css b/animism-align/frontend/app/views/viewer/sections/sections.css
index a172f6f..ca1d86e 100644
--- a/animism-align/frontend/app/views/viewer/sections/sections.css
+++ b/animism-align/frontend/app/views/viewer/sections/sections.css
@@ -88,6 +88,26 @@
   overflow-x: hidden;
 }
 
+.viewer-sections-scroll::-webkit-scrollbar {
+  cursor: pointer;
+  user-select: none;
+  height: 4px
+}
+.viewer-sections-scroll::-webkit-scrollbar-button {
+  display: block;
+  width: 0;
+  height: 0;
+}
+.viewer-sections-scroll::-webkit-scrollbar-track-piece {
+  /*background:rgba(211,211,211,0.8);*/
+  background:rgba(255,255,255,1.0);
+}
+.viewer-sections-scroll::-webkit-scrollbar-thumb {
+  display: block;
+  background: #000;
+}
+
+
 /* clickable section indicators */
 
 .viewer-sections .viewer-section {