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

Fix API log page in Firefox

Browse Source 
The details of each notification were not being hidden on page load in
Firefox.

Firefox does not natively support the `<details>` element, so we
polyfill it.

Because of the way the polyfill is written[1]

1. There can’t be any `<div>` elements inside the `<summary>` (this
   commit changes them to be `<span>`s instead, and adds CSS to make
   sure they wrap as before)
2. The contents to be shown/hidden must be wrapped in a `<div>` (which
   this commit adds)

***

1. 48fde82c72/public/javascripts/govuk/details.polyfill.js (L90)
This commit is contained in:
Chris Hill-Scott
2016-10-12 15:25:35 +01:00
parent ee8ac59d70
commit c13f1aa5d1
2 changed files with 17 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/stylesheets/views/api.scss
View File

@@ -19,6 +19,7 @@
} }
&-meta { &-meta {
display: block;
color: $secondary-text-colour; color: $secondary-text-colour;
} }

30
app/templates/views/api/index.html
View File

@@ -61,25 +61,27 @@
<h3 class="api-notifications-item-recipient"> <h3 class="api-notifications-item-recipient">
{{ notification.to }} {{ notification.to }}
</h3> </h3>
<div class="grid-row api-notifications-item-meta"> <span class="grid-row api-notifications-item-meta">
<div class="column-half api-notifications-item-key"> <span class="column-half api-notifications-item-key">
{{notification.key_name}} {{notification.key_name}}
</div> </span>
<div class="column-half api-notifications-item-time"> <span class="column-half api-notifications-item-time">
<time class="timeago" datetime="{{ notification.created_at }}"> <time class="timeago" datetime="{{ notification.created_at }}">
{{ notification.created_at|format_delta }} {{ notification.created_at|format_delta }}
</time> </time>
</div> </span>
</div> </span>
</summary> </summary>
<dl id="notification-{{ notification.id }}" class="api-notifications-item-data bottom-gutter-1-2"> <div>
{% for key in [ <dl id="notification-{{ notification.id }}" class="api-notifications-item-data bottom-gutter-1-2">
'id', 'notification_type', 'created_at', 'updated_at', 'sent_at', 'status' {% for key in [
] %} 'id', 'notification_type', 'created_at', 'updated_at', 'sent_at', 'status'
<dt>{{ key }}:</dt> ] %}
<dd class="api-notifications-item-data-item">{{ notification[key] }}</dd> <dt>{{ key }}:</dt>
{% endfor %} <dd class="api-notifications-item-data-item">{{ notification[key] }}</dd>
</dl> {% endfor %}
</dl>
</div>
</details> </details>
{% endfor %} {% endfor %}
{% if api_notifications.notifications %} {% if api_notifications.notifications %}