From 765705e95c1cb0e4b4bb69a4dfa31258c3d1b3bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dan=20Braghi=C8=99?= <dan.braghis@torchbox.com>
Date: Wed, 8 Jan 2025 15:57:40 +0000
Subject: [PATCH] Update the methodology page template post #55

---
 .../templates/pages/methodology_page.html     | 143 ++++++++----------
 1 file changed, 64 insertions(+), 79 deletions(-)

diff --git a/cms/jinja2/templates/pages/methodology_page.html b/cms/jinja2/templates/pages/methodology_page.html
index 866140f5..67bde90c 100644
--- a/cms/jinja2/templates/pages/methodology_page.html
+++ b/cms/jinja2/templates/pages/methodology_page.html
@@ -6,38 +6,38 @@
 {% from "components/table-of-contents/_macro.njk" import onsTableOfContents %}
 
 {% block header_area %}
-    <div class="analysis-header {% if page.updates %}analysis-header--flush{% endif %}">
+    <div class="common-header analysis-header {% if page.updates %}analysis-header--flush{% endif %}">
         <div class="ons-container">
             {% include "templates/components/navigation/breadcrumbs.html" %}
             <p class="analysis-header__doc-type ons-u-fs-l">{{ _("Methodology") }}</p>
 
-            <div class="ons-grid ons-grid-flex-gap">
+            <div class="ons-grid ons-grid-flex-gap ons-grid-flex-gap--40">
                 <div class="ons-grid__col ons-col-10@m ">
-                    <h1 class="ons-u-fs-3xl analysis-header__heading">
+                    <h1 class="ons-u-fs-3xl common-header__heading">
                         {{ page.title }}
                     </h1>
 
-                    <div class="analysis-header__summary">{{ page.summary|richtext() }}</div>
+                    <div class="common-header__summary">{{ page.summary|richtext() }}</div>
                 </div>
             </div>
         </div>
 
         {% block release_meta %}
-            <div class="ons-container analysis-header__releases">
+            <div class="ons-container common-header__releases">
                 <div>
-                    <span class="ons-u-fs-r--b analysis-header__releases-label">{{ _("Published") }}:</span>
+                    <span class="ons-u-fs-r--b common-header__releases-label">{{ _("Published") }}:</span>
                     <span class="ons-u-nowrap">{{ page.publication_date|date("DATE_FORMAT") }}</span>
                 </div>
                 {% if page.last_revised_date %}
                     <div>
-                        <span class="ons-u-fs-r--b analysis-header__releases-label">{{ _("Last revised") }}:</span>
+                        <span class="ons-u-fs-r--b common-header__releases-label">{{ _("Last revised") }}:</span>
                         <span class="ons-u-nowrap">{{ page.last_revised_date|date("DATE_FORMAT")}}</span>
                     </div>
                 {% endif %}
 
                 {% if page.contact_details %}
                     <div>
-                        <span class="ons-u-fs-r--b analysis-header__releases-label">{{ _("Contact") }}:</span>
+                        <span class="ons-u-fs-r--b common-header__releases-label">{{ _("Contact") }}:</span>
                         <a href="mailto:{{ page.contact_details.email }}">{{ page.contact_details.name }}</a>
                     </div>
                 {% endif %}
@@ -47,84 +47,69 @@ <h1 class="ons-u-fs-3xl analysis-header__heading">
 {% endblock %}
 
 {% block main %}
-    <div class="ons-container">
-        <div class="ons-grid ons-grid-flex-gap ons-grid-flex-gap--32">
-            <div class="ons-grid__col ons-grid__col--sticky@m ons-col-4@m">
-                {% with toc_title=_("Contents"), toc_aria_label=_("Sections in this page") %}
-                    {# fmt:off #}
-                    {{-
-                        onsTableOfContents({
-                            "title": toc_title,
-                            "ariaLabel": toc_aria_label,
-                            "itemsList": table_of_contents
-                        })
-                    }}
-                    {# fmt:on #}
-                {% endwith %}
-            </div>
-
-            <div class="ons-grid__col ons-col-8@m">
-                {# TODO: is the below comment and code still relevant? Can't find the variable in that file #}
-                {# if there are no contact details on the page, we don't want the last
-                streamfield block to have a bottom margin. last_flush is used in stream_block.html #}
-                {% if page.contact_details %}
-                    {% set last_flush = False %}
-                {% else %}
-                    {% set last_flush = True %}
-                {% endif %}
-
-                {% include_block page.content %}
-
-                {% if related_publications %}
+    <div class="ons-grid ons-grid-flex-gap ons-grid-flex-gap--32">
+        <div class="ons-grid__col ons-grid__col--sticky@m ons-col-4@m">
+            {% with toc_title=_("Contents"), toc_aria_label=_("Sections in this page") %}
                 {# fmt:off #}
                 {{-
-                    onsRelatedContent({
-                        "ariaLabel": _('Related publications'),
-                        "rows": [{
-                            "id": 'related-content',
-                            "title": _('Related publications'),
-                            "itemsList": related_publications
-                        }]
+                    onsTableOfContents({
+                        "title": toc_title,
+                        "ariaLabel": toc_aria_label,
+                        "itemsList": table_of_contents
                     })
-                -}}
+                }}
                 {# fmt:on #}
-                {% endif %}
+            {% endwith %}
+        </div>
 
-                {% if page.show_cite_this_page %}
-                    <section id="cite-this-page">
-                        <h2 class="ons-u-fs-l">{{ _("Cite this methodology") }}</h2>
-                        <p>
-                            {%- set cite_link -%}
-                                <a href="{{ fullpageurl(page) }}">{{ page.title }}</a>
-                            {% endset %}
-                            {% set latest_date = page.last_revised_date if page.last_revised_date else page.publication_date %}
-                            {% trans trimmed latest_date_formatted = latest_date|date("DATE_FORMAT"), cite_link=cite_link %}
-                                Office for National Statistics (ONS), last revised {{ latest_date_formatted }}, ONS website, methodology, {{ cite_link }}
-                            {% endtrans %}
-                        </p>
-                    </section>
-                {% endif %}
+        <div class="ons-grid__col ons-col-8@m">
+            {# TODO: is the below comment and code still relevant? Can't find the variable in that file #}
+            {# if there are no contact details on the page, we don't want the last
+            streamfield block to have a bottom margin. last_flush is used in stream_block.html #}
+            {% if page.contact_details %}
+                {% set last_flush = False %}
+            {% else %}
+                {% set last_flush = True %}
+            {% endif %}
 
-                {% if page.contact_details %}
-                    <section id="contact-details">
-                        <h2 class="ons-u-fs-l">{{ _("Contact details") }}</h2>
+            {% include_block page.content %}
 
-                        {% call onsTextIndent() %}
-                            <p class="contact-details__line">
-                                <strong>Name</strong>: {{ page.contact_details.name }}
-                            </p>
-                            <p class="contact-details__line">
-                                <strong>Email</strong>: <a href="mailto:{{ page.contact_details.email }}">{{ page.contact_details.email }}</a>
-                            </p>
-                            {% if page.contact_details.phone %}
-                                <p class="contact-details__line">
-                                    <strong>Telephone</strong>: <a href="tel:{{ page.contact_details.phone | replace(' ','')}}">{{ page.contact_details.phone }}</a>
-                                </p>
-                            {% endif %}
-                        {% endcall %}
-                    </section>
-                {% endif %}
-            </div>
+            {% if related_publications %}
+            {# fmt:off #}
+            {{-
+                onsRelatedContent({
+                    "ariaLabel": _('Related publications'),
+                    "rows": [{
+                        "id": 'related-content',
+                        "title": _('Related publications'),
+                        "itemsList": related_publications
+                    }],
+                    "classes": "spacing"
+                })
+            -}}
+            {# fmt:on #}
+            {% endif %}
+
+            {% if page.show_cite_this_page %}
+                <section id="cite-this-page" class="spacing">
+                    <h2 class="ons-u-fs-l">{{ _("Cite this methodology") }}</h2>
+                    <p>
+                        {%- set cite_link -%}
+                            <a href="{{ fullpageurl(page) }}">{{ page.title }}</a>
+                        {% endset %}
+                        {% set latest_date = page.last_revised_date if page.last_revised_date else page.publication_date %}
+                        {% trans trimmed latest_date_formatted = latest_date|date("DATE_FORMAT"), cite_link=cite_link %}
+                            Office for National Statistics (ONS), last revised {{ latest_date_formatted }}, ONS website, methodology, {{ cite_link }}
+                        {% endtrans %}
+                    </p>
+                </section>
+            {% endif %}
+
+            {% if page.contact_details %}
+                {% with contact_details = page.contact_details%}
+                    {% include "templates/components/contact_details/contact_details.html" %}
+                {% endwith %}
+            {% endif %}
         </div>
     </div>
 {% endblock %}