Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Split timezone into two lines #48

Open
lpatmo opened this issue Apr 6, 2019 · 0 comments
Open

Split timezone into two lines #48

lpatmo opened this issue Apr 6, 2019 · 0 comments
Labels
[priority] low Low-priority issues [tech] javascript Resolution is likely to involve JavaScript [tech] meteorjs Resolution is likely to require basic understanding of MeteorJS [tech] react Resolution is likely to involve ReactJS
Milestone

Comments

@lpatmo
Copy link
Member

lpatmo commented Apr 6, 2019

Current issue is that our timezone can sometimes be too long to fit inside a MatchCard component.
image

Proposing to breakdown the timezone into two segments so that they can be rendered as:
image

One approach would be to splice the timezone value and splitting them in the MatchCard component.

<small className="text-muted">{timezone}</small>

For example, if timezone returns the value of

'(GMT-12:00) International Date Line West'

use JS to split at ) (or use regex to split the value from (...) and everything else) so that we can add a break in between in the MatchCard render function:

render () {
   ...
   <Card.Footer>
       <small className="text-muted">{timezone[0]}</small>
       <small className="text-muted">{timezone[1]}</small> 
   </Card.Footer>
}

where timezone is now an array of ['(GMT-12:00)', 'International Date Line West']

--

A second approach would be to refactor the entries file so that the timezones are already split accordingly:

image

@lpatmo lpatmo added [tech] javascript Resolution is likely to involve JavaScript help wanted We'd really like some extra help with this issue labels Apr 6, 2019
@angelocordon angelocordon added this to the MVP v1.0.0 milestone Apr 6, 2019
@lpatmo lpatmo added the [priority] low Low-priority issues label Apr 9, 2019
@angelocordon angelocordon added [tech] meteorjs Resolution is likely to require basic understanding of MeteorJS [tech] react Resolution is likely to involve ReactJS and removed help wanted We'd really like some extra help with this issue labels Apr 28, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[priority] low Low-priority issues [tech] javascript Resolution is likely to involve JavaScript [tech] meteorjs Resolution is likely to require basic understanding of MeteorJS [tech] react Resolution is likely to involve ReactJS
Projects
None yet
Development

No branches or pull requests

3 participants