Skip to content

Split timezone into two lines #48

@lpatmo

Description

@lpatmo

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    [priority] lowLow-priority issues[tech] javascriptResolution is likely to involve JavaScript[tech] meteorjsResolution is likely to require basic understanding of MeteorJS[tech] reactResolution is likely to involve ReactJS

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions