app/templates/components/branding-preview.html

{% macro branding_preview(branding_style, endpoint) %}
  <iframe src="{{ url_for(endpoint, branding_style=branding_style) }}" class="branding-preview" scrolling="no"></iframe>
{% endmacro %}

{% macro email_branding_preview(branding_style) %}
  {{ branding_preview(branding_style, 'main.email_template') }}
{% endmacro %}

{% macro letter_branding_preview(branding_style) %}
  {{ branding_preview(branding_style, 'main.letter_template') }}
{% endmacro %}
Add macro for letter branding previews This extends the same thing we’ve done for email branding previews in the previous commit to cover letter branding as well. 2022-03-01 12:25:23 +00:00			`{% macro branding_preview(branding_style, endpoint) %}`
Prevent scrolling of branding previews In user research we quite often saw people accidentally scroll the branding preview `<iframe>` when trying to scroll the page. This is suboptimal because they: - were confused why the page wasn’t scrolling - lost visibility of the branding they were trying to preview because it scrolled outside the bounds of the `<iframe>` 2022-03-01 12:26:05 +00:00			`<iframe src="{{ url_for(endpoint, branding_style=branding_style) }}" class="branding-preview" scrolling="no"></iframe>`
Add macro for letter branding previews This extends the same thing we’ve done for email branding previews in the previous commit to cover letter branding as well. 2022-03-01 12:25:23 +00:00			`{% endmacro %}`

			`{% macro email_branding_preview(branding_style) %}`
			`{{ branding_preview(branding_style, 'main.email_template') }}`
			`{% endmacro %}`

			`{% macro letter_branding_preview(branding_style) %}`
			`{{ branding_preview(branding_style, 'main.letter_template') }}`
Make a macro for email branding previews This means we: - don’t have to copy and paste the `<iframe>` code to every place where we use it - can make changes to it in one place and have it apply everywhere 2022-03-01 12:20:20 +00:00			`{% endmacro %}`