Skip to content

Commit 8ec2b85

Browse files
ryanhefnerryanhefner
committed
Add browser prefix to examples site to fix CSS rendering
1 parent c19cd5f commit 8ec2b85

File tree

7 files changed

+16
-8
lines changed

7 files changed

+16
-8
lines changed

‎docs/asset-manifest.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"main.css": "static/css/main.b9f7c8eb.css",
33
"main.css.map": "static/css/main.b9f7c8eb.css.map",
4-
"main.js": "static/js/main.20095120.js",
5-
"main.js.map": "static/js/main.20095120.js.map"
4+
"main.js": "static/js/main.db2f7e94.js",
5+
"main.js.map": "static/js/main.db2f7e94.js.map"
66
}

‎docs/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><meta name="description" content=""><meta name="keywords" content=""><link rel="manifest" href="/react-timer-wrapper/manifest.json"><link rel="shortcut icon" href="/react-timer-wrapper/favicon.ico"><title>react-timer-wrapper - Composable React Timer component that passes its status to its children.</title><link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:300,300i,400,400i,500,500i,700,700i|IBM+Plex+Sans:300,300i,400,400i,500,500i,700,700i" rel="stylesheet"><script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><script async defer="defer" src="https://buttons.github.io/buttons.js"></script><link href="/react-timer-wrapper/static/css/main.b9f7c8eb.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="/react-timer-wrapper/static/js/main.20095120.js"></script></body></html>
1+
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><meta name="description" content=""><meta name="keywords" content=""><link rel="manifest" href="/react-timer-wrapper/manifest.json"><link rel="shortcut icon" href="/react-timer-wrapper/favicon.ico"><title>react-timer-wrapper - Composable React Timer component that passes its status to its children.</title><link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:300,300i,400,400i,500,500i,700,700i|IBM+Plex+Sans:300,300i,400,400i,500,500i,700,700i" rel="stylesheet"><script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><script async defer="defer" src="https://buttons.github.io/buttons.js"></script><link href="/react-timer-wrapper/static/css/main.b9f7c8eb.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="/react-timer-wrapper/static/js/main.db2f7e94.js"></script></body></html>

‎docs/service-worker.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/js/main.20095120.js.map‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs/static/js/main.20095120.js‎ renamed to ‎docs/static/js/main.db2f7e94.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/js/main.db2f7e94.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎site/src/App.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,15 @@ render() {
232232
<div className="percent-wrapper" data-percent={`${Math.round(timerProgress.loop.progress * 100)}%`}>
233233
<p className="percent">{`${Math.round(timerProgress.loop.progress * 100)}%`}</p>
234234
<div className="percent-bar" style={{width: `${timerProgress.loop.progress * 100}%`}} />
235-
<p className="percent white" style={{clipPath: `inset(0 ${(1 - timerProgress.loop.progress) * 100}% 0 0)`}}>{`${Math.round(timerProgress.loop.progress * 100)}%`}</p>
235+
<p
236+
className="percent white"
237+
style={{
238+
clipPath: `inset(0 ${(1 - timerProgress.loop.progress) * 100}% 0 0)`,
239+
webkitClipPath: `inset(0 ${(1 - timerProgress.loop.progress) * 100}% 0 0)`,
240+
}}
241+
>
242+
{`${Math.round(timerProgress.loop.progress * 100)}%`}
243+
</p>
236244
</div>
237245
</ScrollTrigger>
238246
<div className="content">

0 commit comments

Comments
 (0)