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

Merge pull request #4175 from alphagov/branding-preview-macro

Browse Source 
Prevent scrolling of branding previews
This commit is contained in:
Chris Hill-Scott
2022-03-10 14:03:37 +00:00
committed by GitHub
parent de46fb6477 b32cd7c351
commit 0847a26af7
9 changed files with 29 additions and 10 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('&');

11
app/templates/components/branding-preview.html Normal file
View File

@@ -0,0 +1,11 @@
{% 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 %}

3
app/templates/views/organisations/organisation/settings/preview-email-branding.html
View File

@@ -1,6 +1,7 @@
{% extends "org_template.html" %} {% extends "org_template.html" %}
{% from "components/form.html" import form_wrapper %} {% from "components/form.html" import form_wrapper %}
{% from "components/button/macro.njk" import govukButton %} {% from "components/button/macro.njk" import govukButton %}
{% from "components/branding-preview.html" import email_branding_preview %}
{% block org_page_title %} {% block org_page_title %}
Preview email branding Preview email branding
@@ -11,7 +12,7 @@
<h1 class="heading-large">Preview email branding</h1> <h1 class="heading-large">Preview email branding</h1>
<div class="govuk-grid-row"> <div class="govuk-grid-row">
<div class="govuk-grid-column-full"> <div class="govuk-grid-column-full">
<iframe src="{{ url_for('main.email_template', branding_style=form.branding_style.data) }}" class="branding-preview"></iframe> {{ email_branding_preview(form.branding_style.data) }}
{% call form_wrapper(action=action) %} {% call form_wrapper(action=action) %}
<div class="form-group"> <div class="form-group">
{{ form.hidden_tag() }} {{ form.hidden_tag() }}

4
app/templates/views/organisations/organisation/settings/preview-letter-branding.html
View File

@@ -1,6 +1,8 @@
{% extends "org_template.html" %} {% extends "org_template.html" %}
{% from "components/form.html" import form_wrapper %} {% from "components/form.html" import form_wrapper %}
{% from "components/page-footer.html" import page_footer %} {% from "components/page-footer.html" import page_footer %}
{% from "components/branding-preview.html" import letter_branding_preview %}
{% block per_page_title %} {% block per_page_title %}
Preview letter branding Preview letter branding
{% endblock %} {% endblock %}
@@ -10,7 +12,7 @@
<h1 class="heading-large">Preview letter branding</h1> <h1 class="heading-large">Preview letter branding</h1>
<div class="govuk-grid-row"> <div class="govuk-grid-row">
<div class="govuk-grid-column-full"> <div class="govuk-grid-column-full">
<iframe src="{{ url_for('main.letter_template', branding_style=form.branding_style.data) }}" class="branding-preview"></iframe> {{ letter_branding_preview(form.branding_style.data) }}
{% call form_wrapper(action=action) %} {% call form_wrapper(action=action) %}
<div class="form-group"> <div class="form-group">
{{ form.hidden_tag() }} {{ form.hidden_tag() }}

3
app/templates/views/service-settings/branding/email-branding-govuk.html
View File

@@ -3,6 +3,7 @@
{% from "components/back-link/macro.njk" import govukBackLink %} {% from "components/back-link/macro.njk" import govukBackLink %}
{% from "components/page-footer.html" import page_footer %} {% from "components/page-footer.html" import page_footer %}
{% from "components/page-header.html" import page_header %} {% from "components/page-header.html" import page_header %}
{% from "components/branding-preview.html" import email_branding_preview %}
{% block service_page_title %} {% block service_page_title %}
Check your new branding Check your new branding
@@ -22,7 +23,7 @@
Emails from {{ current_service.name }} will look like this. Emails from {{ current_service.name }} will look like this.
</p> </p>
<iframe src="{{ url_for('main.email_template', branding_style='__NONE__') }}" class="branding-preview"></iframe> {{ email_branding_preview('__NONE__') }}
<h2 class="heading-medium">Before you continue</h2> <h2 class="heading-medium">Before you continue</h2>

4
app/templates/views/service-settings/branding/email-branding-nhs.html
View File

@@ -3,6 +3,7 @@
{% from "components/back-link/macro.njk" import govukBackLink %} {% from "components/back-link/macro.njk" import govukBackLink %}
{% from "components/page-footer.html" import page_footer %} {% from "components/page-footer.html" import page_footer %}
{% from "components/page-header.html" import page_header %} {% from "components/page-header.html" import page_header %}
{% from "components/branding-preview.html" import email_branding_preview %}
{% block service_page_title %} {% block service_page_title %}
Check your new branding Check your new branding
@@ -21,8 +22,7 @@
<p class="govuk-body"> <p class="govuk-body">
Emails from {{ current_service.name }} will look like this. Emails from {{ current_service.name }} will look like this.
</p> </p>
{{ email_branding_preview(nhs_branding_id) }}
<iframe src="{{ url_for('main.email_template', branding_style=nhs_branding_id) }}" class="branding-preview"></iframe>
<h2 class="heading-medium">Before you continue</h2> <h2 class="heading-medium">Before you continue</h2>

6
app/templates/views/service-settings/branding/email-branding-options.html
View File

@@ -6,6 +6,7 @@
{% from "components/page-footer.html" import page_footer %} {% from "components/page-footer.html" import page_footer %}
{% from "components/form.html" import form_wrapper %} {% from "components/form.html" import form_wrapper %}
{% from "components/back-link/macro.njk" import govukBackLink %} {% from "components/back-link/macro.njk" import govukBackLink %}
{% from "components/branding-preview.html" import email_branding_preview %}
{% block service_page_title %} {% block service_page_title %}
Change email branding Change email branding
@@ -25,8 +26,9 @@
Your emails currently have {{ branding_name }} branding. Your emails currently have {{ branding_name }} branding.
</p> </p>
{% set branding_id = current_service.email_branding_id if current_service.email_branding else '__NONE__' %} {{ email_branding_preview(
<iframe src="{{ url_for('main.email_template', branding_style=branding_id) }}" class="branding-preview"></iframe> current_service.email_branding_id if current_service.email_branding else '__NONE__'
) }}
{% if current_service.needs_to_change_email_branding %} {% if current_service.needs_to_change_email_branding %}
<p class="govuk-body"> <p class="govuk-body">

3
app/templates/views/service-settings/preview-email-branding.html
View File

@@ -1,6 +1,7 @@
{% extends "withnav_template.html" %} {% extends "withnav_template.html" %}
{% from "components/form.html" import form_wrapper %} {% from "components/form.html" import form_wrapper %}
{% from "components/button/macro.njk" import govukButton %} {% from "components/button/macro.njk" import govukButton %}
{% from "components/branding-preview.html" import email_branding_preview %}
{% block service_page_title %} {% block service_page_title %}
Preview email branding Preview email branding
@@ -11,7 +12,7 @@
<h1 class="heading-large">Preview email branding</h1> <h1 class="heading-large">Preview email branding</h1>
<div class="govuk-grid-row"> <div class="govuk-grid-row">
<div class="govuk-grid-column-full"> <div class="govuk-grid-column-full">
<iframe src="{{ url_for('main.email_template', branding_style=form.branding_style.data) }}" class="branding-preview"></iframe> {{ email_branding_preview(form.branding_style.data) }}
{% call form_wrapper(action=action) %} {% call form_wrapper(action=action) %}
<div class="form-group"> <div class="form-group">
{{ form.hidden_tag() }} {{ form.hidden_tag() }}

3
app/templates/views/service-settings/preview-letter-branding.html
View File

@@ -1,6 +1,7 @@
{% extends "views/platform-admin/_base_template.html" %} {% extends "views/platform-admin/_base_template.html" %}
{% from "components/form.html" import form_wrapper %} {% from "components/form.html" import form_wrapper %}
{% from "components/button/macro.njk" import govukButton %} {% from "components/button/macro.njk" import govukButton %}
{% from "components/branding-preview.html" import letter_branding_preview %}
{% block per_page_title %} {% block per_page_title %}
Preview letter branding Preview letter branding
@@ -11,7 +12,7 @@
<h1 class="heading-large">Preview letter branding</h1> <h1 class="heading-large">Preview letter branding</h1>
<div class="govuk-grid-row"> <div class="govuk-grid-row">
<div class="govuk-grid-column-full"> <div class="govuk-grid-column-full">
<iframe src="{{ url_for('main.letter_template', branding_style=form.branding_style.data) }}" class="branding-preview"></iframe> {{ letter_branding_preview(form.branding_style.data) }}
{% call form_wrapper(action=action) %} {% call form_wrapper(action=action) %}
<div class="form-group"> <div class="form-group">
{{ form.hidden_tag() }} {{ form.hidden_tag() }}