Restructure sidebar HTML.

Instead of including the sidebar HTML inside .content and having it positioned absolutely, move it inside .container by passing it to the header template, and use flexbox instead. This removes the need for a twothirdswidthpage body class, which means we will be able to remove it in time (though a number of cobrands currently use it for logo size overriding etc where it doesn't seem necessary, which will need dealing with first).
mysociety · Aug 30, 2024 · e86888f · e86888f
1 parent 0248683
commit e86888f
Show file tree

Hide file tree

Showing 56 changed files with 152 additions and 242 deletions.
diff --git a/perllib/FixMyStreet/Template/Stash.pm b/perllib/FixMyStreet/Template/Stash.pm
@@ -11,7 +11,11 @@ sub get {
 
     my $value = $self->SUPER::get(@_);
 
-    $value = FixMyStreet::Template::Variable->new($value) unless ref $value;
+    # We cannot pass a F::T::V to the template INCLUDE or PROCESS, it doesn't
+    # cope with it.  So special case the only place we want to use a variable
+    # template, which is the sidebar.
+    $value = FixMyStreet::Template::Variable->new($value)
+        unless ref $value || $_[0] eq 'sidebar';
 
     return $value;
 }

diff --git a/templates/web/base/about/faq-en-gb.html b/templates/web/base/about/faq-en-gb.html
@@ -1,6 +1,4 @@
-[% INCLUDE 'header.html', title = loc('Frequently Asked Questions'), bodyclass = 'twothirdswidthpage' %]
-
-[% INCLUDE 'about/_sidebar.html' %]
+[% INCLUDE 'header.html', title = loc('Frequently Asked Questions'), bodyclass = 'twothirdswidthpage', sidebar='about/_sidebar.html' %]
 
 <h1><a name="faq"></a>[% loc('Frequently Asked Questions') %]</h1>
 

diff --git a/templates/web/base/about/privacy.html b/templates/web/base/about/privacy.html
@@ -1,9 +1,8 @@
 [% INCLUDE 'header.html',
     title = loc('Privacy and cookies'),
+    sidebar = 'about/_sidebar.html'
     bodyclass = 'twothirdswidthpage' %]
 
-[% INCLUDE 'about/_sidebar.html' %]
-
 <h1>Privacy, cookies, and third party services</h1>
 
 <p><strong>Our use of your data, cookies, and external services: what you

diff --git a/templates/web/base/admin/header.html b/templates/web/base/admin/header.html
@@ -1,6 +1,7 @@
 [%
     SET bodyclass = bodyclass || 'twothirdswidthpage';
     SET admin = 1;
+    SET sidebar = bodyclass.match('mappage') ? '' : 'admin/navigation.html';
     INCLUDE 'header.html' bodyclass = bodyclass _ ' admin';
 %]
 <style type="text/css">
@@ -12,4 +13,4 @@
 .sm { font-size: smaller; }
 </style>
 
-[% INCLUDE 'admin/navigation.html' UNLESS bodyclass.match('mappage') %]
+<h1>[% title %]</h1>
diff --git a/templates/web/base/admin/navigation.html b/templates/web/base/admin/navigation.html
@@ -15,5 +15,3 @@
         </ul>
     </aside>
 </div>
-
-<h1>[% title %]</h1>
diff --git a/templates/web/base/contact/index.html b/templates/web/base/contact/index.html
@@ -5,10 +5,9 @@
     title = loc('Contact Us')
     robots = 'noindex,nofollow'
     bodyclass = 'twothirdswidthpage'
+    sidebar = 'about/_sidebar.html'
 %]
 
-[% INCLUDE 'about/_sidebar.html' %]
-
 [% IF c.cobrand.moniker == 'fixmystreet' %]
 <h1>FixMyStreet technical support</h1>
 [% ELSE %]

diff --git a/templates/web/base/header.html b/templates/web/base/header.html
@@ -27,5 +27,8 @@
             [% pre_container_extra | safe %]
 
 
-            <div class="container">
+            <div class="container[% IF sidebar %] container--sidebar[% END %]">
+              [% IF sidebar %]
+                [% INCLUDE $sidebar %]
+              [% END %]
                 <div class="content[% " $mainclass" | html IF mainclass %]" role="main">
diff --git a/templates/web/base/open311/index.html b/templates/web/base/open311/index.html
@@ -1,6 +1,4 @@
-[% INCLUDE 'header.html', title = 'Open311', bodyclass = 'twothirdswidthpage' %]
-
-[% INCLUDE 'about/_sidebar.html' %]
+[% INCLUDE 'header.html', title = 'Open311', bodyclass = 'twothirdswidthpage' sidebar='about/_sidebar.html' %]
 
 <h1>FixMyStreet support for Open311</h1>
 

diff --git a/templates/web/bathnes/contact/index.html b/templates/web/bathnes/contact/index.html
@@ -4,11 +4,10 @@
 [% INCLUDE 'header.html',
     title = loc('Contact Us')
     robots = 'noindex,nofollow'
+    sidebar = 'about/_sidebar.html'
     bodyclass = 'twothirdswidthpage'
 %]
 
-[% INCLUDE 'about/_sidebar.html' %]
-
 [% IF c.cobrand.moniker == 'fixmystreet' %]
 <h1>FixMyStreet technical support</h1>
 [% ELSIF rejecting_report %]

diff --git a/templates/web/bristol/about/faq-en-gb.html b/templates/web/bristol/about/faq-en-gb.html
@@ -1,6 +1,4 @@
-[% INCLUDE 'header.html', title = loc('Frequently Asked Questions'), bodyclass = 'twothirdswidthpage' %]
-
-[% INCLUDE 'about/_sidebar.html' %]
+[% INCLUDE 'header.html', title = loc('Frequently Asked Questions'), bodyclass = 'twothirdswidthpage' sidebar='about/_sidebar.html' %]
 
 <h1>Frequently Asked Questions</h1>
 

diff --git a/templates/web/bromley/about/faq-en-gb.html b/templates/web/bromley/about/faq-en-gb.html
@@ -1,6 +1,4 @@
-[% INCLUDE 'header.html', title = 'Help', bodyclass = 'twothirdswidthpage' %]
-
-[% INCLUDE 'about/_sidebar.html' %]
+[% INCLUDE 'header.html', title = 'Help', bodyclass = 'twothirdswidthpage' sidebar='about/_sidebar.html' %]
 
 <h1> Frequently Asked Questions </h1>
 

diff --git a/templates/web/buckinghamshire/about/faq-en-gb.html b/templates/web/buckinghamshire/about/faq-en-gb.html
@@ -1,6 +1,4 @@
-[% INCLUDE 'header.html', title = loc('Frequently Asked Questions'), bodyclass = 'twothirdswidthpage' %]
-
-[% INCLUDE 'about/_sidebar.html' %]
+[% INCLUDE 'header.html', title = loc('Frequently Asked Questions'), bodyclass = 'twothirdswidthpage' sidebar='about/_sidebar.html' %]
 
 <h1><a name="faq"></a>Frequently Asked Questions</h1>
 

diff --git a/templates/web/cheshireeast/about/faq-en-gb.html b/templates/web/cheshireeast/about/faq-en-gb.html
@@ -1,6 +1,4 @@
-[% INCLUDE 'header.html', title = loc('Help'), bodyclass = 'twothirdswidthpage' %]
-
-[% INCLUDE 'about/_sidebar.html' %]
+[% INCLUDE 'header.html', title = loc('Help'), bodyclass = 'twothirdswidthpage' sidebar='about/_sidebar.html' %]
 
 <h1>Cheshire East FixMyStreet</h1>
 

diff --git a/templates/web/cyclinguk/about/about.html b/templates/web/cyclinguk/about/about.html
@@ -1,6 +1,4 @@
-[% INCLUDE 'header.html', title = loc('About Fill That Hole'), bodyclass = 'twothirdswidthpage' %]
-
-[% INCLUDE 'about/_sidebar.html' %]
+[% INCLUDE 'header.html', title = loc('About Fill That Hole'), bodyclass = 'twothirdswidthpage' sidebar='about/_sidebar.html' %]
 
 <h1>About Fill That Hole</h1>
 

diff --git a/templates/web/cyclinguk/about/compensation.html b/templates/web/cyclinguk/about/compensation.html
@@ -1,6 +1,4 @@
-[% INCLUDE 'header.html', title = loc('Can I claim compensation for damage or injury?'), bodyclass = 'twothirdswidthpage' %]
-
-[% INCLUDE 'about/_sidebar.html' %]
+[% INCLUDE 'header.html', title = loc('Can I claim compensation for damage or injury?'), bodyclass = 'twothirdswidthpage' sidebar='about/_sidebar.html' %]
 
 <h1>Can I claim compensation for damage or injury?</h1>
 

diff --git a/templates/web/cyclinguk/about/faq-en-gb.html b/templates/web/cyclinguk/about/faq-en-gb.html
@@ -1,6 +1,4 @@
-[% INCLUDE 'header.html', title = loc('How to use Fill That Hole'), bodyclass = 'twothirdswidthpage' %]
-
-[% INCLUDE 'about/_sidebar.html' %]
+[% INCLUDE 'header.html', title = loc('How to use Fill That Hole'), bodyclass = 'twothirdswidthpage' sidebar='about/_sidebar.html' %]
 
 <h1>How to use Fill That Hole</h1>
 

diff --git a/templates/web/cyclinguk/about/house-rules.html b/templates/web/cyclinguk/about/house-rules.html
@@ -1,6 +1,4 @@
-[% INCLUDE 'header.html' title='Fill That Hole Conditions of Use' bodyclass='twothirdswidthpage' %]
-
-[% INCLUDE 'about/_sidebar.html' %]
+[% INCLUDE 'header.html' title='Fill That Hole Conditions of Use' bodyclass='twothirdswidthpage' sidebar='about/_sidebar.html' %]
 
 <h1>Fill That Hole Conditions of Use</h1>
 

diff --git a/templates/web/cyclinguk/about/potholes.html b/templates/web/cyclinguk/about/potholes.html
@@ -1,6 +1,4 @@
-[% INCLUDE 'header.html', title = loc('How can we fix the pothole crisis?'), bodyclass = 'twothirdswidthpage' %]
-
-[% INCLUDE 'about/_sidebar.html' %]
+[% INCLUDE 'header.html', title = loc('How can we fix the pothole crisis?'), bodyclass = 'twothirdswidthpage' sidebar='about/_sidebar.html' %]
 
 <h1>How can we fix the pothole crisis?</h1>
 

diff --git a/templates/web/cyclinguk/about/web-app.html b/templates/web/cyclinguk/about/web-app.html
@@ -1,6 +1,4 @@
-[% INCLUDE 'header.html', title = loc('Reporting app'), bodyclass = 'twothirdswidthpage' %]
-
-[% INCLUDE 'about/_sidebar.html' %]
+[% INCLUDE 'header.html', title = loc('Reporting app'), bodyclass = 'twothirdswidthpage' sidebar='about/_sidebar.html' %]
 
 <h1>Fill That Hole app</h1>
 

diff --git a/templates/web/eastherts/about/faq-en-gb.html b/templates/web/eastherts/about/faq-en-gb.html
@@ -1,6 +1,4 @@
-[% INCLUDE 'header.html', title = 'Help', bodyclass = 'twothirdswidthpage' %]
-
-[% INCLUDE 'about/_sidebar.html' %]
+[% INCLUDE 'header.html', title = 'Help', bodyclass = 'twothirdswidthpage' sidebar='about/_sidebar.html' %]
 
 <h1> Frequently Asked Questions </h1>
 

diff --git a/templates/web/fiksgatami/about/faq-nb.html b/templates/web/fiksgatami/about/faq-nb.html
@@ -1,6 +1,4 @@
-[% INCLUDE 'header.html', title => loc('Frequently Asked Questions') bodyclass = 'twothirdswidthpage' %]
-
-[% INCLUDE 'about/_sidebar.html' %]
+[% INCLUDE 'header.html', title = loc('Frequently Asked Questions') bodyclass = 'twothirdswidthpage' sidebar='about/_sidebar.html' %]
 
 <h1>Ofte stilte spørsmål</h1>
 <dl>

diff --git a/templates/web/fiksgatami/about/faq-nn.html b/templates/web/fiksgatami/about/faq-nn.html
@@ -1,6 +1,4 @@
-[% INCLUDE 'header.html', title => loc('Frequently Asked Questions') bodyclass = 'twothirdswidthpage' %]
-
-[% INCLUDE 'about/_sidebar.html' %]
+[% INCLUDE 'header.html', title = loc('Frequently Asked Questions') bodyclass = 'twothirdswidthpage' sidebar='about/_sidebar.html' %]
 
 <h1>Ofte stilte spurnader</h1>
 <dl>

diff --git a/templates/web/fixamingata/about/council.html b/templates/web/fixamingata/about/council.html
@@ -1,7 +1,7 @@
-[% INCLUDE 'header.html', title => 'För kommuner', bodyclass => 'twothirdswidthpage' %]
+[% INCLUDE 'header.html', title = 'För kommuner', bodyclass = 'twothirdswidthpage' sidebar='sidebar' %]
 
+[% BLOCK sidebar %]
 [% INCLUDE 'about/_sticky-button-content-navbar.html' %]
-
 <div class="sticky-sidebar">
     <aside>
         <ul>
@@ -16,6 +16,7 @@
         </ul>
     </aside>
 </div>
+[% END %]
 
 <h1>Information för kommuner</h1>
 <p>FixaMinGata är en e-tjänst som drivs av <a href="http://sambruk.se/">Föreningen Sambruk</a> och är framtagen i samarbete med <a href="http://kivos.se/">KIVOS</a> och <a href="http://ffkp.se/">FFKP</a>. ALLA kan använda e-tjänsten för att rapportera fel till kommuner. Tjänsten är en molntjänst och kan snabbt anpassas för en ny kommun. Fel som rapporteras skickas via e-post till berörd enhet på kommunen. För kommuner som har befintliga verksamhetssystem för rapportering och uppföljning finns flera möjligheter att integrera systemen.</p>

diff --git a/templates/web/fixamingata/about/faq-sv.html b/templates/web/fixamingata/about/faq-sv.html
@@ -1,7 +1,7 @@
-[% INCLUDE 'header.html', title => loc('Frequently Asked Questions'), bodyclass => 'twothirdswidthpage' %]
+[% INCLUDE 'header.html', title = loc('Frequently Asked Questions'), bodyclass = 'twothirdswidthpage' sidebar='sidebar' %]
 
+[% BLOCK sidebar %]
 [% INCLUDE 'about/_sticky-button-content-navbar.html' %]
-
 <div class="sticky-sidebar">
     <aside>
         <ul>
@@ -13,6 +13,7 @@
         </ul>
     </aside>
 </div>
+[% END %]
 
 <h1><a name="faq"></a>Vanliga frågor</h1>
 <dl>

diff --git a/templates/web/fixamingata/about/privacy.html b/templates/web/fixamingata/about/privacy.html
@@ -1,7 +1,7 @@
-[% INCLUDE 'header.html', title => loc('Vanliga Frågor'), bodyclass => 'twothirdswidthpage' %]
+[% INCLUDE 'header.html', title = loc('Vanliga Frågor'), bodyclass = 'twothirdswidthpage' sidebar='sidebar' %]
 
+[% BLOCK sidebar %]
 [% INCLUDE 'about/_sticky-button-content-navbar.html' %]
-
 <div class="sticky-sidebar">
     <aside>
         <ul>
@@ -13,7 +13,7 @@
         </ul>
     </aside>
 </div>
-
+[% END %]
 
 <h1>Sekretess och kakor</h1>
 <p><strong>Vår användning av din information och vad du behöver veta.</strong></p>

diff --git a/templates/web/fixmystreet-uk-councils/about/faq-en-gb.html b/templates/web/fixmystreet-uk-councils/about/faq-en-gb.html
@@ -1,6 +1,4 @@
-[% INCLUDE 'header.html', title = loc('Frequently Asked Questions'), bodyclass = 'twothirdswidthpage' %]
-
-[% INCLUDE 'about/_sidebar.html' %]
+[% INCLUDE 'header.html', title = loc('Frequently Asked Questions'), bodyclass = 'twothirdswidthpage' sidebar='about/_sidebar.html' %]
 
 <h1>Frequently Asked Questions</h1>
 

diff --git a/templates/web/fixmystreet-uk-councils/about/privacy.html b/templates/web/fixmystreet-uk-councils/about/privacy.html
@@ -1,8 +1,8 @@
 [% INCLUDE 'header.html',
     title = 'Privacy policy',
+    sidebar = 'about/_sidebar.html'
     bodyclass = 'twothirdswidthpage' %]
 
-[% INCLUDE 'about/_sidebar.html' %]
 
 [% contact_us_href = '/contact' %]
 

diff --git a/templates/web/fixmystreet-uk-councils/about/web-app.html b/templates/web/fixmystreet-uk-councils/about/web-app.html
@@ -1,6 +1,4 @@
-[% INCLUDE 'header.html', title = loc('Reporting app'), bodyclass = 'twothirdswidthpage' %]
-
-[% INCLUDE 'about/_sidebar.html' %]
+[% INCLUDE 'header.html', title = loc('Reporting app'), bodyclass = 'twothirdswidthpage' sidebar='about/_sidebar.html' %]
 
 <h1>[% c.cobrand.council_name %] reporting app</h1>
 

diff --git a/templates/web/fixmystreet.com/about/faq-cy.html b/templates/web/fixmystreet.com/about/faq-cy.html
@@ -1,6 +1,4 @@
-[% INCLUDE 'header.html', title = 'Cwestiynau a ofynnir yn aml', bodyclass = 'twothirdswidthpage' %]
-
-[% INCLUDE 'about/_sidebar.html' %]
+[% INCLUDE 'header.html', title = 'Cwestiynau a ofynnir yn aml', bodyclass = 'twothirdswidthpage' sidebar='about/_sidebar.html' %]
 
 <h1>cwestiynau a ofynnir yn aml i FixMyStreet</h1>
 

diff --git a/templates/web/fixmystreet.com/about/faq-en-gb.html b/templates/web/fixmystreet.com/about/faq-en-gb.html
@@ -1,6 +1,4 @@
-[% INCLUDE 'header.html', title = loc('Information for citizens'), bodyclass = 'twothirdswidthpage' %]
-
-[% INCLUDE 'about/_sidebar.html' %]
+[% INCLUDE 'header.html', title = loc('Information for citizens'), bodyclass = 'twothirdswidthpage' sidebar='about/_sidebar.html' %]
 
 <h1>Information for citizens</h1>
 

diff --git a/templates/web/fixmystreet.com/about/house-rules-cy.html b/templates/web/fixmystreet.com/about/house-rules-cy.html
@@ -1,6 +1,4 @@
-[% INCLUDE 'header.html' title=loc('FixMyStreet Conditions of Use') bodyclass='twothirdswidthpage' %]
-
-[% INCLUDE 'about/_sidebar.html' %]
+[% INCLUDE 'header.html' title=loc('FixMyStreet Conditions of Use') bodyclass='twothirdswidthpage' sidebar='about/_sidebar.html' %]
 
 <h1>FixMyStreet Conditions of Use</h1>
 

diff --git a/templates/web/fixmystreet.com/about/house-rules.html b/templates/web/fixmystreet.com/about/house-rules.html
@@ -1,6 +1,4 @@
-[% INCLUDE 'header.html' title='FixMyStreet Conditions of Use' bodyclass='twothirdswidthpage' %]
-
-[% INCLUDE 'about/_sidebar.html' %]
+[% INCLUDE 'header.html' title='FixMyStreet Conditions of Use' bodyclass='twothirdswidthpage' sidebar='about/_sidebar.html' %]
 
 <h1>FixMyStreet Conditions of Use</h1>
 

diff --git a/templates/web/fixmystreet.com/about/information-for-councils.html b/templates/web/fixmystreet.com/about/information-for-councils.html
@@ -1,6 +1,5 @@
-[% INCLUDE 'header.html', title = loc('Frequently Asked Questions'), bodyclass = 'twothirdswidthpage' %]
+[% INCLUDE 'header.html', title = loc('Frequently Asked Questions'), bodyclass = 'twothirdswidthpage' sidebar='about/_sidebar.html' %]
 
-[% INCLUDE 'about/_sidebar.html' %]
 <h1>Information for councils</h1>
 <hr style="border-color:#fff6cc; margin: 2em 0">
 </dl>

diff --git a/templates/web/fixmystreet.com/about/open311-api-info.html b/templates/web/fixmystreet.com/about/open311-api-info.html
@@ -1,6 +1,4 @@
-[% INCLUDE 'header.html', title = 'FixMyStreet Open311 API', bodyclass = 'twothirdswidthpage' %]
-
-[% INCLUDE 'about/_sidebar.html' %]
+[% INCLUDE 'header.html', title = 'FixMyStreet Open311 API', bodyclass = 'twothirdswidthpage' sidebar='about/_sidebar.html' %]
 
 <h1>FixMyStreet Open311 API</h1>
 

diff --git a/templates/web/fixmystreet.com/about/posters.html b/templates/web/fixmystreet.com/about/posters.html
@@ -8,12 +8,14 @@
 [% INCLUDE header.html
     title = 'Promote FixMyStreet with our free goodies: posters, flyers, and kids activity packs'
     bodyclass = 'twothirdswidthpage goodies'
+    sidebar = 'sidebar'
 %]
 
 [%
     badge = '<a href="https://www.fixmystreet.com/"> <img src="https://www.fixmystreet.com/i/fms-badge.jpeg" alt="FixMyStreet - report, view or discuss local problems" border="0"></a>'
 %]
 
+[% BLOCK sidebar %]
 <div class="sticky-sidebar">
     <aside>
         <ul>
@@ -27,6 +29,7 @@
         </ul>
     </aside>
 </div>
+[% END %]
 
 <h1 id="goodies">Promotional material</h1>
 

diff --git a/templates/web/fixmystreet.com/about/press.html b/templates/web/fixmystreet.com/about/press.html
@@ -1,9 +1,8 @@
 [% INCLUDE 'header.html',
     title = loc('Press'),
+    sidebar='about/_sidebar.html'
     bodyclass = 'twothirdswidthpage' %]
 
-[% INCLUDE 'about/_sidebar.html' %]
-
 <h1>Press resources</h1>
 
 <h2>About FixMyStreet</h2>

diff --git a/templates/web/fixmystreet.com/about/privacy-cy.html b/templates/web/fixmystreet.com/about/privacy-cy.html
@@ -1,9 +1,8 @@
 [% INCLUDE 'header.html',
     title = loc('Privacy and cookies'),
+    sidebar='about/_sidebar.html'
     bodyclass = 'twothirdswidthpage' %]
 
-[% INCLUDE 'about/_sidebar.html' %]
-
 <h1>Preifatrwydd, cwcis, a gwasanaethau trydydd parti</h1>
 
 <h2>Polisi Preifatrwydd</h2>

diff --git a/templates/web/fixmystreet.com/about/privacy.html b/templates/web/fixmystreet.com/about/privacy.html
@@ -1,9 +1,8 @@
 [% INCLUDE 'header.html',
     title = loc('Privacy and cookies'),
+    sidebar='about/_sidebar.html'
     bodyclass = 'twothirdswidthpage' %]
 
-[% INCLUDE 'about/_sidebar.html' %]
-
 <h1>Privacy, cookies, and third party services</h1>
 
 <h2>Privacy Policy</h2>

diff --git a/templates/web/greenwich/about/faq-en-gb.html b/templates/web/greenwich/about/faq-en-gb.html
@@ -1,6 +1,4 @@
-[% INCLUDE 'header.html', title = 'Help', bodyclass = 'twothirdswidthpage' %]
-
-[% INCLUDE 'about/_sidebar.html' %]
+[% INCLUDE 'header.html', title = 'Help', bodyclass = 'twothirdswidthpage' sidebar='about/_sidebar.html' %]
 
 <h1> Frequently Asked Questions </h1>
 

diff --git a/templates/web/hart/about/faq-en-gb.html b/templates/web/hart/about/faq-en-gb.html
@@ -1,6 +1,4 @@
-[% INCLUDE 'header.html', title = 'Help', bodyclass = 'twothirdswidthpage' %]
-
-[% INCLUDE 'about/_sidebar.html' %]
+[% INCLUDE 'header.html', title = 'Help', bodyclass = 'twothirdswidthpage' sidebar='about/_sidebar.html' %]
 
 <h1> Frequently Asked Questions </h1>
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,5 +15,3 @@ @@
             </ul>
         </aside>
     </div>
-    <h1>[% title %]</h1>