icedream
/
vizon-countdown-website
1
0
Fork 0
Code Issues 1 Pull Requests Releases Activity

Remove staircase effects for larger time units.

master
Icedream 2017-08-19 23:39:33 +02:00
parent 2919595115
commit 3a5087bdc8
Signed by: icedream
GPG Key ID: 1573F6D8EFE4D0CF
3 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/Countdown.jsx
View File

@ -24,7 +24,7 @@ export default class Countdown extends React.Component {
componentDidMount() { componentDidMount() {
this.tick(); this.tick();
this.interval = setInterval(this.tick.bind(this), 1000); this.interval = setInterval(this.tick.bind(this), 100);
} }
componentWillUnmount() { componentWillUnmount() {
@ -49,10 +49,13 @@ export default class Countdown extends React.Component {
const durationMoment = moment.duration(duration); const durationMoment = moment.duration(duration);
const days = durationMoment.days(); const milliseconds = durationMoment.asMilliseconds();
const hours = durationMoment.hours(); const seconds = (milliseconds / 1000) % 60;
const minutes = durationMoment.minutes(); const minutes = (milliseconds / (60 * 1000)) % 60;
const seconds = durationMoment.seconds(); const hours = (milliseconds / (60 * 60 * 1000)) % 24;
const days = (milliseconds / (24 * 60 * 60 * 1000));
console.log({ days, hours, minutes, seconds });
const size = 160; // @HACK const size = 160; // @HACK
@ -61,7 +64,7 @@ export default class Countdown extends React.Component {
<div className={style.countdown}> <div className={style.countdown}>
<ProgressCircle size={size} max={3} progress={days} stroke="rgb(76,114,163)"> <ProgressCircle size={size} max={3} progress={days} stroke="rgb(76,114,163)">
<DigitBlock suffix="d"> <DigitBlock suffix="d">
{days.toLocaleString(locale, { {Math.floor(days).toLocaleString(locale, {
minimumIntegerDigits, minimumIntegerDigits,
useGrouping, useGrouping,
})} })}
@ -69,7 +72,7 @@ export default class Countdown extends React.Component {
</ProgressCircle> </ProgressCircle>
<ProgressCircle size={size} max={24} progress={hours} stroke="rgb(60, 144, 60)"> <ProgressCircle size={size} max={24} progress={hours} stroke="rgb(60, 144, 60)">
<DigitBlock suffix="h"> <DigitBlock suffix="h">
{hours.toLocaleString(locale, { {Math.floor(hours).toLocaleString(locale, {
minimumIntegerDigits, minimumIntegerDigits,
useGrouping, useGrouping,
})} })}
@ -77,7 +80,7 @@ export default class Countdown extends React.Component {
</ProgressCircle> </ProgressCircle>
<ProgressCircle size={size} max={60} progress={minutes} stroke="rgb(160, 154, 40)"> <ProgressCircle size={size} max={60} progress={minutes} stroke="rgb(160, 154, 40)">
<DigitBlock suffix="m"> <DigitBlock suffix="m">
{minutes.toLocaleString(locale, { {Math.floor(minutes).toLocaleString(locale, {
minimumIntegerDigits, minimumIntegerDigits,
useGrouping, useGrouping,
})} })}
@ -85,7 +88,7 @@ export default class Countdown extends React.Component {
</ProgressCircle> </ProgressCircle>
<ProgressCircle size={size} max={60} progress={seconds} stroke="rgb(193,63,88)"> <ProgressCircle size={size} max={60} progress={seconds} stroke="rgb(193,63,88)">
<DigitBlock suffix="s"> <DigitBlock suffix="s">
{durationMoment.seconds().toLocaleString(locale, { {Math.floor(seconds).toLocaleString(locale, {
minimumIntegerDigits, minimumIntegerDigits,
useGrouping, useGrouping,
})} })}

2
src/ProgressCircle.sass
View File

@ -5,7 +5,7 @@
top: 0 top: 0
.progressValue .progressValue
transition: stroke-dashoffset 1s linear transition: stroke-dashoffset 0.15s linear
.progressCircleContainer .progressCircleContainer
position: relative position: relative