Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨ Implement example code blocks with preview in iframe #2637

Merged
merged 54 commits into from
Aug 2, 2019
Merged

✨ Implement example code blocks with preview in iframe #2637

Changes from 1 commit
Commits
Show all changes
54 commits
Select commit Hold shift + click to select a range
8d35b26
WIP: Implement iframe preview for inline examples
tharders Jun 28, 2019
d08444b
Merge branch 'future' into feature/example_preview_in_iframe
sebil Jul 24, 2019
06e44ee
Add orientation for example tag and import iframe for frame modes
tharders Jul 24, 2019
83ac9b3
:bento: Add new icons for orientation toggle molecule
sebil Jul 26, 2019
9cbe9a7
:sparkles: Add new orientation-toggle molecule styling
sebil Jul 26, 2019
4e85847
:art: Include orientation-toggle styling and icons
sebil Jul 26, 2019
6e9e406
:art: Prepare orientation-toggle in code-preview template
sebil Jul 26, 2019
17ae6fa
:sparkles: Add and include FAB styling to templates
sebil Jul 26, 2019
1acb031
:art: Properly implement reload and fab buttons
sebil Jul 26, 2019
0defe8c
:recycle: Refactor top- and side-frame markup
sebil Jul 26, 2019
97b6654
:lipstick: Rebrush code-preview styling
sebil Jul 26, 2019
29acded
:lipstick: Fix scss headers
sebil Jul 26, 2019
ff4c148
:lipstick: Adjust code-snippets scrollbar styling
sebil Jul 26, 2019
197393a
:lipstick: Fix docs-details styling issues
sebil Jul 26, 2019
0d69b0b
Add documentation for inline example with frame preview
tharders Jul 26, 2019
fb76257
Example preview orientation toggle with unique id
tharders Jul 26, 2019
09672f1
:art: Add preview mode class to code-preview
sebil Jul 26, 2019
257a7d2
Merge branch 'feature/example_preview_in_iframe' of github.com:amppro…
sebil Jul 26, 2019
d94b3bc
:lipstick: Slightly adjust top preview styling
sebil Jul 26, 2019
59c549a
:lipstick: Optimize spacing for code-preview
sebil Jul 29, 2019
5e31ff7
For now remove side-preview from editor documentation
tharders Jul 29, 2019
1291ef7
Use top-frame preview for guides where inline is not possible for all
tharders Jul 29, 2019
e8f5d97
:bento: Reduce orientation icons to one toggle icon
sebil Jul 29, 2019
0984f18
:bento: Update reload icon for code-preview
sebil Jul 29, 2019
0982243
:recycle: Rebuild orienation logic based on two options
sebil Jul 29, 2019
aa814ef
:bug: Add initial preview.url also to top-frame examples
sebil Jul 29, 2019
84587c5
:art: Fix indention
sebil Jul 29, 2019
ab5534d
:recycle: Remove orientation-toggle and add code-preview-controls
sebil Jul 29, 2019
8f7918a
:lipstick: Use new hover effect for controls
sebil Jul 29, 2019
3db3d6f
:lipstick: Add fade-strip to code-snippet
sebil Jul 29, 2019
8aa29f5
:lipstick: Add stronger box-shadow to iframe
sebil Jul 29, 2019
d8fdfe9
Merge branch 'feature/example_preview_in_iframe' of github.com:amppro…
sebil Jul 29, 2019
d2e9439
:lipstick: Slightly adjust spacing
sebil Jul 29, 2019
fe008ee
Merge branch 'future' into feature/example_preview_in_iframe
sebil Jul 29, 2019
71c144d
Remove responsive orientation from editor documentation
tharders Jul 30, 2019
1e6c0a9
highlight some text in source code preview documentation
tharders Jul 30, 2019
99ef464
Some text changes in the source code preview documentation
tharders Jul 30, 2019
fe0f7fa
:bug: Add correct markup for example pages
sebil Jul 30, 2019
70671b3
:bug: Fix dynamic src for example pages iframe
sebil Jul 30, 2019
dadb38f
Merge branch 'feature/example_preview_in_iframe' of github.com:amppro…
sebil Jul 30, 2019
efc5423
:bug: Fix focus state for code-preview control buttons
sebil Jul 30, 2019
329483b
:fire: Remove styles for deprecated responsive class
sebil Jul 30, 2019
3323f64
:recycle: Refactor aspect ratio handling of code-preview
sebil Jul 30, 2019
56ecf23
:bug: Fix typo in class and wrong spacing
sebil Jul 30, 2019
c4d9593
Add missing format parameter to inline example playground url
tharders Jul 30, 2019
5fca4b5
:ok_hand: Add transition to orientation change
sebil Jul 31, 2019
9bad5ef
:ok_hand: Add orientation change animation
sebil Jul 31, 2019
86bc756
:ok_hand: Move box-shadow to parent element
sebil Jul 31, 2019
6c6a881
:lipstick: Slightly decrease initial opacity of controls
sebil Jul 31, 2019
819ae34
Merge branch 'feature/example_preview_in_iframe' of github.com:amppro…
sebil Jul 31, 2019
5f5c47d
:ok_hand: Remove transition for non-hardware accelerated properties
sebil Jul 31, 2019
15552c7
:ok_hand: Adjust orientation change animation
sebil Aug 2, 2019
62563f3
:recycle: Refactor orientation-toggle mechanism
sebil Aug 2, 2019
f6e4e65
:bug: Fix validation error for auto-scroll
sebil Aug 2, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Example preview orientation toggle with unique id
  • Loading branch information
@tharders
tharders committed Jul 26, 2019
commit fb762578d2f9562cc9a351312b6a45b53f809a0d
16 changes: 8 additions & 8 deletions frontend/templates/views/partials/code-preview/code-preview.j2
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

{% if preview.mode == 'top-frame' %}
{% set initial_orientation = preview.orientation if preview.orientation else 'responsive' %}
<amp-state id="orientation">
<amp-state id="orientation{{ preview.index }}">
<script type="application/json">
"{{ initial_orientation }}"
</script>
Expand All @@ -22,8 +22,8 @@
{% for orientation in orientations %}
{% do doc.icons.useIcon('/icons/orientation-' + orientation + '.svg') %}
<button class="ap-m-orientation-toggle-button {% if orientation == initial_orientation %}active{% endif %}"
[class]="orientation == '{{ orientation }}' ? 'ap-m-orientation-toggle-button active' : 'ap-m-orientation-toggle-button'"
on="tap:AMP.setState({orientation: '{{ orientation }}'})">
[class]="orientation{{ preview.index }} == '{{ orientation }}' ? 'ap-m-orientation-toggle-button active' : 'ap-m-orientation-toggle-button'"
on="tap:AMP.setState({orientation{{ preview.index }}: '{{ orientation }}'})">
<svg class="ap-a-ico ap-m-orientation-toggle-icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#orientation-{{ orientation }}"></use>
</svg>
Expand All @@ -39,7 +39,7 @@

{% set base_class = 'ap-o-code-preview-preview-iframe' %}
<div class="{{ base_class }} ap-o-code-preview-preview-iframe-{{ initial_orientation }}"
[class]="'{{ base_class }} ap-o-code-preview-preview-iframe-' + orientation">
[class]="'{{ base_class }} ap-o-code-preview-preview-iframe-' + orientation{{ preview.index }}">
<amp-iframe class="ap-o-code-preview-iframe"
src="{{ preview.url }}"
[src]="example{{ preview.index }}"
Expand All @@ -55,7 +55,7 @@
{{content|safe}}

{% if preview.mode == 'side-frame' %}
<amp-state id="orientation">
<amp-state id="orientation{{ preview.index }}">
<script type="application/json">
"portrait"
</script>
Expand Down Expand Up @@ -84,8 +84,8 @@
{% for orientation in orientations %}
{% do doc.icons.useIcon('/icons/orientation-' + orientation + '.svg') %}
<button class="ap-m-orientation-toggle-button {% if orientation == 'portrait' %}active{% endif %}"
[class]="orientation == '{{ orientation }}' ? 'ap-m-orientation-toggle-button active' : 'ap-m-orientation-toggle-button'"
on="tap:AMP.setState({orientation: '{{ orientation }}'})">
[class]="orientation{{ preview.index }} == '{{ orientation }}' ? 'ap-m-orientation-toggle-button active' : 'ap-m-orientation-toggle-button'"
on="tap:AMP.setState({orientation{{ preview.index }}: '{{ orientation }}'})">
<svg class="ap-a-ico ap-m-orientation-toggle-icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#orientation-{{ orientation }}"></use>
</svg>
Expand All @@ -101,7 +101,7 @@

<div id="previewIframe{{ preview.index }}"
class="ap-o-code-preview-side-preview-frame ap-o-code-preview-side-preview-frame-portrait"
[class]="'ap-o-code-preview-side-preview-frame ap-o-code-preview-side-preview-frame-' + orientation">
[class]="'ap-o-code-preview-side-preview-frame ap-o-code-preview-side-preview-frame-' + orientation{{ preview.index }}">
<div class="ap-o-code-preview-side-preview-sizer"></div>
<amp-iframe layout="fill"
sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-presentation allow-top-navigation"
Expand Down