Merge pull request #827 from alphagov/move-guidance-underneath

Move guidance underneath

app/templates/partials/templates/guidance-character-count.html

@@ -1,12 +1,8 @@
-<details>
+<h2 class="heading-medium">Message length</h2>
-  <summary class="button tertiary-button">Message length</summary>
+<p>
-  <div id="guidance-personalisation">
+  If your message is long then it will
-    <p>
+  cost more.
-      If your message is long then it will
+</p>
-      cost more.
+<p>
-    </p>
+  See <a href="{{ url_for('.pricing') }}">pricing</a> for details.
-    <p>
+</p>
-      See <a href="{{ url_for('.pricing') }}">pricing</a> for details.
-    </p>
-  </div>
-</details>

app/templates/partials/templates/guidance-formatting.html

@@ -0,0 +1,27 @@
+<h2 class="heading-medium">Formatting</h2>
+<p>
+  To put a title in your template, use a hash:
+</p>
+<div class="panel panel-border-wide">
+  <p>
+    # This is a title
+  </p>
+</div>
+<p>
+  To make bullet points, use asterisks:
+</p>
+<div class="panel panel-border-wide">
+  <p>
+    * point 1<br/>
+    * point 2<br/>
+    * point 3<br/>
+  </p>
+</div>
+<p>
+  To add a callout, use a caret:
+</p>
+<div class="panel panel-border-wide">
+  <p>
+    ^ You must tell us if your circumstances change
+  </p>
+</div>

app/templates/partials/templates/guidance-links.html

@@ -1,8 +1,9 @@
-<details>
+<h2 class="heading-medium">Links and URLs</h2>
-  <summary class="button tertiary-button">Links and URLs</summary>
+<p>
-  <div id="guidance-personalisation">
+  Always use full URLs, starting with https://
-    <p>
+</p>
-      Always use full URLs, starting with https://
+<div class="panel panel-border-wide">
-    </p>
+  <p>
-  </div>
+    Apply now at https://www.gov.uk/example
-</details>
+  </p>
+</div>

app/templates/partials/templates/guidance-personalisation.html

@@ -1,14 +1,11 @@
-<details>
+<h2 class="heading-medium">
-  <summary class="button tertiary-button">Personalisation</summary>
+  Personalisation
-  <div id="guidance-personalisation">
+</h2>
-    <p>
+<p>
-      Use double brackets to add personalisation.
+  Use double brackets to personalise your message:
-    </p>
+</p>
-    <p>
+<div class="panel panel-border-wide">
-      Correct: ((name))
+  <p>
-    </p>
+    Hello ((first name)), your reference is ((ref number))
-    <p>
+  </p>
-      Incorrect: ((Helen))
+</div>
-    </p>
-  </div>
-</details>

app/templates/views/edit-email-template.html

@@ -14,11 +14,11 @@
 
     <form method="post">
       <div class="grid-row">
-        <div class="column-two-thirds">
+        <div class="column-three-quarters">
           {{ textbox(form.name, width='1-1', hint='Your recipients won’t see this', rows=10) }}
           {{ textbox(form.subject, width='1-1', highlight_tags=True, rows=2) }}
         </div>
-        <div class="column-two-thirds">
+        <div class="column-three-quarters">
           {{ textbox(form.template_content, highlight_tags=True, width='1-1', rows=8) }}
           {{ page_footer(
             'Save',
@@ -26,8 +26,8 @@
             delete_link_text='Delete this template'
           ) }}
         </div>
-        <aside class="column-one-third">
+        <aside class="column-whole">
-          <h2 style="margin: 0 0 5px 0;">Help</h2>
+          {% include "partials/templates/guidance-formatting.html" %}
           {% include "partials/templates/guidance-personalisation.html" %}
           {% include "partials/templates/guidance-links.html" %}
         </aside>

app/templates/views/edit-sms-template.html

@@ -25,8 +25,7 @@
             delete_link_text='Delete this template'
           ) }}
         </div>
-        <aside class="column-one-third">
+        <aside class="column-whole">
-          <h2 style="margin: 0 0 5px 0;">Help</h2>
           {% include "partials/templates/guidance-personalisation.html" %}
           {% include "partials/templates/guidance-links.html" %}
           {% include "partials/templates/guidance-character-count.html" %}