Make sure partials always have a wrapping <div>

The diffDOM Javascript sometimes throws an error if it can’t calculate
a diff between the original content of the page and the updated HTML
delivered via AJAX. The problem seems to be when there’s not one,
consistent top-level element for it to base its calculations on.

This commit:
- makes sure that all AJAX-delivered partials have a wrapping `<div>`
- that this `<div>` has a consistent class name to make it clear why
  it’s there
This commit is contained in:
Chris Hill-Scott
2016-09-01 11:06:52 +01:00
parent 0967706aed
commit 8c8f321a11
6 changed files with 67 additions and 65 deletions

View File

@@ -1,5 +1,5 @@
{% from "components/pill.html" import pill %}
<div class="bottom-gutter">
<div class="bottom-gutter ajax-block-container">
{{ pill('Status', counts, request.args.get('status', '')) }}
</div>

View File

@@ -1,71 +1,73 @@
{% from "components/table.html" import list_table, field, right_aligned_field_heading, date_field, row_heading %}
{% if job.job_status == 'scheduled' %}
<div class="ajax-block-container">
{% if job.job_status == 'scheduled' %}
<p>
Sending will start at {{ job.scheduled_for|format_time }}
</p>
<p>
Sending will start at {{ job.scheduled_for|format_time }}
</p>
{% else %}
{% else %}
{% if notifications %}
<div class="dashboard-table">
{% endif %}
{% if notifications %}
<div class="dashboard-table">
{% endif %}
{% if not help %}
{% if percentage_complete < 100 %}
<p class="bottom-gutter-1-2 hint">
Report is {{ "{:.0f}%".format(percentage_complete) }} complete…
</p>
{% elif notifications %}
<p class="bottom-gutter">
<a href="{{ download_link }}" download="download" class="heading-small">Download this report</a>
&emsp;
<span id="time-left">{{ time_left }}</span>
{% if not help %}
{% if percentage_complete < 100 %}
<p class="bottom-gutter-1-2 hint">
Report is {{ "{:.0f}%".format(percentage_complete) }} complete…
</p>
{% elif notifications %}
<p class="bottom-gutter">
<a href="{{ download_link }}" download="download" class="heading-small">Download this report</a>
&emsp;
<span id="time-left">{{ time_left }}</span>
</p>
{% endif %}
{% endif %}
{% call(item, row_number) list_table(
notifications,
caption=uploaded_file_name,
caption_visible=False,
empty_message="No messages to show",
field_headings=[
'Recipient',
'Time',
'Status'
],
field_headings_visible=False
) %}
{% call row_heading() %}
{{ item.to }}
{% endcall %}
{{ date_field(
(item.updated_at or item.created_at)|format_datetime_short
) }}
{% call field(
align='right',
status=item.status|format_notification_status_as_field_status
) %}
{% if item.status|format_notification_status_as_url %}
<a href="{{ item.status|format_notification_status_as_url }}">
{% endif %}
{{ item.status|format_notification_status(item.template.template_type) }}
{% if item.status|format_notification_status_as_url %}
</a>
{% endif %}
{% endcall %}
{% endcall %}
{% if more_than_one_page %}
<p class="table-show-more-link">
Only showing the first 50 rows
</p>
{% endif %}
{% if notifications %}
</div>
{% endif %}
{% call(item, row_number) list_table(
notifications,
caption=uploaded_file_name,
caption_visible=False,
empty_message="No messages to show",
field_headings=[
'Recipient',
'Time',
'Status'
],
field_headings_visible=False
) %}
{% call row_heading() %}
{{ item.to }}
{% endcall %}
{{ date_field(
(item.updated_at or item.created_at)|format_datetime_short
) }}
{% call field(
align='right',
status=item.status|format_notification_status_as_field_status
) %}
{% if item.status|format_notification_status_as_url %}
<a href="{{ item.status|format_notification_status_as_url }}">
{% endif %}
{{ item.status|format_notification_status(item.template.template_type) }}
{% if item.status|format_notification_status_as_url %}
</a>
{% endif %}
{% endcall %}
{% endcall %}
{% if more_than_one_page %}
<p class="table-show-more-link">
Only showing the first 50 rows
</p>
{% endif %}
{% if notifications %}
</div>
{% endif %}
{% endif %}
</div>

View File

@@ -1,4 +1,4 @@
<div>
<div class="ajax-block-container">
<p class='heading-small bottom-gutter'>
Uploaded by {{ job.created_by.name }} on {{ job.created_at|format_datetime_short }}
</p>

View File

@@ -1,7 +1,7 @@
{% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading %}
{% from "components/big-number.html" import big_number -%}
<div class='dashboard-table'>
<div class='dashboard-table ajax-block-container'>
{% call(item, row_number) list_table(
jobs,
caption="Recent files uploaded",

View File

@@ -1,7 +1,7 @@
{% from "components/big-number.html" import big_number_with_status %}
{% from "components/message-count-label.html" import message_count_label %}
<div class="grid-row">
<div class="grid-row ajax-block-container">
<div class="column-half">
{{ big_number_with_status(
statistics['email']['requested'],

View File

@@ -1,6 +1,6 @@
{% from "components/big-number.html" import big_number %}
<div class='grid-row'>
<div class='grid-row ajax-block-container'>
<div class='column-half'>
<div class="keyline-block">
{{ big_number("Unlimited", 'free email allowance', smaller=True) }}