darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-07 06:38:24 -04:00
Code Issues Packages Projects Releases Wiki Activity

Prevent scrolling of branding previews

Browse Source 
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>`
This commit is contained in:
Chris Hill-Scott
2022-03-01 12:26:05 +00:00
parent b8d7966eb1
commit b32cd7c351
2 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/previewPane.js
View File

@@ -13,7 +13,7 @@
const $paneWrapper = $('<div class="govuk-grid-column-full"></div>'); const $paneWrapper = $('<div class="govuk-grid-column-full"></div>');
const $form = $('form'); const $form = $('form');
const previewType = $form.data('previewType'); const previewType = $form.data('previewType');
const $previewPane = $(`<iframe src="/_${previewType}?${buildQueryString(['branding_style', branding_style])}" class="branding-preview"></iframe>`); const $previewPane = $(`<iframe src="/_${previewType}?${buildQueryString(['branding_style', branding_style])}" class="branding-preview" scrolling="no"></iframe>`);
function buildQueryString () { function buildQueryString () {
return $.map(arguments, (val, idx) => encodeURI(val[0]) + '=' + encodeURI(val[1])).join('&'); return $.map(arguments, (val, idx) => encodeURI(val[0]) + '=' + encodeURI(val[1])).join('&');

2
app/templates/components/branding-preview.html
View File

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