mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-18 13:39:57 -04:00
We had 7 classes in _grids.scss named `.column-...` which were being used to give a certain column width. These worked by using `@include grid column()`, which is now deprecated. `.column-whole` and `.column-three-quarters` can be removed and replaced with `govuk-grid-column-full` and `govuk-grid-column-three-quarters` respectively. The other column classes don't have a direct replacment in GOV.UK Frontend. To get round this, we overwrite the `$govuk-grid-width` SASS map in `extensions.scss` to add in extra widths, then use this with the `govuk-grid-column` mixin to create new classes in for our custom widths in `_grids.scss`
41 lines
1.5 KiB
HTML
41 lines
1.5 KiB
HTML
{% from "components/banner.html" import banner_wrapper %}
|
|
|
|
{% call banner_wrapper(type='tour') %}
|
|
<p class="heading-medium">Try sending yourself this example</p>
|
|
<div class="govuk-grid-row bottom-gutter {% if help != '1' %}greyed-out-step{% endif %}">
|
|
<div class="govuk-grid-column-one-sixth">
|
|
<p class="heading-large" style="float: left;">1.</p>
|
|
</div>
|
|
<div class="govuk-grid-column-five-sixths">
|
|
<p>
|
|
Every message is sent from a template
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="govuk-grid-row bottom-gutter {% if help != '2' %}greyed-out-step{% endif %}">
|
|
<div class="govuk-grid-column-one-sixth">
|
|
<p class="heading-large">2.</p>
|
|
</div>
|
|
<div class="govuk-grid-column-five-sixths">
|
|
<p>
|
|
The template pulls in the data you provide
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="govuk-grid-row bottom-gutter {% if help != '3' %}greyed-out-step{% endif %}">
|
|
<div class="govuk-grid-column-one-sixth">
|
|
<p class="heading-large">3.</p>
|
|
</div>
|
|
<div class="govuk-grid-column-five-sixths">
|
|
<p>
|
|
Notify delivers the message
|
|
</p>
|
|
{% if help == '3' %}
|
|
<a class="govuk-link govuk-link--no-visited-state" href='{{ url_for(".go_to_dashboard_after_tour", service_id=current_service.id, example_template_id=template.id) }}'>
|
|
Now go to your dashboard
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endcall %}
|