Are blocks left-, center-, or right-justified wrt the timeline?

[dmc314]

Can we add a tick-mark to the top of the rectangles or something to show where they land?

[SgtPooki]

The blocks are right-justified w.r.t. the timeline. i.e. the right side of each milestone card should align with the date specified in its ETA. Unfortunately, we're currently using css-grids to handle positioning, and this decision has significantly limited the accuracy we can obtain.

Is that enough information or is there something else we can do to help?

I'm open to modifying the card view to show more exactly how it aligns, but I think that will make the inaccuracy more pronounced.

I can think of two potential UX bugs that resulted in this issue:

1. StarMaps User Guide doesn't have enough information to inform users of card alignment
2. card alignment could be more visually intuitive

thoughts @juliaxbow ?

[dmc314]

I have no front-end expertise, but does this answer from GPT-3 help at all?

My Prompt: below is html and css that render a blue rectangle with a small arrow pointing upwards from the top right of the rectangle, and text inside it that says "project xyz":

GPT-3 Output:

<div class="rectangle">
  <span class="arrow-up"></span>
  <div class="text">Project XYZ</div>
</div>

.rectangle {
  width: 200px;
  height: 100px;
  background-color: blue;
  position: relative;
}

.arrow-up {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid blue;
  position: absolute;
  top: -20px;
  right: 20px;
}

.text {
  position: absolute;
  top: 30px;
  left: 50px;
  font-size: 18px;
  color: white;
}

Rendered in bottom right of https://jsfiddle.net/

[juliaxbow]

+1 on updating the user guide. Will take a stab. @dmc314 I like the suggestion of an arrow - will play around with a few designs and see how it looks.

Separately, in some of the original mockups (which is something we may shift towards), month markers extended through the full roadmap area which may help point to alignment.

[juliaxbow]

Moving towards center-alignment, where each grid section denotes a full month. Discussing in #251

[SgtPooki]

Closing this issue in favor of #251, which is blocked by #237