transcript hover

2 files changed, 13 insertions, 4 deletions

diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
index cdfc5dc..d52f348 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
@@ -48,6 +48,7 @@ class EfluxChrome extends Component {
   }
   render() {
     const { navStyle, playing, transcriptOpen, growlOpen, growlMessage, atEndOfSection, currentSection } = this.props
+    const showingTranscriptTooltip = ((atEndOfSection && currentSection.index === 0) || this.state.transcript)
     return (
       <div className={"eflux-header " + navStyle + (transcriptOpen ? ' transcript-open' : '')}>
         <div className="eflux-logo">
@@ -81,10 +82,13 @@ class EfluxChrome extends Component {
         <div className={this.state.eflux ? "growl-tooltip tooltip-eflux hover" : "growl-tooltip tooltip-eflux"}>
           {'Back to e-flux'}
         </div>
-        <div className={this.state.play ? "growl-tooltip tooltip-play hover" : "growl-tooltip tooltip-play"}>
+        <div className={(!showingTranscriptTooltip && this.state.play) ? "growl-tooltip tooltip-play hover" : "growl-tooltip tooltip-play"}>
           {this.state.playMessage}
         </div>
-        <div className={((atEndOfSection && currentSection.index === 0) || this.state.transcript) ? "growl-tooltip tooltip-transcript hover" : "growl-tooltip tooltip-transcript"}>
+        <div
+          className={showingTranscriptTooltip ? "growl-tooltip tooltip-transcript hover" : "growl-tooltip tooltip-transcript"}
+          onClick={() => actions.viewer.toggleComponent('transcript')}
+        >
           {'Read the Transcript'}
         </div>
       </div>
diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.css b/animism-align/frontend/app/views/viewer/nav/eflux.css
index 6377aca..85cbe64 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.css
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.css
@@ -86,6 +86,7 @@
   border: 1px solid;
   padding: 0.75rem;
   text-align: center;
+  pointer-events: none;
 }
 .growl-tooltip.tooltip-eflux {
   left: 1.8rem;
@@ -96,17 +97,18 @@
 }
 .growl-tooltip.tooltip-play {
   right: 7.0rem;
-  top: 5.5rem;
+  top: 5.25rem;
   transition: opacity 0.2s, transform 0.2s;
   transform: translateZ(0) translateY(1rem);
   opacity: 0;
 }
 .growl-tooltip.tooltip-transcript {
   right: 2.2rem;
-  top: 5.5rem;
+  top: 5.25rem;
   transition: opacity 0.2s, transform 0.2s;
   transform: translateZ(0) translateY(1rem);
   opacity: 0;
+  cursor: pointer;
 }
 .growl-tooltip.tooltip-eflux.hover,
 .growl-tooltip.tooltip-play.hover,
@@ -114,6 +116,9 @@
   transform: translateZ(0) translateY(0);
   opacity: 1;
 }
+.growl-tooltip.tooltip-transcript.hover {
+  pointer-events: auto;
+}
 .growl-message {
   top: 0; left: 50%;
   transition: transform 0.2s;