Adds new "call to action" layer #13631
Conversation
…mple of it interacting with the existing amp-story-grid-layer templates.
|
|
||
| <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> | ||
| <link rel="canonical" href="grid-layer-templates.html"> | ||
| <style amp-boilerplate> |
There was a problem hiding this comment.
You should probably make this one line. Try copying and pasting the whole doc into https://validator.ampproject.org and make sure it's valid
There was a problem hiding this comment.
Done. Now it only complains about the new element since it's not supported by the validator yet. (Will be done in next PR).
| @@ -0,0 +1,53 @@ | |||
| /** | |||
| * Copyright 2017 The AMP HTML Authors. All Rights Reserved. | |||
There was a problem hiding this comment.
I like to live in the past.
| } | ||
| } | ||
|
|
||
| AMP.registerElement('amp-story-cta-layer', AmpStoryCtaLayer); |
There was a problem hiding this comment.
nit: add a newline at the end of the file
| z-index: 3 !important; | ||
| } | ||
|
|
||
| amp-story-cta-layer * { |
There was a problem hiding this comment.
I think we can probably drop this whole style; it's applied to grid layer for legacy reasons.
… with validator, fixes formatting.
| </amp-story> | ||
| </body> | ||
|
|
||
| </html> |
There was a problem hiding this comment.
Nit: new line at the end of the file
| </amp-story-cta-layer> | ||
| </amp-story-page> | ||
|
|
||
|
|
There was a problem hiding this comment.
Nit: here and at the top of the file, maybe only one line break?
|
/cc @calebcordry |
|
Cool! |
* Adds new "call to action" layer with corresponding styles, and an example of it interacting with the existing amp-story-grid-layer templates. * Removes unecessary tyling for child elements, fixes example to comply with validator, fixes formatting. * Fixes formatting. * fixup! Fixes formatting.
✨
#12169
This PR includes corresponding styles, and an example of it interacting with the existing amp-story-grid-layer templates.
A subsequent PR will be sent to include validation logic.
Example: