{"action":"created","issue":{"url":"https://api.github.com/repos/Khan/wonder-blocks/issues/84","repository_url":"https://api.github.com/repos/Khan/wonder-blocks","labels_url":"https://api.github.com/repos/Khan/wonder-blocks/issues/84/labels{/name}","comments_url":"https://api.github.com/repos/Khan/wonder-blocks/issues/84/comments","events_url":"https://api.github.com/repos/Khan/wonder-blocks/issues/84/events","html_url":"https://github.com/Khan/wonder-blocks/pull/84","id":322979598,"number":84,"title":"Add mobile support to modal dialogs.","user":{"login":"jeresig","id":1615,"avatar_url":"https://avatars0.githubusercontent.com/u/1615?v=4","gravatar_id":"","url":"https://api.github.com/users/jeresig","html_url":"https://github.com/jeresig","followers_url":"https://api.github.com/users/jeresig/followers","following_url":"https://api.github.com/users/jeresig/following{/other_user}","gists_url":"https://api.github.com/users/jeresig/gists{/gist_id}","starred_url":"https://api.github.com/users/jeresig/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jeresig/subscriptions","organizations_url":"https://api.github.com/users/jeresig/orgs","repos_url":"https://api.github.com/users/jeresig/repos","events_url":"https://api.github.com/users/jeresig/events{/privacy}","received_events_url":"https://api.github.com/users/jeresig/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":{"login":"matchu","id":59218,"avatar_url":"https://avatars3.githubusercontent.com/u/59218?v=4","gravatar_id":"","url":"https://api.github.com/users/matchu","html_url":"https://github.com/matchu","followers_url":"https://api.github.com/users/matchu/followers","following_url":"https://api.github.com/users/matchu/following{/other_user}","gists_url":"https://api.github.com/users/matchu/gists{/gist_id}","starred_url":"https://api.github.com/users/matchu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/matchu/subscriptions","organizations_url":"https://api.github.com/users/matchu/orgs","repos_url":"https://api.github.com/users/matchu/repos","events_url":"https://api.github.com/users/matchu/events{/privacy}","received_events_url":"https://api.github.com/users/matchu/received_events","type":"User","site_admin":false},"assignees":[{"login":"matchu","id":59218,"avatar_url":"https://avatars3.githubusercontent.com/u/59218?v=4","gravatar_id":"","url":"https://api.github.com/users/matchu","html_url":"https://github.com/matchu","followers_url":"https://api.github.com/users/matchu/followers","following_url":"https://api.github.com/users/matchu/following{/other_user}","gists_url":"https://api.github.com/users/matchu/gists{/gist_id}","starred_url":"https://api.github.com/users/matchu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/matchu/subscriptions","organizations_url":"https://api.github.com/users/matchu/orgs","repos_url":"https://api.github.com/users/matchu/repos","events_url":"https://api.github.com/users/matchu/events{/privacy}","received_events_url":"https://api.github.com/users/matchu/received_events","type":"User","site_admin":false},{"login":"kevinbarabash","id":1044413,"avatar_url":"https://avatars3.githubusercontent.com/u/1044413?v=4","gravatar_id":"","url":"https://api.github.com/users/kevinbarabash","html_url":"https://github.com/kevinbarabash","followers_url":"https://api.github.com/users/kevinbarabash/followers","following_url":"https://api.github.com/users/kevinbarabash/following{/other_user}","gists_url":"https://api.github.com/users/kevinbarabash/gists{/gist_id}","starred_url":"https://api.github.com/users/kevinbarabash/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kevinbarabash/subscriptions","organizations_url":"https://api.github.com/users/kevinbarabash/orgs","repos_url":"https://api.github.com/users/kevinbarabash/repos","events_url":"https://api.github.com/users/kevinbarabash/events{/privacy}","received_events_url":"https://api.github.com/users/kevinbarabash/received_events","type":"User","site_admin":false}],"milestone":null,"comments":6,"created_at":"2018-05-14T21:00:11Z","updated_at":"2018-05-15T22:02:42Z","closed_at":null,"author_association":"MEMBER","pull_request":{"url":"https://api.github.com/repos/Khan/wonder-blocks/pulls/84","html_url":"https://github.com/Khan/wonder-blocks/pull/84","diff_url":"https://github.com/Khan/wonder-blocks/pull/84.diff","patch_url":"https://github.com/Khan/wonder-blocks/pull/84.patch"},"body":"This adds in mobile support for all of the modal dialogs. Some of these were easier to implement than other (like with the standard modal). The one and two column modals had to be restructured so that their footer would be positioned outside of the ModalContentPane so that everything else could be scrollable (content, close button, etc.)\r\n\r\nI also went in and stripped out a lot of old Grid modal stuff that we're not using anymore (but we are using some of it!) I think there may be room for a new Grid component to make some of this process easier so that we don't have to use React Context but I'll save that for a future diff.\r\n\r\nIt's probably easiest to just look at the live example on Netlify to see how it works. The non-mobile version should work the same - and the mobile one should match what's proposed in Zeplin.\r\n\r\n* All modals should consume the entire viewport, nothing behind it should be visible.\r\n* The horizontal margins are tighter (16px) and the vertical are the same (32px).\r\n* If there is no title bar (and always in one and two-column modals) the \"X\" is positioned above the rest of the content and scrolls with the content.\r\n* All content, except for the title bar and the footer, scroll off of the screen.\r\n* The preview area in the standard modal disappears.\r\n* The sidebar in the two-column modal becomes a pseudo-header."},"comment":{"url":"https://api.github.com/repos/Khan/wonder-blocks/issues/comments/389327838","html_url":"https://github.com/Khan/wonder-blocks/pull/84#issuecomment-389327838","issue_url":"https://api.github.com/repos/Khan/wonder-blocks/issues/84","id":389327838,"user":{"login":"matchu","id":59218,"avatar_url":"https://avatars3.githubusercontent.com/u/59218?v=4","gravatar_id":"","url":"https://api.github.com/users/matchu","html_url":"https://github.com/matchu","followers_url":"https://api.github.com/users/matchu/followers","following_url":"https://api.github.com/users/matchu/following{/other_user}","gists_url":"https://api.github.com/users/matchu/gists{/gist_id}","starred_url":"https://api.github.com/users/matchu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/matchu/subscriptions","organizations_url":"https://api.github.com/users/matchu/orgs","repos_url":"https://api.github.com/users/matchu/repos","events_url":"https://api.github.com/users/matchu/events{/privacy}","received_events_url":"https://api.github.com/users/matchu/received_events","type":"User","site_admin":false},"created_at":"2018-05-15T22:02:42Z","updated_at":"2018-05-15T22:02:42Z","author_association":"CONTRIBUTOR","body":"Hmm okay. I think the general issue isn't so much the focus or the viewport height, but that scrolling seems to not work. I'm trying on my real phone now, and confirmed that when I launch a modal in Firefox for Android, it renders larger than the viewport but I can't scroll it at all. (Interestingly, in Chrome for Android, I _can_ scroll, but the modal seems to render at desktop size.)"}}
{"actor":{"display_login":"matchu"}}