SamR1/FitTrackee

Inconsistent page with between workout with and without GPS data

jat255 opened this issue · 5 comments

jat255 commented

This is the minor-est of minor nitpicks, but I noticed this morning that the width of a workout detail page varies if there is GPS data or not, which results in the arrow buttons to navigate back and forth between workouts jumping around (making it annoying to click through more than one activity)

Hopefully this makes the issue clear:

alignment_issue

As you can see, the previous/next arrows on these two pages are not aligned.

So far as I can tell, this is due to the added width of the scrollbar for a workout with GPS data, compared to one without. When there's no GPS data, the .container div (the parent of .workout-container) has a margin of 390 px:

image

But when there is GPS data, that same div has margins of 382.5 px:

image

If I add a local CSS rule of

body {
    overflow-y: scroll;
}

The buttons stop jumping around, but I'm not sure that's the best solution.

SamR1 commented

Hi,

Thanks for the bug report.
This problem occurs on Chrome. There are several solutions:

  • display the scrollbar by default to prevent layout change, as you suggest,
  • make the clickable area larger (the buttons may be too small), so that despite the layout change, there's no problem clicking on arrow buttons.
SamR1 commented

example of a fix with both solutions (and custom style on scrollbar) on chrome:

screenshot

jat255 commented

Should have mentioned I was on Chrome :)

Sounds like you found a good fix. Thanks!

SamR1 commented

thanks for your feedback :)

SamR1 commented

released in 0.7.19