benetech / MathShare

MIT License
9 stars 3 forks source link

Problem Set Cards: Profile image (Mobile > Dashboard) #1406

Open alexrcabral opened 4 years ago

alexrcabral commented 4 years ago

Problem Set Cards: Profile image (Mobile > Dashboard) 

This tasks defines the sourcing and surfacing of the user profile image displayed on the problem set card. 

Full Mockup

Mockup of new dashboard, showing the Your Sets page, with rounded pastel problem cards in a single column. Along the top of the page is a Mathshare logo and a profile image. Underneath is the heading, Your Sets, next to a search icon and a dropdown showing the words, Most Recent. Each problem card shows a profile image, the designation Algebra 101, a three dot drop down, the problem set title, and the word Progress, followed by 02 of 06 Problems, and a progress bar beneath.

The above mockup shows the full dashboard in context (Mobile version). 

Notable changes from mockups: 

Profile Image 

The profile image here is surfaced from the portrait used for the associated Google or Microsoft login. This also includes their default fallback, which is the initials of the name associated with the account on a given colored background which the user may be able to change through their Google / Microsoft account settings. 

Alt text: "Profile image of [user name]" where [user name] is the name associated with the account. e.g.: "Profile image of Alex Cabral"

For example sets, this profile image should be the "Benetech meatball" -- the red and yellow binary circle displayed with the existing logo. Alt text: "Profile image of Mathshare."

Benetech logo showing a red circle with small handwritten-style 0s and 1s drawn over the top

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 logged-in user with sets available, when I view any given problem set, I should see the profile image (or initials) of the individual who created the problem set. 

johnhbenetech commented 4 years ago

@rupeshparab let me know if there are any technical hurdles here. I'm not sure the ability to grab avatars cross user (unless we cache them somehow)

abaranowska1 commented 4 years ago

Tested with success

Verified on: