Commit fef13679 authored by i❤computers's avatar i❤computers

* Fix some style issues with mobile displays

* Fix firefox bug where logo animation won't stop when you let the audio
 play from start till past the end of logo cue.
parent 3115f67e
......@@ -79,7 +79,7 @@
width: 100%;
}
@media screen and (max-width: 750px) {
@media screen and (max-width: 799px) {
div {
width: initial;
}
......@@ -100,6 +100,11 @@
float: none;
width: initial;
}
aside {
height: 4em;
padding-top: 13em;
}
}
/* When not animated, white flag wipes should be hidden*/
......@@ -382,7 +387,8 @@
</svg>
</header>
<aside>
<button>Play ▶️ the article from the beginning</button> or click anywhere in the text to start playing from that point.
<button>Play ▶️ the article from the beginning</button>
or click anywhere in the text to start playing from that point.
</aside>
<h1>
<span data-cue-position="8">5 </span>
......
......@@ -43,7 +43,7 @@
}
let intervalHandle;
let intervalHandle, cancelled = false;
function startStopAnimation(squares, mutationList) {
const oldValue = mutationList[0].oldValue;
......@@ -58,9 +58,7 @@
&& oldValue && oldValue.includes(CONSTANTS.HIGHLIGHTED)
&& intervalHandle !== undefined) {
clearRequestInterval(intervalHandle);
intervalHandle = undefined;
requestAnimationFrame(removeHighlights.bind(null, squares));
cancelled = true;
}
}
......@@ -70,6 +68,13 @@
* @param {DOMHighResTimeStamp} currentTime
*/
function animateSquares(squares, currentTime) {
if (cancelled) {
clearRequestInterval(intervalHandle);
intervalHandle = undefined;
cancelled = false;
requestAnimationFrame(removeHighlights.bind(null, squares));
return;
}
squares.forEach(square => {
if (Math.random() < CONSTANTS.CHANCE) {
return;
......
......@@ -9,6 +9,7 @@ window.requestInterval = function (fn, delay) {
handle = {};
function loop(currentTime) {
handle.value = requestAnimationFrame(loop);
const current = new Date().getTime(),
delta = current - start;
......@@ -16,8 +17,6 @@ window.requestInterval = function (fn, delay) {
fn(currentTime);
start = new Date().getTime();
}
handle.value = requestAnimationFrame(loop);
}
handle.value = requestAnimationFrame(loop);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment