Skip to content

Commit

Permalink
use data-css-strict on amp4email (#5054)
Browse files Browse the repository at this point in the history
  • Loading branch information
@patrickkettner
patrickkettner authored Dec 10, 2020
1 parent 8c4b102 commit 78e9add
Show file tree
Hide file tree
Showing 48 changed files with 98 additions and 93 deletions.
2 changes: 1 addition & 1 deletion boilerplate/templates/files/email.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!doctype html>
<html ⚡4email>
<html ⚡4email data-css-strict>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion examples/source/0.introduction/Hello_World_Email.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<!-- Doctype declaration is required. -->
<!doctype html>
<!-- This tells everyone that this is an AMP email. `<html amp4email>` works too. -->
<html ⚡4email lang="en">
<html ⚡4email lang="en" data-css-strict>
<!-- ## Head -->
<!-- -->
<head>
Expand Down
28 changes: 14 additions & 14 deletions examples/source/1.components/amp-autocomplete-email.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@
<!--
## Introduction
An autocomplete-enabled input field suggests completed results corresponding to the user input as they type into the input field.
An autocomplete-enabled input field suggests completed results corresponding to the user input as they type into the input field.
This feature can help the user to carry out their task more quickly.
Data can be fetched from a JSON endpoint.
-->
<!-- -->
<!DOCTYPE html>
<html ⚡4email lang="en">
<html ⚡4email lang="en" data-css-strict>
<head>
<meta charset="utf-8" />
<!-- The AMP runtime.-->
Expand All @@ -25,8 +25,8 @@
visibility: hidden;
}
</style>
<!--
## Setup
<!--
## Setup
Import the `amp-autocomplete` component.
-->
Expand Down Expand Up @@ -71,10 +71,10 @@
</head>
<body>
<h2>Basic usage</h2>
<!--
## Basic usage
<!--
## Basic usage
An `amp-autocomplete` must always have an **input field** specified with an `input` or `textarea` tag and a datasource.
An `amp-autocomplete` must always have an **input field** specified with an `input` or `textarea` tag and a datasource.
When a user types into this input field, relevant suggestions will automatically appear below the input field.
A **datasource** must be a JSON object containing an array property `items` and can be provided as remote data through the `src` attribute.
Expand All @@ -96,7 +96,7 @@ <h2>Basic usage</h2>
</amp-autocomplete>

<h2>Suggesting rich content</h2>
<!--
<!--
## Suggesting rich content
More complicated data can be passed into autocompleted with an array of JsonObjects in "items".
Expand All @@ -105,7 +105,7 @@ <h2>Suggesting rich content</h2>
{ "items" : [
{
"value" : "Albany",
"state" : "New York",
"state" : "New York",
"areaCode" : 518,
"population" : 98251
}, {
Expand All @@ -128,7 +128,7 @@ <h2>Suggesting rich content</h2>
<template type="amp-mustache" id="amp-template-custom">
<div class="city-item" data-value="{{value}}, {{state}}">
<div>{{value}}, {{state}}</div>
<div class="custom-population">Population: {{population}}</div>
<div class="custom-population">Population: {{population}}</div>
</div>
</template>
```
Expand All @@ -148,13 +148,13 @@ <h2>Suggesting rich content</h2>
</amp-autocomplete>

<h2>Inline autocomplete</h2>
<!--
<!--
## Displaying suggestions inline
Suggestions can be triggered on a specified character token in an `amp-autocomplete` for multiple autosuggestions in a single input by using the `inline` attribute.
The token for triggering the autosuggestion must be the provided value for the `inline` attribute. For example, if `inline="+"`, then when the `+` token is entered by the user,
any relevant suggestions will be displayed. Otherwise, the field will behave the same as an unenhanced input field. The `inline` attribute does not support the empty string,
any relevant suggestions will be displayed. Otherwise, the field will behave the same as an unenhanced input field. The `inline` attribute does not support the empty string,
or `""` as a legitimate token value on `amp-autocomplete`.
-->
<div>
Expand Down
56 changes: 28 additions & 28 deletions examples/source/1.components/amp-autocomplete.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!--
## Introduction
An autocomplete-enabled input field suggests completed results corresponding to the user input as they type into the input field.
An autocomplete-enabled input field suggests completed results corresponding to the user input as they type into the input field.
This feature can help the user to carry out their task more quickly.
Data can either be fetched from a JSON endpoint or locally from amp-state.
-->
<!-- -->
Expand All @@ -15,8 +15,8 @@
<meta name="viewport" content="width=device-width">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>amp-autocomplete</title>
<!--
## Setup
<!--
## Setup
Import the `amp-autocomplete` component.
-->
Expand Down Expand Up @@ -90,10 +90,10 @@
</head>
<body>
<h2>Basic usage</h2>
<!--
## Basic usage
<!--
## Basic usage
An `amp-autocomplete` must always be nested in a form and have an **input field** specified with an `input` or `textarea` tag and a datasource.
An `amp-autocomplete` must always be nested in a form and have an **input field** specified with an `input` or `textarea` tag and a datasource.
When a user types into this input field, relevant suggestions will automatically appear below the input field.
A **datasource** must be a JSON object containing an array property `items`, and can be specified inline with a child `script type="application/json"` tag, or a server endpoint specified with a `src` attribute.
Expand All @@ -111,7 +111,7 @@ <h2>Basic usage</h2>
</amp-autocomplete>
</form>

<!--
<!--
Alternatively, a datasource can also be provided as remote data through the `src` attribute.
-->
<form class="sample-form" method="post"
Expand All @@ -123,7 +123,7 @@ <h2>Basic usage</h2>
</form>

<h2>Dynamic <code>src</code></h2>
<!--
<!--
## Dynamic `src`
The content of an `amp-autocomplete` can be changed dynamically by modifying its `src` value using `amp-bind`.
Expand All @@ -143,7 +143,7 @@ <h2>Dynamic <code>src</code></h2>
[src]="srcUrl">
<input name="name" required>
</amp-autocomplete>
<input name="submit-button" type="submit" value="Submit"><br>
<input name="submit-button" type="submit" value="Submit"><br>
</div>
<div submit-success>
<template type="amp-mustache">
Expand All @@ -154,7 +154,7 @@ <h2>Dynamic <code>src</code></h2>
</div>

<h2>Suggesting rich content</h2>
<!--
<!--
## Suggesting rich content
More complicated data can be passed into autocompleted with an array of JsonObjects in "items".
Expand All @@ -163,7 +163,7 @@ <h2>Suggesting rich content</h2>
{ "items" : [
{
"city" : "Albany",
"state" : "New York",
"state" : "New York",
"areaCode" : 518,
"population" : 98251
}, {
Expand All @@ -186,12 +186,12 @@ <h2>Suggesting rich content</h2>
<template type="amp-mustache" id="amp-template-custom">
<div class="city-item" data-value="{{city}}, {{state}}">
<div>{{city}}, {{state}}</div>
<div class="custom-population">Population: {{population}}</div>
<div class="custom-population">Population: {{population}}</div>
</div>
</template>
```
By default, `amp-autocomplete` will suggest items by matching on the "value" property of each JsonObject, but for more specified data, an attribute `filter-value` can be provided to signify the appropriate property to search on.
By default, `amp-autocomplete` will suggest items by matching on the "value" property of each JsonObject, but for more specified data, an attribute `filter-value` can be provided to signify the appropriate property to search on.
In the above example, we will want to search on the property `name`, because that is what the user will most likely search for.
-->
<form class="sample-form"
Expand All @@ -206,7 +206,7 @@ <h2>Suggesting rich content</h2>
{ "items" : [
{
"city" : "Albany",
"state" : "New York",
"state" : "New York",
"areaCode" : 518,
"population" : 98251
}, {
Expand All @@ -225,7 +225,7 @@ <h2>Suggesting rich content</h2>
<template type="amp-mustache" id="amp-template-custom">
<div class="city-item" data-value="{{city}}, {{state}}">
<div>{{city}}, {{state}}</div>
<div class="custom-population">Population: {{population}}</div>
<div class="custom-population">Population: {{population}}</div>
</div>
</template>
</amp-autocomplete>
Expand All @@ -242,7 +242,7 @@ <h2>Suggesting rich content</h2>
</form>

<h2>Display default items</h2>
<!--
<!--
## Displaying default items
Default suggestions for an `amp-autocomplete` can be displayed on user `focus` using rich content templating and the `min-characters` attribute on `amp-autocomplete`.
Expand Down Expand Up @@ -276,20 +276,20 @@ <h2>Display default items</h2>
action-xhr="<% hosts.platform %>/documentation/examples/api/echo"
target="_top">
<amp-autocomplete filter="substring" min-characters="0" filter-value="name" [src]="manualFilterData">
<input type="search" name="product" on="input-debounced:AMP.setState({ manualFilterData: event.value.length == 0 ?
<input type="search" name="product" on="input-debounced:AMP.setState({ manualFilterData: event.value.length == 0 ?
initialInventory : generalInventory })">
<amp-state id="initialInventory">
<script type="application/json">
{ "items" : [
{ "isInitial": "true",
{ "isInitial": "true",
"name": "apple"
}, { "isInitial": "true",
}, { "isInitial": "true",
"name": "grapes"
}, { "isInitial": "true",
}, { "isInitial": "true",
"name": "whole milk"
}, { "isInitial": "true",
}, { "isInitial": "true",
"name": "banana"
} ]
} ]
}
</script>
</amp-state>
Expand All @@ -307,7 +307,7 @@ <h2>Display default items</h2>
</div>
</div>
{{/isInitial}}
</template>
</template>
</amp-autocomplete>
<input type="submit" value="Search">
<div submit-success>
Expand All @@ -322,13 +322,13 @@ <h2>Display default items</h2>
</div>

<h2>Inline autocomplete</h2>
<!--
<!--
## Displaying suggestions inline
Suggestions can be triggered on a specified character token in an `amp-autocomplete` for multiple autosuggestions in a single input by using the `inline` attribute.
The token for triggering the autosuggestion must be the provided value for the `inline` attribute. For example, if `inline="+"`, then when the `+` token is entered by the user,
any relevant suggestions will be displayed. Otherwise, the field will behave the same as an unenhanced input field. The `inline` attribute does not support the empty string,
any relevant suggestions will be displayed. Otherwise, the field will behave the same as an unenhanced input field. The `inline` attribute does not support the empty string,
or `""` as a legitimate token value on `amp-autocomplete`.
-->
<div>
Expand Down Expand Up @@ -410,7 +410,7 @@ <h2>Inline autocomplete</h2>
</div>

<h2>Query data sources</h2>
<!--
<!--
## Specifying query parameters
User inputs can be passed to a statically generated endpoint when the `query` attribute is paired with the `src` attribute.
Expand Down
2 changes: 1 addition & 1 deletion examples/source/interactivity-dynamic-content/Advanced_Server_Request.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@

<!-- -->
<!doctype html>
<html ⚡4email lang="en">
<html ⚡4email lang="en" data-css-strict>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion examples/source/interactivity-dynamic-content/Article_Bookmark_Email/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@

<!-- -->
<!doctype html>
<html ⚡4email lang="en">
<html ⚡4email lang="en" data-css-strict>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion examples/source/interactivity-dynamic-content/Conference_Survey_Email.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

<!-- -->
<!doctype html>
<html ⚡4email lang="en">
<html ⚡4email lang="en" data-css-strict>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion examples/source/interactivity-dynamic-content/Dynamically_updating_items_in_a_feed.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@

<!-- -->
<!doctype html>
<html ⚡4email lang="en">
<html ⚡4email lang="en" data-css-strict>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion examples/static/samples/standalone/amp-email/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!doctype html>
<html ⚡4email lang="en">
<html ⚡4email lang="en" data-css-strict>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
Expand Down
4 changes: 2 additions & 2 deletions frontend/templates/layouts/example-pages/amp-email-page.j2
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!doctype html>
<html ⚡4email>
<html ⚡4email data-css-strict>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
Expand All @@ -23,4 +23,4 @@
{{example.body|render|safe}}
{% endif %}
</body>
</html>
</html>
2 changes: 1 addition & 1 deletion pages/content/amp-dev/documentation/guides-and-tutorials/integrate/add-email.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ Hello World in plain text!
Content-Type: text/x-amp-html; charset="UTF-8"

<!doctype html>
<html ⚡4email>
<html ⚡4email data-css-strict>
<head>
<meta charset="utf-8">
<style amp4email-boilerplate>body{visibility:hidden}</style>
Expand Down
2 changes: 1 addition & 1 deletion pages/content/amp-dev/documentation/guides-and-tutorials/integrate/add-email@es.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ Hello World in plain text!
Content-Type: text/x-amp-html; charset="UTF-8"

<!doctype html>
<html ⚡4email>
<html ⚡4email data-css-strict>
<head>
<meta charset="utf-8">
<style amp4email-boilerplate>body{visibility:hidden}</style>
Expand Down
2 changes: 1 addition & 1 deletion pages/content/amp-dev/documentation/guides-and-tutorials/integrate/add-email@id.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ Hello World in plain text!
Content-Type: text/x-amp-html; charset="UTF-8"

<!doctype html>
<html ⚡4email>
<html ⚡4email data-css-strict>
<head>
<meta charset="utf-8">
<style amp4email-boilerplate>body{visibility:hidden}</style>
Expand Down
2 changes: 1 addition & 1 deletion pages/content/amp-dev/documentation/guides-and-tutorials/integrate/add-email@it.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ Ciao mondo in testo semplice!
Content-Type: text/x-amp-html; charset="UTF-8"

<!doctype html>
<html ⚡4email>
<html ⚡4email data-css-strict>
<head>
<meta charset="utf-8">
<style amp4email-boilerplate>body{visibility:hidden}</style>
Expand Down
2 changes: 1 addition & 1 deletion pages/content/amp-dev/documentation/guides-and-tutorials/integrate/add-email@ja.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ Hello World in plain text!
Content-Type: text/x-amp-html; charset="UTF-8"

<!doctype html>
<html ⚡4email>
<html ⚡4email data-css-strict>
<head>
<meta charset="utf-8">
<style amp4email-boilerplate>body{visibility:hidden}</style>
Expand Down
2 changes: 1 addition & 1 deletion pages/content/amp-dev/documentation/guides-and-tutorials/integrate/add-email@ko.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ Hello World in plain text!
Content-Type: text/x-amp-html; charset="UTF-8"

<!doctype html>
<html ⚡4email>
<html ⚡4email data-css-strict>
<head>
<meta charset="utf-8">
<style amp4email-boilerplate>body{visibility:hidden}</style>
Expand Down
Loading

0 comments on commit 78e9add

Please sign in to comment.