{"action":"created","issue":{"url":"https://api.github.com/repos/guardian/frontend/issues/15355","repository_url":"https://api.github.com/repos/guardian/frontend","labels_url":"https://api.github.com/repos/guardian/frontend/issues/15355/labels{/name}","comments_url":"https://api.github.com/repos/guardian/frontend/issues/15355/comments","events_url":"https://api.github.com/repos/guardian/frontend/issues/15355/events","html_url":"https://github.com/guardian/frontend/pull/15355","id":195838172,"number":15355,"title":"Don't use display: block links in email HTML","user":{"login":"joelochlann","id":5122968,"avatar_url":"https://avatars.githubusercontent.com/u/5122968?v=3","gravatar_id":"","url":"https://api.github.com/users/joelochlann","html_url":"https://github.com/joelochlann","followers_url":"https://api.github.com/users/joelochlann/followers","following_url":"https://api.github.com/users/joelochlann/following{/other_user}","gists_url":"https://api.github.com/users/joelochlann/gists{/gist_id}","starred_url":"https://api.github.com/users/joelochlann/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/joelochlann/subscriptions","organizations_url":"https://api.github.com/users/joelochlann/orgs","repos_url":"https://api.github.com/users/joelochlann/repos","events_url":"https://api.github.com/users/joelochlann/events{/privacy}","received_events_url":"https://api.github.com/users/joelochlann/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-12-15T15:42:17Z","updated_at":"2016-12-16T10:33:41Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/guardian/frontend/pulls/15355","html_url":"https://github.com/guardian/frontend/pull/15355","diff_url":"https://github.com/guardian/frontend/pull/15355.diff","patch_url":"https://github.com/guardian/frontend/pull/15355.patch"},"body":"Some email clients (all Windows versions of Outlook, and Gmail on Android) had a problem with the way I was putting `display: block` on the `<a></a>` element and using it for background colour and padding (my thought was that if I could get away with it, I would save quite a bit of markup and reduce the payload).\r\n\r\nSince I can't get away with it, I've introduced a bit more `@fullRow` table cruft and ended up with:\r\n- `@fullRow` with `.facia-card__text` wraps the headline & standfirst, providing background colour & internal padding\r\n- `<div class=\"facia-card\">` wraps the image and the `.facia-card__text`, providing top border\r\n- `<a class=\"facia-link>` wraps the facia-card div, providing links\r\n- `@paddedRow` wraps the lot and provides margins between cards\r\n\r\nI also added in some logic to set the `width` attribute on the img elements to the width of the container. I didn't think this affected anything but it does - in Outlook, of course. So this fixed some knock-on problems from my changes.\r\n\r\nAnd I moved some styles out of generic `h1`, `p` etc into classes which describe the role of that element - while refactoring, having the styles tied to specific tags was a nightmare (see also: BEM).\r\n\r\n## Outlook 2007 before\r\n![picture 370](https://cloud.githubusercontent.com/assets/5122968/21230421/d3dc44ce-c2dc-11e6-9e3e-25a7794bfb31.png)\r\n\r\n## Outlook 2007 after\r\n![picture 368](https://cloud.githubusercontent.com/assets/5122968/21230434/dc206ca0-c2dc-11e6-92a8-34114dc27b31.png)\r\n\r\n## Android Gmail before\r\n![picture 371](https://cloud.githubusercontent.com/assets/5122968/21230440/e2f81a1e-c2dc-11e6-98d4-c063b6af98f2.png)\r\n\r\n\r\n## Android Gmail after\r\n![picture 369](https://cloud.githubusercontent.com/assets/5122968/21230441/e7ef9ce0-c2dc-11e6-9dfe-6d7330d89dd4.png)\r\n\r\n\r\n@guardian/dotcom-platform @lmath "},"comment":{"url":"https://api.github.com/repos/guardian/frontend/issues/comments/267565075","html_url":"https://github.com/guardian/frontend/pull/15355#issuecomment-267565075","issue_url":"https://api.github.com/repos/guardian/frontend/issues/15355","id":267565075,"user":{"login":"SiAdcock","id":5931528,"avatar_url":"https://avatars.githubusercontent.com/u/5931528?v=3","gravatar_id":"","url":"https://api.github.com/users/SiAdcock","html_url":"https://github.com/SiAdcock","followers_url":"https://api.github.com/users/SiAdcock/followers","following_url":"https://api.github.com/users/SiAdcock/following{/other_user}","gists_url":"https://api.github.com/users/SiAdcock/gists{/gist_id}","starred_url":"https://api.github.com/users/SiAdcock/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/SiAdcock/subscriptions","organizations_url":"https://api.github.com/users/SiAdcock/orgs","repos_url":"https://api.github.com/users/SiAdcock/repos","events_url":"https://api.github.com/users/SiAdcock/events{/privacy}","received_events_url":"https://api.github.com/users/SiAdcock/received_events","type":"User","site_admin":false},"created_at":"2016-12-16T10:33:41Z","updated_at":"2016-12-16T10:33:41Z","body":"Tidy stuff, dude 👍 "}}
{"actor":{"display_login":"SiAdcock"}}