{"action":"created","issue":{"url":"https://api.github.com/repos/guardian/frontend/issues/12586","repository_url":"https://api.github.com/repos/guardian/frontend","labels_url":"https://api.github.com/repos/guardian/frontend/issues/12586/labels{/name}","comments_url":"https://api.github.com/repos/guardian/frontend/issues/12586/comments","events_url":"https://api.github.com/repos/guardian/frontend/issues/12586/events","html_url":"https://github.com/guardian/frontend/pull/12586","id":149128455,"number":12586,"title":"Fabric advert template - first commit","user":{"login":"jbreckmckye","id":3148617,"avatar_url":"https://avatars.githubusercontent.com/u/3148617?v=3","gravatar_id":"","url":"https://api.github.com/users/jbreckmckye","html_url":"https://github.com/jbreckmckye","followers_url":"https://api.github.com/users/jbreckmckye/followers","following_url":"https://api.github.com/users/jbreckmckye/following{/other_user}","gists_url":"https://api.github.com/users/jbreckmckye/gists{/gist_id}","starred_url":"https://api.github.com/users/jbreckmckye/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jbreckmckye/subscriptions","organizations_url":"https://api.github.com/users/jbreckmckye/orgs","repos_url":"https://api.github.com/users/jbreckmckye/repos","events_url":"https://api.github.com/users/jbreckmckye/events{/privacy}","received_events_url":"https://api.github.com/users/jbreckmckye/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":6,"created_at":"2016-04-18T11:51:44Z","updated_at":"2016-04-19T14:06:54Z","closed_at":"2016-04-18T14:48:58Z","pull_request":{"url":"https://api.github.com/repos/guardian/frontend/pulls/12586","html_url":"https://github.com/guardian/frontend/pull/12586","diff_url":"https://github.com/guardian/frontend/pull/12586.diff","patch_url":"https://github.com/guardian/frontend/pull/12586.patch"},"body":"This is the first pass of a template for the all new **fabric adverts** that The Guardian will soon be showcasing at AdWeek. \r\n\r\nFabric is a 250 high, fluid width ad that can be served without need for a responsive takeover in DFP. Ultimately, it's part of a collection ('fabric', 'focus' and 'frame') that underpin the Guardian's resolve for **'fewer, better ads'**.\r\n\r\nFabric will do the following things:\r\n\r\n- It will always be 250px high. This will let us move ads over to a consistent slot height, and reduce the page yank that comes when we can't reserve the right ad height on initial page render.\r\n- It will be flush width in single-column layouts\r\n- It'll be expandable to 500px high when embedded in mobile fronts\r\n- It will support 'fixed' style backgrounds\r\n- It will support 'parallax' style background scrolling\r\n- It will appear after the first container on mobile fronts\r\n\r\nThis pull request implements these primary requirements:\r\n\r\n1. It gives us a switch for requesting a new type of adverts (88x71 size)\r\n2. It implements a model and view for the new ad type\r\n3. It serves this new advert to inlines and top slot ads\r\n4. It implements the flush appearance in single-column (i.e. mobile) layouts, and a full-width layout in the top slot\r\n5. It implements a desktop-only fixed background (I'm investigating approaches to making this work on mobile)\r\n6. It makes top-slot fabric ads play nicely with sticky banners\r\n7. It lets me expand the advert when it's in a mobile front\r\n\r\nHere are some screenshots:\r\n\r\n_Mobile front advert with a fixed background:_\r\n![image](https://cloud.githubusercontent.com/assets/3148617/14603038/63c72744-0563-11e6-858d-998a5c16e9eb.png)\r\n\r\n_The selfsame advert expanded:_\r\n![image](https://cloud.githubusercontent.com/assets/3148617/14603073/967404be-0563-11e6-8ece-da15aa4f78cb.png)\r\n\r\n_As a top slot:_\r\n![image](https://cloud.githubusercontent.com/assets/3148617/14603022/4ed4d7f0-0563-11e6-8d73-e654dfac25a9.png)\r\n\r\n_Inside a desktop container:_\r\n![image](https://cloud.githubusercontent.com/assets/3148617/14603189/3e2d97b0-0564-11e6-8e01-b748edce5e2b.png)\r\n\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/guardian/frontend/issues/comments/211936282","html_url":"https://github.com/guardian/frontend/pull/12586#issuecomment-211936282","issue_url":"https://api.github.com/repos/guardian/frontend/issues/12586","id":211936282,"user":{"login":"jbreckmckye","id":3148617,"avatar_url":"https://avatars.githubusercontent.com/u/3148617?v=3","gravatar_id":"","url":"https://api.github.com/users/jbreckmckye","html_url":"https://github.com/jbreckmckye","followers_url":"https://api.github.com/users/jbreckmckye/followers","following_url":"https://api.github.com/users/jbreckmckye/following{/other_user}","gists_url":"https://api.github.com/users/jbreckmckye/gists{/gist_id}","starred_url":"https://api.github.com/users/jbreckmckye/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jbreckmckye/subscriptions","organizations_url":"https://api.github.com/users/jbreckmckye/orgs","repos_url":"https://api.github.com/users/jbreckmckye/repos","events_url":"https://api.github.com/users/jbreckmckye/events{/privacy}","received_events_url":"https://api.github.com/users/jbreckmckye/received_events","type":"User","site_admin":false},"created_at":"2016-04-19T14:06:54Z","updated_at":"2016-04-19T14:06:54Z","body":"@Calanthe - you can see it in the flesh at http://m.code.dev-theguardian.com/world?adtest=jbmk - view it under a mobile screen size and click on the inline ad."}}