countdown clock

[sebastianhuynh-nyc]

@davidnixon @upkarlidder can you please make the numbers smaller and give the numbers more padding between the colon

[upkarlidder]

Thank you @sebastianhuynh-nyc! This comes from the component itself. @davidnixon, I am not sure how much work this would be or what the best practice is here. Can we overwrite css that is set inside the component?

https://github.com/getanwar/vuejs-countdown/blob/86e61b9df84ae2b68d237aa23774dae183cc8f26/src/Countdown.vue#L131

[GeraldMit]

Based on what I remember, we should be able to just override the style information as we are exporting as a component. _countdown.scss already declares some styles on .vuejs-countdown .digit and that should be the right place.

[GeraldMit]

Adding, that this seems too vary greatly depending on browser, resolution, and browser window size(width). Ex. looks pretty good at 640px on Firefox or smaller, but also gets shaky in some sizes as it is resizing, so it might be some of the size calculations between : and numbers; possibly the vw, percentage, and pixel mixed calculations?

[GeraldMit]

_countdown.scs is the place to make the basic changes as described.

<li>
<p class="digit">406</p> 
<p class="text">days</p>
::after
</li>

I think the issie that vw is relative size of viewing window. this item varies digit size between 1 and 3 digits the digits class is declared as viewport .vuejs-countdown .digit { font-size: 12vw !important; @media (min-width: 1063px) { font-size: 14vw !important; }} ::after is the colons between digits the relavant width values are both viewport and % of parent element calculations for width and relative location. .vuejs-countdown li:after { right: -20% !important; font-size: 12vw !important; @media (min-width: 1063px) { right: -15% !important; font-size: 16vw !important;}} so the colon will slide around a bit as its right is a - percentage and not relative to the same measurement.

the padding for the elements though are pixel driven in the container, so the padding numbers are static while the rest is dynamic to the resize.

I can fix the : to be relative the vw as well for the spacing/padding. this wall all then conform to the width. question is,

The current question is how small should the result be relative to a full page at 100% zoom? 1/2 the current size? 1/4th?

Should Midterm elections flow to in-line before the count down at full width?

What height relative to the Top panel or menu bar? (4x? 08x?) Currently height and width for top and the countdown are close to 1:1, I was thinking that it should be at least halfed from that .

current

small screen

[GeraldMit]

@sebastianhuynh-nyc @Sabine-Justilien it only takes a few minutes for me to change, but change to what? how big is smaller? Just needs something relative to work with? otherwise I'll just do "something"

[Sabine-Justilien]

This is not a priority for deployment but is an easy fix. @sebastianhuynh-nyc Can you provide some examples of what this should look like?

[GeraldMit]

@sebastianhuynh-nyc please see countdownAndlanguagedropdown #254 I wasn't ble to get it completely centered top-bottom, required too much change the the .vue for me to complete last night as needed to redo the h3 to be part of the timer to get the text to flow on width change.

[GeraldMit]

@sebastianhuynh-nyc @upkarlidder based on the original comment, with the new size and spacing, can this item be closed? the change that merged with #254 is live and sought to address

1. make the numbers smaller
2. give the numbers more padding between the colon

[cstefano1]

Closing; it's already in Production. @sebastianhuynh-nyc Please reopen if you have any questions.