search

benetech / MathShare

MIT License
9 stars 3 forks source link

Top Banner: Back to set (Mobile > Problem Solve) #1421

Open alexrcabral opened 4 years ago

alexrcabral commented 4 years ago

This task defines the back to set function within top banner for the mobile problem solve page. 

Full Mockup

Mockup showing the problem solve page. The top banner shows a back button with the name of the set, Solve for X. Below is the heading Problem with a checkered flag. In large font is the equation, 7x minus 13 equals 2. In smaller font is the prompt: solve for x and explaining each step on the way to show how you solve your problems. Below a dashed line is My Steps, the option to go forward or back, and Step 01, with the options to start solving here, and add your explanation here. At the bottom of the screen are a speaker icon, a microphone icon, a font decrease and increase button, and an option to submit.

The above mockup shows the problem solve view in context (Mobile version). 

Back button  

Mockup showing a rounded light green rectangle with a back icon and the text Solve for X

The back button shown in the mockups should be used. When clicked, this should bring the user back to the main problem set page. 

Alt Text: "Back to all problems" 

Notable changes from mockups: 

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 an individual problem solve page, when I click the back button, I should be brought back to the main problem set page, where I can view all problems within the current set. 

abaranowska1 commented 3 years ago

Tested with success The back button was added to the Problem Solve View on Mobile. One difference between the mockup and the actual view is that we have only arrow without the vertical line. image Verified on:

alexrcabral commented 3 years ago

Thanks @abaranowska1!

@rupeshparab This should be using the arrow with the line. It's in the same category as the arrow you seem to have used here, but further down the line and is called "arrow-2".

Screen Shot 2020-10-28 at 4 15 36 PM
rupeshparab commented 3 years ago

Pushed a fix for this

abaranowska1 commented 3 years ago

The icon was changed to "arrow-2" image image

alexrcabral commented 3 years ago

I'm signing off on this since I think this arrow is fine for release, but I noticed the arrow is still a slightly different asset from the original PNG/SVG. @rupeshparab are you having difficulty accessing the assets on Invision?