benetech/MathShare

Share Set: Modal 

Opened this issue · 9 comments

alexrcabral commented

This task defines the modal which is brought up from the "Share my work" button. 

Modal 

When the "Share my work" button is clicked, this should bring up the existing Share My Answers modal from v1. This should behave as it currently does, with accessibility and reflow intact. This should be centered in the page and reflowing properly to fill the screen on mobile, tablet, and desktop.

Web view. Centered modal which is considerably longer with more empty space at the edges.

Mobile view. Centered modal with text reflowing over multiple lines.

Reference

Style Guide + Official Mockups: https://invis.io/CQYLLW8J49U
Fonts: https://www.dropbox.com/sh/c12m6ufweyds20d/AAAdXNPOt8e52DkSAr9pd-a-a/Fonts?dl=0

Acceptance criteria: 

Given that I'm a student on my dashboard, if I click into the three dot dropdown on a problem set, I should encounter the option to Share my work. When I click "Share my work", this should open the share modal, with options to either copy the link, share with Google Classroom, or share with Microsoft Teams. If I resize the window, or open this modal on a smaller device, this should resize the modal, and the modal content should reflow accordingly. 

abaranowska1 commented

Tested
@rupeshparab @alexrcabral
The share set modal is displayed after clicking the 3 dot menu and pick the share my work option, but I have 3 suggestions:

  • I think the font could be bigger because now we have a big modal with small font,
  • I see an issue with displaying the google classroom icon ( iOS mobile, web Chrome, and Firefox)
    image
  • The share modal could be smaller, we can change the margin and try to put all the information on one page without scrolling
    image
    image
johnhbenetech commented

@rupeshparab can you look into why the icon isn't showing.

@alexrcabral take a look at the other comments and let us know if you'd like to change any designs

rupeshparab commented

Pushed a fix for the icon

alexrcabral commented

Thanks for the notes @abaranowska1, to your points:

  1. I'll revisit the font size when we work on personalization settings (including increasing / decreasing font size).

  2. The Google Classroom icon appears to be working now, thanks @rupeshparab for the fix!

  3. I'd like to emphasize your point on the margins -- this seems to be significantly expanded from the original design. This significantly impacts clarity of the modal since it pushes the Close button off screen for mobile and desktop windows with reduced width.

The top margin is fine, but the left and right margins should each be decreased by ~30% (with the Close button further in), and the bottom margin between the Microsoft Teams button and the separating line should be decreased by ~75%.

Desktop

Original Mockup Current Implementation
Screen Shot 2021-01-07 at 7 46 31 PM Screen Shot 2021-01-07 at 7 46 17 PM

Mobile

Original Mockup Current Implementation
shareset-modalmockup Screen Shot 2021-01-07 at 7 55 43 PM
rupeshparab commented

I have reduced the margins significantly, this is a screenshot of 360 x 640 screen resolution
image

and this is desktop:
image

abaranowska1 commented

@rupeshparab I don't see any changes, probably the build failed

rupeshparab commented

@abaranowska1
It seems its code wansn't merged, I have merged it now. It should be deployed in a few mins.

abaranowska1 commented

Thanks, @rupeshparab !

@alexrcabral For me, it looks quite good for now.

  • The Google Classroom logo is displayed,
  • The margins were fixed and now it looks similar to origins mockups

Selection_781
Selection_780

  • 👍1
alexrcabral commented

Thanks @rupeshparab, this looks much better!