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

* 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 @@ ...@@ -79,7 +79,7 @@
width: 100%; width: 100%;
} }
@media screen and (max-width: 750px) { @media screen and (max-width: 799px) {
div { div {
width: initial; width: initial;
} }
...@@ -100,6 +100,11 @@ ...@@ -100,6 +100,11 @@
float: none; float: none;
width: initial; width: initial;
} }
aside {
height: 4em;
padding-top: 13em;
}
} }
/* When not animated, white flag wipes should be hidden*/ /* When not animated, white flag wipes should be hidden*/
...@@ -382,7 +387,8 @@ ...@@ -382,7 +387,8 @@
</svg> </svg>
</header> </header>
<aside> <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> </aside>
<h1> <h1>
<span data-cue-position="8">5 </span> <span data-cue-position="8">5 </span>
......
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
} }
let intervalHandle; let intervalHandle, cancelled = false;
function startStopAnimation(squares, mutationList) { function startStopAnimation(squares, mutationList) {
const oldValue = mutationList[0].oldValue; const oldValue = mutationList[0].oldValue;
...@@ -58,9 +58,7 @@ ...@@ -58,9 +58,7 @@
&& oldValue && oldValue.includes(CONSTANTS.HIGHLIGHTED) && oldValue && oldValue.includes(CONSTANTS.HIGHLIGHTED)
&& intervalHandle !== undefined) { && intervalHandle !== undefined) {
clearRequestInterval(intervalHandle); cancelled = true;
intervalHandle = undefined;
requestAnimationFrame(removeHighlights.bind(null, squares));
} }
} }
...@@ -70,6 +68,13 @@ ...@@ -70,6 +68,13 @@
* @param {DOMHighResTimeStamp} currentTime * @param {DOMHighResTimeStamp} currentTime
*/ */
function animateSquares(squares, currentTime) { function animateSquares(squares, currentTime) {
if (cancelled) {
clearRequestInterval(intervalHandle);
intervalHandle = undefined;
cancelled = false;
requestAnimationFrame(removeHighlights.bind(null, squares));
return;
}
squares.forEach(square => { squares.forEach(square => {
if (Math.random() < CONSTANTS.CHANCE) { if (Math.random() < CONSTANTS.CHANCE) {
return; return;
......
...@@ -9,6 +9,7 @@ window.requestInterval = function (fn, delay) { ...@@ -9,6 +9,7 @@ window.requestInterval = function (fn, delay) {
handle = {}; handle = {};
function loop(currentTime) { function loop(currentTime) {
handle.value = requestAnimationFrame(loop);
const current = new Date().getTime(), const current = new Date().getTime(),
delta = current - start; delta = current - start;
...@@ -16,8 +17,6 @@ window.requestInterval = function (fn, delay) { ...@@ -16,8 +17,6 @@ window.requestInterval = function (fn, delay) {
fn(currentTime); fn(currentTime);
start = new Date().getTime(); start = new Date().getTime();
} }
handle.value = requestAnimationFrame(loop);
} }
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