{"action":"created","issue":{"url":"https://api.github.com/repos/Automattic/wp-calypso/issues/863","repository_url":"https://api.github.com/repos/Automattic/wp-calypso","labels_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/863/labels{/name}","comments_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/863/comments","events_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/863/events","html_url":"https://github.com/Automattic/wp-calypso/issues/863","id":119068760,"number":863,"title":"Checkout: validation errors on mobile","user":{"login":"fabianapsimoes","id":1248436,"avatar_url":"https://avatars.githubusercontent.com/u/1248436?v=3","gravatar_id":"","url":"https://api.github.com/users/fabianapsimoes","html_url":"https://github.com/fabianapsimoes","followers_url":"https://api.github.com/users/fabianapsimoes/followers","following_url":"https://api.github.com/users/fabianapsimoes/following{/other_user}","gists_url":"https://api.github.com/users/fabianapsimoes/gists{/gist_id}","starred_url":"https://api.github.com/users/fabianapsimoes/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/fabianapsimoes/subscriptions","organizations_url":"https://api.github.com/users/fabianapsimoes/orgs","repos_url":"https://api.github.com/users/fabianapsimoes/repos","events_url":"https://api.github.com/users/fabianapsimoes/events{/privacy}","received_events_url":"https://api.github.com/users/fabianapsimoes/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/Checkout","name":"Checkout","color":"006b75"},{"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/[Status]%20In%20Progress","name":"[Status] In Progress","color":"207de5"},{"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/[Status]%20Needs%20Design%20Review","name":"[Status] Needs Design Review","color":"009800"},{"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/[Type]%20Bug","name":"[Type] Bug","color":"e11d21"}],"state":"open","locked":false,"assignee":{"login":"gziolo","id":699132,"avatar_url":"https://avatars.githubusercontent.com/u/699132?v=3","gravatar_id":"","url":"https://api.github.com/users/gziolo","html_url":"https://github.com/gziolo","followers_url":"https://api.github.com/users/gziolo/followers","following_url":"https://api.github.com/users/gziolo/following{/other_user}","gists_url":"https://api.github.com/users/gziolo/gists{/gist_id}","starred_url":"https://api.github.com/users/gziolo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gziolo/subscriptions","organizations_url":"https://api.github.com/users/gziolo/orgs","repos_url":"https://api.github.com/users/gziolo/repos","events_url":"https://api.github.com/users/gziolo/events{/privacy}","received_events_url":"https://api.github.com/users/gziolo/received_events","type":"User","site_admin":false},"assignees":[{"login":"gziolo","id":699132,"avatar_url":"https://avatars.githubusercontent.com/u/699132?v=3","gravatar_id":"","url":"https://api.github.com/users/gziolo","html_url":"https://github.com/gziolo","followers_url":"https://api.github.com/users/gziolo/followers","following_url":"https://api.github.com/users/gziolo/following{/other_user}","gists_url":"https://api.github.com/users/gziolo/gists{/gist_id}","starred_url":"https://api.github.com/users/gziolo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gziolo/subscriptions","organizations_url":"https://api.github.com/users/gziolo/orgs","repos_url":"https://api.github.com/users/gziolo/repos","events_url":"https://api.github.com/users/gziolo/events{/privacy}","received_events_url":"https://api.github.com/users/gziolo/received_events","type":"User","site_admin":false}],"milestone":{"url":"https://api.github.com/repos/Automattic/wp-calypso/milestones/51","html_url":"https://github.com/Automattic/wp-calypso/milestones/Gold:%20backlog","labels_url":"https://api.github.com/repos/Automattic/wp-calypso/milestones/51/labels","id":1506463,"number":51,"title":"Gold: backlog","description":"","creator":{"login":"gziolo","id":699132,"avatar_url":"https://avatars.githubusercontent.com/u/699132?v=3","gravatar_id":"","url":"https://api.github.com/users/gziolo","html_url":"https://github.com/gziolo","followers_url":"https://api.github.com/users/gziolo/followers","following_url":"https://api.github.com/users/gziolo/following{/other_user}","gists_url":"https://api.github.com/users/gziolo/gists{/gist_id}","starred_url":"https://api.github.com/users/gziolo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gziolo/subscriptions","organizations_url":"https://api.github.com/users/gziolo/orgs","repos_url":"https://api.github.com/users/gziolo/repos","events_url":"https://api.github.com/users/gziolo/events{/privacy}","received_events_url":"https://api.github.com/users/gziolo/received_events","type":"User","site_admin":false},"open_issues":39,"closed_issues":41,"state":"open","created_at":"2016-01-14T08:06:37Z","updated_at":"2016-09-06T12:09:28Z","due_on":null,"closed_at":null},"comments":9,"created_at":"2015-11-26T15:52:48Z","updated_at":"2016-10-07T14:22:43Z","closed_at":null,"body":"Originally reported by @scruffian.\r\n\r\nIf I have an error when checking out on mobile, it becomes difficult to complete the checkout form, because the errors hide the fields, so I can't edit them. When I scroll the error doesn't move away, so I have to dismiss it. The obvious solution to this is show the errors inline, but that's not a quick fix.\r\n\r\n![img_2759](https://cloud.githubusercontent.com/assets/275961/10190572/82d07678-6765-11e5-88f3-c1cad4ddcba7.jpg)\r\n"},"comment":{"url":"https://api.github.com/repos/Automattic/wp-calypso/issues/comments/252265528","html_url":"https://github.com/Automattic/wp-calypso/issues/863#issuecomment-252265528","issue_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/863","id":252265528,"user":{"login":"breezyskies","id":3011211,"avatar_url":"https://avatars.githubusercontent.com/u/3011211?v=3","gravatar_id":"","url":"https://api.github.com/users/breezyskies","html_url":"https://github.com/breezyskies","followers_url":"https://api.github.com/users/breezyskies/followers","following_url":"https://api.github.com/users/breezyskies/following{/other_user}","gists_url":"https://api.github.com/users/breezyskies/gists{/gist_id}","starred_url":"https://api.github.com/users/breezyskies/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/breezyskies/subscriptions","organizations_url":"https://api.github.com/users/breezyskies/orgs","repos_url":"https://api.github.com/users/breezyskies/repos","events_url":"https://api.github.com/users/breezyskies/events{/privacy}","received_events_url":"https://api.github.com/users/breezyskies/received_events","type":"User","site_admin":false},"created_at":"2016-10-07T14:22:43Z","updated_at":"2016-10-07T14:22:43Z","body":"> Though with the current design of the form it can be hard to provide flexible solution for the longer error messages.\r\n\r\nThis is a known issue, and one of the reasons we haven't moved to inline validation yet, as it would require a rethink of the form design (and likely a/b testing to make sure there isn't any major impact on revenue). The checkout form was one of the earliest pieces that we designed for Calypso store, so it's quite out of sync with the current patterns.\r\n\r\nThe simplest option here would probably be moving country and postal code to their own line, giving both a bit more room for inline validation, all fields going to full width at the <480px breakpoint. A quick inspector mockup:\r\n\r\n<img width=\"608\" alt=\"screen shot 2016-10-07 at 7 12 16 am\" src=\"https://cloud.githubusercontent.com/assets/3011211/19193070/7194dd68-8c5d-11e6-8f86-18717ff251aa.png\">\r\n\r\nAnother thing noted in checkout is that the label originally used the [\"float label\" pattern](http://bradfrost.com/blog/post/float-label-pattern/), but that appears to be broken, causing a usability problem (once you start typing in a field, there's no longer any indication of what that field is). We should probably update to use the Calypso standard labels at this point (this could be handled in a separate PR but just wanted to note it here). @mikeshelton1503 previously mocked up a version of this for Purchases:\r\n\r\n<img width=\"679\" alt=\"screen shot 2016-10-07 at 7 20 34 am\" src=\"https://cloud.githubusercontent.com/assets/3011211/19193401/c166c120-8c5e-11e6-820d-ceea09e4be80.png\">\r\n"}}
{"actor":{"display_login":"breezyskies"}}