search

pqina / flip

⏳ The online version of the classic flip clock
https://pqina.nl/flip/
MIT License
874 stars 89 forks source link

Flip clock with hours flipper with no leading 0 and centered #57

Open MacSass opened 1 year ago

MacSass commented 1 year ago

Hi, glad I found that flip engine - best I have seen so far. But I´m struggling with one issue: I´d like to create a 24h flip clock with a flipper for hours and one for minutes - easy so far. But: I would like the hours to show with no leading "0". E.g. the time of 6:35 should show with just 6 on the flipper and centered on it.

Is this possible? If so - how? If I remove the "pad" then it does show like I want it to, but the flipper size changes to "one digit" wide - I would like to have it always the same size of two digits, even if the hour is just one digit currently.

Thanks in advance - MacSass

aeleus commented 6 months ago

I managed to accomplish this by adding the "min-width" value in this CSS to modify the styling of the flip boxes:

/ distance from other flippers / .tick-flip { margin-left: .1em; margin-right: .1em; min-width: 1.5em; }

See here for more info: https://pqina.nl/tick/#flip