Problem Cards: Overview (Mobile > Dashboard)

[alexrcabral]

This task defines the overview of the problem cards on the individual set view of the dashboard. 

Full Mockup

The above mockup shows the issue in context of the individual set view.

Notable changes from mockups: 

• We are not using classes or other metadata descriptors as shown in the mockup ("Algebra 101"), so this piece should be left out. 
• The numbers should increase sequentially, so the second problem card in this mockup would be "02" instead of "01". 
• The problem prompt should be in bold, whereas the problem equation should be in the bottom text (the first problem set card in the mockups is a clearer example than the second) 
• The problem cards should not have a three dot dropdown on the cards themselves in this mobile version (associated with problem set creation)

Layout 

The individual sets page of the dashboard should contain a card for each problem in the set. The cards should be rounded rectangles in a single column from the top. Users should be able to scroll through these until they reach the last problem (progressive loading five problem cards at a time). 

Problem cards should be assigned a random color for their problem card background, which persists with that problem (e.g. if a problem is light blue, it will stay light blue after changes are saved to the problem set on the desktop version, and it will not be affected by new sets being added). 

These random colors should be one of the colors (light green, light orange, off-white) defined in the style guide in Invision and shown in the mockups above. 

Reference

Style Guides: https://invis.io/CQYLLW8J49U Mobile Mockups: https://invis.io/5HYLLW1G4BD Fonts: https://www.dropbox.com/sh/c12m6ufweyds20d/AAAdXNPOt8e52DkSAr9pd-a-a/Fonts?dl=0

Acceptance criteria: 

Given that I'm a user on the Mathshare dashboard, when I click into a set, I should be able to scroll through all my problems in that set. The colors of each problem that I've created or worked on should stay a consistent color for me so I can associate the problem with that particular color over time. When I click on a problem set card, I should be brought to the problem solve view for that problem. 

[rupeshparab]

@johnhbenetech 1 of the things which is mentioned in the description is to progressively load 5 problems at a time Currently we don't have an api for it

I have completed the other frontend changes for this, let me know if progressive load is needed

[johnhbenetech]

@alexrcabral is favor of velocity, can we break out the progressive load as a separate task as it will be a significant context change that will impede the frontend development

[alexrcabral]

@johnhbenetech Sure thing. I'll break that out as a separate task today.

In that case, the current approach from the development side for this particular task is loading all cards on page load, correct?

[johnhbenetech]

@alexrcabral that's correct.

[alexrcabral]

1483 created to address progressive loading

The only thing remaining in (/ adjacent to) this issue is the hooking up to the individual problem view, which should happen after the problem solve pieces are completed.

[abaranowska1]

Tested with success Verified cases:

• The problem cards don't have a three dot dropdown on the cards in this mobile version
• When I click into a set, I am able to scroll through all my problems in that set
• The colors of each problem that I've created or worked on stay a consistent color