Merge pull request #595 from alphagov/template_versions_link_design

Beautify the template version links and template link page.

app/__init__.py

@@ -101,12 +101,14 @@ def create_app():
 
     application.add_template_filter(nl2br)
     application.add_template_filter(format_datetime)
+    application.add_template_filter(format_datetime_normal)
     application.add_template_filter(format_datetime_short)
     application.add_template_filter(format_time)
     application.add_template_filter(syntax_highlight_json)
     application.add_template_filter(valid_phone_number)
     application.add_template_filter(linkable_name)
     application.add_template_filter(format_date)
+    application.add_template_filter(format_date_normal)
     application.add_template_filter(format_date_short)
     application.add_template_filter(format_notification_status)
 
@@ -195,6 +197,10 @@ def format_datetime(date):
     return gmt_timezones(date).strftime('%A %d %B %Y at %H:%M')
 
 
+def format_datetime_normal(date):
+    return gmt_timezones(date).strftime('%d %B %Y at %H:%M')
+
+
 def format_datetime_short(date):
     return gmt_timezones(date).strftime('%d %B at %H:%M')
 
@@ -207,6 +213,10 @@ def format_date(date):
     return gmt_timezones(date).strftime('%A %d %B %Y')
 
 
+def format_date_normal(date):
+    return gmt_timezones(date).strftime('%d %B %Y')
+
+
 def format_date_short(date):
     return gmt_timezones(date).strftime('%d %B').lstrip('0')
 

app/assets/stylesheets/components/email-message.scss

@@ -7,7 +7,13 @@ $button-bottom-border-colour: rgba(0, 0, 0, 0.17);
 
   &-name {
     @include bold-24;
-    margin: 20px 0 10px 0;
+    margin: 20px 0 5px 0;
+  }
+
+  &-updated-at {
+    @include copy-16;
+    color: $secondary-text-colour;
+    margin: 0 0 10px 0;
   }
 
   &-meta {

app/assets/stylesheets/components/sms-message.scss

@@ -36,7 +36,24 @@
 
 .sms-message-name {
   @include bold-24;
-  margin: 20px 0 10px 0;
+  margin: 20px 0 5px 0;
+}
+
+.sms-message-updated-at {
+  @include copy-16;
+  color: $secondary-text-colour;
+  margin: 0 0 10px 0;
+}
+
+.sms-message-use-links-history {
+  @include copy-16;
+  color: $secondary-text-colour;
+  margin: 45px 0 0 0;
+
+  .primary {
+    color: $text-colour;
+
+  }
 }
 
 .sms-message-picker {
@@ -52,7 +69,7 @@
 .sms-message-use-links {
 
   @include copy-19;
-  margin-top: -5px;
+  margin-top: 35px;
 
   a {
     display: block;
@@ -73,7 +90,7 @@
 
 .sms-message-use-links-with-title {
   @extend %sms-message-use-links;
-  margin-top: 55px;
+  margin-top: 95px;
 }
 
 .sms-message-from {

app/main/views/send.py

@@ -80,7 +80,6 @@ def get_example_csv_rows(template, use_example_as_example=True, submitted_fields
 def choose_template(service_id, template_type):
     if template_type not in ['email', 'sms']:
         abort(404)
-
     return render_template(
         'views/templates/choose.html',
         templates=[

app/templates/components/email-message.html

@@ -6,7 +6,13 @@
   from_name=None,
   from_address=None,
   recipient=None,
-  show_placeholder_for_recipient=False
+  id=None,
+  created_at=None,
+  updated_at=None,
+  versions_url=None,
+  version=1,
+  show_placeholder_for_recipient=False,
+  show_id=False
 ) %}
   {% if name %}
     <h3 class="email-message-name">
@@ -15,9 +21,17 @@
       {% else %}
         {{ name }}
       {% endif %}
-      {% if created_at %}{{ created_at }}{% endif %}
     </h3>
   {% endif %}
+  {% if version > 1 %}
+    {% if updated_at %}
+      <p class="email-message-updated-at">Last updated on {{ updated_at|format_date_normal }} <a href="{{ versions_url }}">see earlier versions</a></p>
+    {% endif %}
+  {% else %}
+    {% if created_at %}
+      <p class="email-message-updated-at">Created on {{ created_at|format_date_normal }}</p>
+    {% endif %}
+  {% endif %}
   <div class="email-message">
     {% if from_name or subject %}
       <table class="email-message-meta">

app/templates/components/sms-message.html

@@ -5,7 +5,12 @@
   id=None,
   edit_link=None,
   from=None,
-  show_placeholder_for_recipient=False
+  version=1,
+  created_at=None,
+  updated_at=None,
+  versions_url=None,
+  show_placeholder_for_recipient=False,
+  show_id=False
 ) %}
   {% if name %}
     <h3 class="sms-message-name">
@@ -14,9 +19,17 @@
       {% else %}
         {{ name }}
       {% endif %}
-      {% if created_at %}{{ created_at }}{% endif %}
     </h3>
   {% endif %}
+  {% if version > 1 %}
+    {% if updated_at %}
+      <p class="sms-message-updated-at">Last updated on {{ updated_at|format_date_normal }} <a href="{{ versions_url }}">see earlier versions</a></p>
+    {% endif %}
+  {% else %}
+    {% if created_at %}
+      <p class="sms-message-updated-at">Created on {{ created_at|format_date_normal }}</p>
+    {% endif %}
+  {% endif %}
   {% if recipient is not none %}
     <p class="sms-message-recipient">
       To: 
@@ -37,7 +50,7 @@
     {% endif %}
     {{ body|nl2br }}
   </div>
-  {% if id %}
+  {% if show_id %}
     <p class="sms-message-recipient">
       Template ID: {{ id }}
     </p>

app/templates/views/templates/_template.html

@@ -2,16 +2,27 @@
 {% from "components/sms-message.html" import sms_message %}
 
 <div class="column-two-thirds">
+{{ template.versions }}
   {% if 'email' == template.template_type %}
     {{ email_message(
       template.formatted_subject_as_markup,
       template.formatted_as_markup,
-      name=template.name if show_title else None
+      name=template.name if show_title else None,
+      id=template.id,
+      created_at=template.get_raw('created_at', None),
+      updated_at=template.get_raw('updated_at', None),
+      version=template.get_raw('version', 1),
+      versions_url=url_for('.view_template_versions', service_id=current_service.id, template_id=template.id)
     ) }}
   {% elif 'sms' == template.template_type %}
     {{ sms_message(
       template.formatted_as_markup,
-      name=template.name if show_title else None
+      name=template.name if show_title else None,
+      id=template.id,
+      created_at=template.get_raw('created_at', None),
+      updated_at=template.get_raw('updated_at', None),
+      version=template.get_raw('version', 1),
+      versions_url=url_for('.view_template_versions', service_id=current_service.id, template_id=template.id)
     ) }}
   {% endif %}
 </div>
@@ -25,7 +36,6 @@
     {% if current_user.has_permissions(permissions=['manage_templates'], admin_override=True) %}
        <a href="{{ url_for(".edit_service_template", service_id=current_service.id, template_id=template.id) }}">Edit template</a>
     {% endif %}
-    <a href="{{ url_for('.view_template_versions', service_id=current_service.id, template_id=template.id) }}">Template versions</a>
     <a href="{{ url_for(".send_from_api", service_id=current_service.id, template_id=template.id) }}">API info</a>
   </div>
 </div>

app/templates/views/templates/_template_history.html

@@ -29,12 +29,13 @@
 </div>
 
 <div class="column-one-third">
-  <div class="sms-message-use-links{% if show_title %}-with-title{% endif %}">
+  <div class="sms-message-use-links-history">
-    <p>Edited by {{ template.get_raw('created_by').name }}</p>
+    <p>
-    <p>Created on {{ template.get_raw('created_at')|format_datetime }}</p>
+    {% if template.get_raw('version', 1) > 1 %}
-    <p>Edited on
+      Updated on<br/>{% if template.get_raw('updated_at', None) %}<span class="primary">{{ template.get_raw('updated_at')|format_datetime_normal }}</span>{% endif %}
-      {% if template.get_raw('updated_at') %}
+    {% else %}
-        {{ template.get_raw('updated_at')|format_datetime }}</p>
+      Created on<br/>{% if template.get_raw('created_at', None) %}<span class="primary">{{ template.get_raw('created_at')|format_datetime_normal }}</span>{% endif %}
-      {% endif %}
+    {% endif %}
+    <br/>By {{ template.get_raw('created_by').name }}
   </div>
 </div>

tests/__init__.py

@@ -54,14 +54,14 @@ def template_json(service_id,
                   type_="sms",
                   content="template content",
                   subject=None,
-                  versions='1'):
+                  version=1):
     template = {
         'id': id_,
         'name': name,
         'template_type': type_,
         'content': content,
         'service': service_id,
-        'version': versions
+        'version': version
     }
     if subject is not None:
         template['subject'] = subject