darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-02-06 11:23:48 -05:00
Code Issues Packages Projects Releases Wiki Activity

Convert <details> on API page to macro HTML

Browse Source 
The GOV.UK Frontend details component macro
  wraps its `<summary>` text in a `<span>`.

  We put a `<h3>` in the `<summary>` (actually valid
  use, based on the spec) so this breaks when the
  `<span>` wraps it.

  This converts the existing `<details>` tag to use
  all the class names the macro creates, but with
  all the `<summary>` contents in the `<h3>`.

  Also adds font-smoothing to the messages on the
  API page. This was previously set globally for
  all fonts in the GOV.UK Template CSS but is now
  just set for the New Transport 'nta' font.
  Included because the messages use the monospace
  font so don't have it by default.
This commit is contained in:
Tom Byers
2019-12-03 09:47:48 +00:00
parent 810e880bb5
commit d13db305c1
2 changed files with 72 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,8 @@
.api-notifications {
font-family: monospace;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border-bottom: 1px solid $border-colour;
&-item {
@@ -8,38 +10,59 @@
border-top: 1px solid $border-colour;
padding: 10px 0 0 0;
&-title {
color: $link-colour;
&__heading,
&__data,
&__view {
font-family: monospace;
}
&__heading {
display: block;
margin-bottom: $gutter-half;
&::before {
top: -1.3em;
}
}
&__meta {
display: block;
color: $secondary-text-colour;
text-decoration: none;
display: block;
&-key,
&-time {
color: $secondary-text-colour;
display: inline-block;
width: auto;
}
@include govuk-media-query($from: tablet) {
&-key,
&-time {
width: 50%;
}
&-time {
text-align: right;
}
}
}
&-recipient {
display: inline;
}
&__data {
&-meta {
display: block;
color: $secondary-text-colour;
}
border-left: none;
padding-left: 25px;
&-time {
text-align: right;
}
&-name {
color: $secondary-text-colour;
}
&-key {
display: inline-block;
padding-left: 46px;
}
&-data {
padding-left: 31px;
color: $secondary-text-colour;
&-item {
padding-bottom: 15px;
&-value {
color: $text-colour;
padding-bottom: 15px;
}
}

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

@@ -39,43 +39,45 @@
<div class="api-notifications">
{% if not api_notifications.notifications %}
<div class="api-notifications-item">
<p class="api-notifications-item-meta">
<p class="api-notifications-item__meta">
When you send messages via the API they’ll appear here.
</p>
<p class="api-notifications-item-meta">
<p class="api-notifications-item__meta">
Notify deletes messages after 7 days.
</p>
</div>
{% endif %}
{% for notification in api_notifications.notifications %}
<details class="api-notifications-item">
<summary class="api-notifications-item-title">
<h3 class="api-notifications-item-recipient">
<details class="api-notifications-item govuk-details govuk-!-margin-bottom-0" data-module="govuk-details">
<summary class="govuk-details__summary govuk-clearfix api-notifications-item__heading">
<h3>
<span class="govuk-details__summary-text">
{{ notification.to }}
</span>
<span class="govuk-grid-row api-notifications-item__meta">
<span class="govuk-grid-column-one-half api-notifications-item__meta-key">
{{notification.key_name}}
</span>
<span class="govuk-grid-column-one-half api-notifications-item__meta-time">
<time class="timeago" datetime="{{ notification.created_at }}">
{{ notification.created_at|format_delta }}
</time>
</span>
</span>
</h3>
<span class="grid-row api-notifications-item-meta">
<span class="column-half api-notifications-item-key">
{{notification.key_name}}
</span>
<span class="column-half api-notifications-item-time">
<time class="timeago" datetime="{{ notification.created_at }}">
{{ notification.created_at|format_delta }}
</time>
</span>
</span>
</summary>
<div>
<dl id="notification-{{ notification.id }}" class="api-notifications-item-data bottom-gutter-1-2">
<div class="govuk-details__text api-notifications-item__data govuk-!-padding-top-0">
<dl id="notification-{{ notification.id }}">
{% for key in [
'id', 'client_reference', 'notification_type', 'created_at', 'updated_at', 'sent_at', 'status'
] %}
{% if notification[key] %}
<dt>{{ key }}:</dt>
<dd class="api-notifications-item-data-item">{{ notification[key] }}</dd>
<dt class="api-notifications-item__data-name">{{ key }}:</dt>
<dd class="api-notifications-item__data-value">{{ notification[key] }}</dd>
{% endif %}
{% endfor %}
{% if notification.status not in ('pending-virus-check', 'virus-scan-failed') %}
<a href="{{ url_for('.view_notification', service_id=current_service.id, notification_id=notification.id) }}">View {{ message_count_label(1, notification.template.template_type, suffix='') }}</a>
<a class="api-notifications-item__view" href="{{ url_for('.view_notification', service_id=current_service.id, notification_id=notification.id) }}">View {{ message_count_label(1, notification.template.template_type, suffix='') }}</a>
{% endif %}
</dl>
</div>
@@ -84,11 +86,11 @@
{% if api_notifications.notifications %}
<div class="api-notifications-item">
{% if api_notifications.notifications|length == 50 %}
<p class="api-notifications-item-meta">
<p class="api-notifications-item__meta">
Only showing the first 50 messages.
</p>
{% endif %}
<p class="api-notifications-item-meta">
<p class="api-notifications-item__meta">
Notify deletes messages after 7 days.
</p>
</div>