wijohnst/ng-turkey-timer

ENHANCEMENT: Add ability to scale `Timeline`

Opened this issue · 4 comments

wijohnst commented

The Timeline component should be able to scale based on the timeline.service.startTime value

wijohnst commented

Scaled Timelines

Image

Screen capture, scaled Timeline Designs

wijohnst commented

Updating timelineservice.getTimelineRows()

The following change:

Image
_Screen capture, adding filter with % to getTimelineRow()

Results in the following timeline:

Image
Screen capture, Timeline, with background scaled to 1:2

While the background has been scaled correctly, the RecipePath is not.

wijohnst commented

Correctly Scaling Recipe Path

When scaling 1:2, we noted that the RecipePath was being placed incorrectly. If we modify timelineservice.getGridArea() we can correct this error.

function getGridArea(){
...rest
return this.getGridAreaString([
  hasHours ? foregroundRows - totalHours * 2 : foregroundRows - 3, // Row Start
])
}

BECOMES =>

function getGridArea(){
...rest
return this.getGridAreaString([
  hasHours ? foregroundRows - totalHours  : foregroundRows - 3, // Row Start
])
}

Removing the * 2 in the first conditional in hasHours results in the following scaled timeline:

Image
Screen capture, scaled timeline with (almost) correctly placed RecipePath components. Note, components that are placed on a half-hour mark still need adjustment

wijohnst commented

Other Dynamic Values

Not only do we need to filter the background rows and change the scale of the RecipePath, we also need to dynamically set the sizes of each. For the 2:1 scale, we change the timelineservice.backgroundRow.size value from 30 to 60. We also change the .timeline-background > div selectors height value from 30px to 60px. The combination of all of these changes results in the following scaled timeline :

Image
Screen shot, timeline with scaled height values