✨ Implement example code blocks with preview in iframe (ampproject#2637)

* WIP: Implement iframe preview for inline examples * Add orientation for example tag and import iframe for frame modes * 🍱 Add new icons for orientation toggle molecule ampproject#2053 * ✨ Add new orientation-toggle molecule styling ampproject#2053 * 🎨 Include orientation-toggle styling and icons To docs-detail and components-detail templates, where inline examples exist ampproject#2053 * 🎨 Prepare orientation-toggle in code-preview template ampproject#2053 * ✨ Add and include FAB styling to templates where inline previews exist ampproject#2053 * 🎨 Properly implement reload and fab buttons * ♻️ Refactor top- and side-frame markup Implement orientation classes, set initial preview url, add dynamic source attr for realod, adjust amp-iframe attrs ampproject#2053 * 💄 Rebrush code-preview styling with new markup and features ampproject#2053 * 💄 Fix scss headers ampproject#2053 * 💄 Adjust code-snippets scrollbar styling Increase thickness like the horizontal scrollbar, fix glitch in scrollbar-corner ampproject#2053 * 💄 Fix docs-details styling issues Remove general margin from amp-iframe, add padding to all ap--content containers, not only the first ampproject#2053 * Add documentation for inline example with frame preview * Example preview orientation toggle with unique id * 🎨 Add preview mode class to code-preview Better handle preview specific styling ampproject#2053 * 💄 Slightly adjust top preview styling Add padding to iframe and remove shading background-color ampproject#2053 * 💄 Optimize spacing for code-preview ampproject#2053 * For now remove side-preview from editor documentation * Use top-frame preview for guides where inline is not possible for all * 🍱 Reduce orientation icons to one toggle icon Due to design review changes ampproject#2053 * 🍱 Update reload icon for code-preview Due to design review changes ampproject#2053 * ♻️ Rebuild orienation logic based on two options Since we have only one but for toggling, we have to adjust the code to boolean principle. This is also a change due to design review ampproject#2053 * 🐛 Add initial preview.url also to top-frame examples Might fixes sporadically loading issues ampproject#2053 * 🎨 Fix indention ampproject#2053 * ♻️ Remove orientation-toggle and add code-preview-controls Since now multiple elements are used as controls, the orientation-toggle itself makes no sense anymore. This combines reload-button and orientation-toggle to one and styles it via code-preview.scss ampproject#2053 * 💄 Use new hover effect for controls Due to design review changes ampproject#2053 * 💄 Add fade-strip to code-snippet Due to design review changes ampproject#2053 * 💄 Add stronger box-shadow to iframe Due to design review changes ampproject#2053 * 💄 Slightly adjust spacing ampproject#2053 * Remove responsive orientation from editor documentation * highlight some text in source code preview documentation * Some text changes in the source code preview documentation * 🐛 Add correct markup for example pages ampproject#2053 * 🐛 Fix dynamic src for example pages iframe ampproject#2053 * 🐛 Fix focus state for code-preview control buttons ampproject#2053 * 🔥 Remove styles for deprecated responsive class ampproject#2053 * ♻️ Refactor aspect ratio handling of code-preview Both orientations will have always the same size now, even on mobile. The space left and right is handled by padding of the parent container. Also enabled fading-strip for code-snippet on mobile. ampproject#2053 * 🐛 Fix typo in class and wrong spacing ampproject#2053 * Add missing format parameter to inline example playground url * 👌 Add transition to orientation change IMPORTANT: I know that `padding` and `max-width` are not part of the **white listed properties for keyframes**, but in this case it is necessary to get the desired effect and since it causes no amp validation error, I think we can shut one eye 👀 ampproject#2053 * 👌 Add orientation change animation After a long try getting the orientation change animation as intuitive and 'realistic' as on real-life devices, we decided sticking with this solution. See PR ampproject#2637 conversion for more info. ampproject#2053 * 👌 Move box-shadow to parent element To prevent cropping it from `overflow: hidden` property ampproject#2053 * 💄 Slightly decrease initial opacity of controls To have more contrast when hovering. ampproject#2053 * 👌 Remove transition for non-hardware accelerated properties ampproject#2053 * 👌 Adjust orientation change animation Disabling rotation of iframe and just morph a background container via transform scale ampproject#2637 * ♻️ Refactor orientation-toggle mechanism Split fade and morph animations; use two seperate buttons and play the same morph animation reverse on the second button; hide and show buttons to keep feeling of one toggle button; use toggleClass to prevent use of amp-bind. ampproject#2637 * 🐛 Fix validation error for auto-scroll Add overflow: auto; to nav
getzaymo · Aug 2, 2019 · 217ffb9 · 217ffb9
1 parent df98176
commit 217ffb9
Show file tree

Hide file tree

Showing 39 changed files with 993 additions and 115 deletions.
diff --git a/contributing/documentation.md b/contributing/documentation.md
@@ -168,7 +168,7 @@ You can let a code sample have a preview or a link to open the code sample in th
 
 <pre>
   <code>
-[example preview="default: none|inline"
+[example preview="default: none|inline|top-frame"
          playground="default: true|false"
          imports="&lt;custom-element-1&gt;,&lt;custom-element-2&gt;,..."
          template="&lt;custom-template&gt;"]
@@ -179,15 +179,30 @@ You can let a code sample have a preview or a link to open the code sample in th
   </code>
 </pre>
 
-An inline preview is only possible if the code does not contain any head elements.
-For email content with resource links use the placeholder `{{server_for_email}}`.
+Use the `preview` attribute to define how the preview is generated:
+- **none**: No preview will be generated
+
+- **inline**: The example preview is displayed above the source code.
+  An inline preview is only possible for normal website examples if the code does not contain any `head` elements.
+  Use this option for small examples that do not need any styling or other `head` elements
+  (imports do not count, since they are specified via the `imports` attribute).
+
+- **top-frame**: The example preview is displayed above the source code inside an iframe.
+  The orientation can be toggled between `portrait` and `landscape` mode.
+  You can preselect the orientation by specifying the additional attribute:
+  - **orientation**: `default: landscape|portrait`
+
+If custom elements are needed, specify them in the imports attribute as a comma separated list
+with the name of the component followed by a colon and the version.
+
+For email content with resource links use the placeholder `{{server_for_email}}` in the source.
 
 <pre>
   <code>
-[example preview="inline"
+[example preview="top-frame" orientation="portrait"
          playground="true"
-         imports="amp-list"
-         template="amp-mustache"]
+         imports="amp-list:0.1"
+         template="amp-mustache:0.2"]
 ```html
 &lt;amp-list width=&quot;auto&quot; height=&quot;100&quot; layout=&quot;fixed-height&quot;
   src=&quot;{{server_for_email}}/static/inline-examples/data/amp-list-urls.json&quot;&gt;

diff --git a/frontend/icons/orientation-toggle.svg b/frontend/icons/orientation-toggle.svg
diff --git a/frontend/icons/reload.svg b/frontend/icons/reload.svg
diff --git a/frontend/scss/components/atoms/fab.scss b/frontend/scss/components/atoms/fab.scss
@@ -0,0 +1,65 @@
+/*
+
+#################
+### ATOM: fab ###
+#################
+
+### INFO:
+
+This is the play and close button for the example previews.
+
+*/
+
+@import '_extends.scss';
+@import '_functions.scss';
+@import '_mixins.scss';
+@import '_variables.scss';
+
+@import 'components/atoms/_text.scss';
+
+.#{atom('fab')} {
+  display: flex;
+  justify-content: center;
+  width: 56px;
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  padding: 0;
+  font-size: 24px;
+  line-height: 56px;
+  user-select: none;
+  cursor: pointer;
+  z-index: 14;
+  color: #fff;
+  background-color: #005AF0;
+  border: none;
+  border-radius: 50%;
+  box-shadow: 0px 3px 5px -1px rgba(0,0,0,.2),
+              0px 6px 10px 0px rgba(0,0,0,.14),
+              0px 1px 18px 0px rgba(0,0,0,.12);
+  transition: box-shadow 280ms cubic-bezier(.4,0,.2,1);
+  pointer-events: auto;
+
+  &:active {
+    box-shadow: 0px 7px 8px -4px rgba(0,0,0,.2),
+                0px 12px 17px 2px rgba(0,0,0,.14),
+                0px 5px 22px 4px rgba(0,0,0,.12);
+  }
+
+  &-show { transform: scale(0); animation: expand .25s ease-in-out .25s both; }
+  &-hide { transform: scale(1); animation: collapse .25s ease-in-out both; }
+
+  @media (min-width: 768px) {
+    display: none;
+  }
+
+  @keyframes collapse {
+    0% { transform: scale(1); }
+    100% { transform: scale(0); }
+  }
+
+  @keyframes expand {
+    0% { transform: scale(0); }
+    100% { transform: scale(1); }
+  }
+}
diff --git a/frontend/scss/components/molecules/code-snippet.scss b/frontend/scss/components/molecules/code-snippet.scss
@@ -18,25 +18,27 @@ Styles taken and combined from: https://raw.githubusercontent.com/richleland/pyg
 @import 'components/atoms/_text.scss';
 
 .#{molecule('code-snippet')} {
-
   overflow-x: auto;
   margin: 1.1rem 0 0 0;
   padding: 0 1em;
   color: color('white');
   line-height: 1.3em;
   background: color('ebony-clay');
-  scrollbar-width: thin;
   font-size: 0.9em;
 
   &::-webkit-scrollbar {
-    width: 2px;
+    width: 4px;
     height: 4px;
   }
 
   &::-webkit-scrollbar-thumb {
     background-color: color('oslo-gray');
   }
 
+  &::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+
   @media (min-width: 768px) {
     max-width: 100%;
     margin-right: -30px;

diff --git a/frontend/scss/components/molecules/device-toggle.scss b/frontend/scss/components/molecules/device-toggle.scss
@@ -1,8 +1,8 @@
 /*
 
-#############################
-### MOLECULE: breadcrumbs ###
-#############################
+###############################
+### MOLECULE: device-toggle ###
+###############################
 
 */