From 90352b1c0e3f9ebcd543ce047e852fd7ca05a012 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 30 Oct 2020 17:41:51 +0100 Subject: hovering logic --- .../frontend/app/views/viewer/player/player.transcript.css | 6 +++++- animism-align/frontend/app/views/viewer/player/player.transcript.js | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) (limited to 'animism-align/frontend/app/views/viewer/player') diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.css b/animism-align/frontend/app/views/viewer/player/player.transcript.css index 3725372..8d32abd 100644 --- a/animism-align/frontend/app/views/viewer/player/player.transcript.css +++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css @@ -145,9 +145,13 @@ align-items: center; opacity: 0; cursor: pointer; - transition: opacity 0.2s; + transition: opacity 0.2s, transform 0.2s; + transform: translateZ(0); padding: 1.5rem; } +.audio-paused .not-scrollable .speaker-icon { + transform: translateZ(0) translateY(-3rem); +} .paragraph .speaker-icon { top: -1.5rem; left: -5.5rem; diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.js b/animism-align/frontend/app/views/viewer/player/player.transcript.js index 44c5bb2..fc0b3ea 100644 --- a/animism-align/frontend/app/views/viewer/player/player.transcript.js +++ b/animism-align/frontend/app/views/viewer/player/player.transcript.js @@ -58,7 +58,7 @@ class PlayerTranscript extends Component { render() { const { paragraphs, color, inlineParagraphCount } = this.props.section const className = "player-transcript " + color + " " + ( - inlineParagraphCount > 2 ? 'scrollable' : '' + inlineParagraphCount > 2 ? 'scrollable' : 'not-scrollable' ) return (