Milestone Card Layout

[discorick]

Merges into https://github.com/huboard/huboard-web/pull/327

• Enables Multiple assignees on milestone cards (Max 3)
• Compacts the card
• Fixes bug where column meter would report the incorrect column on closed issues
• Moves the progress for columns proportionally (provides a more consistent experience across varying column counts)
• Sets the progress of all progress meter columns to empty until issue state as moved to column index 1, as such the number of progress columns has been reduced to 4 which provides the best possible experience for boards with 5 columns

[dahlbyk]

Which repo are you using to test many task columns?

[discorick]

Checkout /discorick/repro-repo for many columns (8)

[dahlbyk]

The distribution doesn't look quite right:

For eight columns I would expect:

0  ....
1  |...
2  |...
3  ||..
4  ||..
5  |||.
6  |||.
7  ||||

[discorick]

Whoa, @dahlbyk that styling is off, Firefox ?

[dahlbyk]

Whoa, @dahlbyk that styling is off, Firefox ?

Si

[dahlbyk]

Not quite there...

1. With fewer than five columns we show an extra power bar:
   • https://huboard-rails-pr-339.herokuapp.com/huboard-testing/task-cols-2/#/milestones
   • https://huboard-rails-pr-339.herokuapp.com/huboard-testing/task-cols-3/#/milestones
   • https://huboard-rails-pr-339.herokuapp.com/huboard-testing/task-cols-4/#/milestones
2. Distribution for mid-range counts looks good:
   • https://huboard-rails-pr-339.herokuapp.com/huboard-testing/task-cols-5/#/milestones
   • https://huboard-rails-pr-339.herokuapp.com/huboard-testing/task-cols-6/#/milestones
   • https://huboard-rails-pr-339.herokuapp.com/huboard-testing/task-cols-7/#/milestones
   • https://huboard-rails-pr-339.herokuapp.com/huboard-testing/task-cols-8/#/milestones
3. I'm not super concerned about it, but it seems preferable for "extra" bars to appear in the middle (0,1,1,2,2,2,3,3,4) rather than on the end (0,1,1,2,2,3,3,3,4):
   • https://huboard-rails-pr-339.herokuapp.com/huboard-testing/task-cols-9/#/milestones

[dahlbyk]

Alright, I think I have the "right" algorithm:

As an annotated Excel formula, because I'm a Real Programmer™:

# $B$1 = this.powerBarLength  # rename as maxPowerBarLength?
# N$1 = total_length
# N$2 = MIN(N$1 - 1, $B$1)    # powerBarLength
# $A3 = powerbar_total
=IF($A3 = N$1 - 1,            # Last column?
    N$2,                      # Full bar!
    CEILING.MATH(
      (N$2 - 1) *             # Fill all but the last bar
      $A3 / (N$1 - 1)         # ...based on proportion of non-last bars
    )                         # ...rounded up
 )

[dahlbyk]

Alright, I think I have the "right" algorithm

Implemented and tested. I think we're good?

[rauhryan]

Wow! this is really cool!

👍

[discorick]

Everything looks like its checking out!

[dahlbyk]

Alright, so...having focused obsessively on the power bars, what else do we need to look at here? What's a good example repo?

[discorick]

Checkout:

https://huboard-rails-pr-339.herokuapp.com/huboard-testing/card-designs-1#/milestones & https://huboard-rails-pr-339.herokuapp.com/huboard/huboard#/milestones

Everythings looking pretty solid to me at this point.

[dahlbyk]

Not sure if we want to tackle here or not, but I did notice that the power meter status icons seem a little off:

• Chrome

  

• Firefox

  

• Edge

  

Curiously, Chrome Canary looks much better:

[discorick]

Not sure if we want to tackle here or not, but I did notice that the power meter status icons seem a little off

Probably not here, these types of icons have trouble elsewhere in the app as well (see issue timeline icons), when we move to SVG icons that should fix all those inconsistencies between browsers.