Closeout punchlist

[Siqister]

Referencing latest bug list:
https://docs.google.com/spreadsheets/d/1XvzZZ5a-ij2H-2D1rXOrl9Tx3hD3uIsv17oVGCUDG-k/edit?usp=gmail#gid=0

Design / UI / UX

• Better typography
• Size of the category buttons need to be consistent
• Indicate currently selected category
• Color adjustment
• Decrease radius for clusters but keep points, keep the answers “a little tighter”

Frontend

• Match questions and icons (buglist #18)
• when switching from card view to another menu by clicking on the icons in the bottom bar, the card image lingers unless it is turned out (buglist #19)
• put X mark on the card so people can close it (buglist #15)
• Refresh on loop every 5 minutes (with query param)
• Load spinner

Deployment

• Deploy to nextstop.mit.edu

[nofurtherinformation]

For indicating current category, I made a class called 'active' -- not sure on placement in cddl-navigation.js, but should be something like:

$(".circle-nav-item").click(() => {
$(".circle-nav-item").removeClass("active"); // de-activate other icons
$(this).toggleClass("active"); // activate this one
});

[allthesignals]

Thanks @nofurtherinformation - that'll be handled best in the template. I'll take a look at lunch.

[nofurtherinformation]

Thanks @allthesignals! Another question -- looking at text in the center seems to be a good option, but will overlap where the answer labels are -- can we modify the CSS that governs where the labels are to avoid that area? If you point me in the right direction I can take a crack at it.

[allthesignals]

Do you mean the question prompts? Yes the CSS can be found here.

Those labels styles are probably defined at the bottom somewhere. The response cluster labels positioning isn't going to be as flexible, though.

[nofurtherinformation]

The question prompt is easy, but the label locations seem to generate inline css, I think here. See screenshot - response labels overlap question prompt if in the middle:

[nofurtherinformation]

Here's an example the inline CSS I'm trying to track down:

<div style="left: 996.1061921911593px; top: 486.9048282377851px;" id="ember378" class="label ember-view">autonomous buses</div>

[allthesignals]

Yes, they're inline because they are generated from a D3 force-direct graph... we can't really do a whole lot with their positions unless you look at the label class and see how text-anchoring is set up.

What are you trying to do? Does the question prompt need to be in the middle?

[nofurtherinformation]

Got it. Yes, we're looking at alternate typography to make the questions stand out more -- will post some CSS to the style doc in a few.

[Siqister]

@nofurtherinformation what if we go drastic and reverse figure ground for the questions?

I'll push my suggestions up as a PR. You'll see I also added

• quotation marks at the beginning and end of the question.
• custom blending for the question so the cards show through a little bit from behind.

Just food for thought--I don't feel super strongly about this either way.

[allthesignals]

Hi folks, I've updated the punchlist to include priorities from our meeting

[Siqister]

Just pushed up a change on experiment branch that tightens up the radius of the clusters

[nofurtherinformation]

@Siqister This is perfect! Seeing the close X, too, which is great.