Fix a variety of frontend issues

- add spans inside many links, this is the correct way to build them apparently, the styles are written to expect this - add custom style for link above header on e.g. get started page - fix grid layout for related-content section - remove unused visually-hidden class
alphagov · Sep 13, 2019 · b081338 · b081338
1 parent 95e06be
commit b081338
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 57 deletions.
diff --git a/helpers/navigation_helpers.rb b/helpers/navigation_helpers.rb
@@ -6,7 +6,8 @@ def active_page?(page_path)
   end
 
   def sidebar_link(name, page_path)
-    link_to name, page_path,
-      class: "/#{current_page.path}" == page_path ? 'toc-link--in-view' : nil
+    link_to(page_path, class: page_path == "/#{current_page.path}" ? 'toc-link--in-view' : nil) do
+      content_tag(:span, name)
+    end
   end
 end
diff --git a/source/index.html.erb b/source/index.html.erb
@@ -8,11 +8,15 @@ source_url: https://github.com/alphagov/govuk-developer-docs/blob/master/data/da
   <ul>
     <% dashboard.chapters.each do |chapter| %>
       <li>
-        <a href='#<%= chapter.id %>'><%= chapter.name %></a>
+        <a href='#<%= chapter.id %>'>
+          <span><%= chapter.name %></span>
+        </a>
         <ul>
           <% chapter.sections.each do |section| %>
             <li>
-              <a href='#<%= section.id %>'><%= section.name %></a>
+              <a href='#<%= section.id %>'>
+                <span><%= section.name %></span>
+              </a>
             </li>
           <% end %>
         </ul>

diff --git a/source/layouts/api_layout.html.erb b/source/layouts/api_layout.html.erb
@@ -1,8 +1,20 @@
 <% content_for :sidebar do %>
   <ul>
-    <li><%= link_to 'Content Store', '/apis/content-store.html' %></li>
-    <li><%= link_to 'Email Alert API', '/apis/email-alert-api.html' %></li>
-    <li><%= link_to 'Link Checker API', '/apis/link-checker-api.html' %></li>
+    <li>
+      <a href="/apis/content-store.html">
+        <span>Content Store</span>
+      </a>
+    </li>
+    <li>
+      <a href="/apis/email-alert-api.html">
+        <span>Email Alert API</span>
+      </a>
+    </li>
+    <li>
+      <a href="/apis/link-checker-api.html">
+        <span>Link Checker API</span>
+      </a>
+    </li>
     <li>
       <%= sidebar_link 'Publishing API', '/apis/publishing-api.html' %>
       <ul>

diff --git a/source/layouts/application_layout.html.erb b/source/layouts/application_layout.html.erb
@@ -1,10 +1,17 @@
 <% content_for :sidebar do %>
   <ul>
-    <li><%= link_to 'Application ownership by team', '/apps/by-team.html' %></li>
+    <li>
+      <a href="/apps/by-team.html">
+        <span>Application ownership by team</span>
+      </a>
+    </li>
 
     <% active_app_pages.group_by(&:type).each do |name, apps| %>
-      <li><%= link_to name, '/apps.html' %></li>
-
+      <li>
+        <a href="/apps.html">
+          <span><%= name %></span>
+        </a>
+      </li>
       <li>
         <ul class='subnav'>
         <% apps.each do |app| %>

diff --git a/source/layouts/manual_layout.html.erb b/source/layouts/manual_layout.html.erb
@@ -4,7 +4,7 @@
 <% content_for :page_description, Snippet.generate(html) %>
 
 <% content_for :sidebar do %>
-  <a href='/manual.html'>&lsaquo; Manual</a>
+  <a href='/manual.html' class="toc__back-link govuk-link">&lsaquo; Manual</a>
   <%= single_page_table_of_contents html, max_level: 3 %>
 <% end %>
 

diff --git a/source/manual.html.erb b/source/manual.html.erb
@@ -5,10 +5,18 @@ title: Manual
 
 <% content_for :sidebar do %>
   <ul>
-    <li><%= link_to "Manual", "/manual.html" %></li>
+    <li>
+      <a href="/manual.html">
+        <span>Manual</span>
+      </a>
+    </li>
     <ul>
       <% manual.manual_pages_grouped_by_section.each do |section_name, pages| %>
-        <li><%= link_to section_name, "##{section_name.parameterize}" %></li>
+        <li>
+          <a href="##{section_name.parameterize}">
+            <span><%= section_name %></span>
+          </a>
+        </li>
       <% end %>
     </ul>
   </ul>

diff --git a/source/partials/_related_content.html.erb b/source/partials/_related_content.html.erb
@@ -1,8 +1,8 @@
-<div class='related-content govuk-grid-row'>
+<div class='related-content'>
   <% if related_things.related_applications.any? %>
     <h4>Related applications</h4>
 
-    <ul>
+    <ul class="govuk-list">
     <% related_things.related_applications.each do |name, url| %>
       <li><%= link_to name, url %></li>
     <% end %>
@@ -12,28 +12,30 @@
   <% if related_things.any_related_pages? %>
     <h3>More in the <%= current_page.data.section %> section</h3>
 
-    <% if related_things.related_learning_pages.any? %>
-      <div class='govuk-grid-column-one-half'>
-        <h4>Learn</h4>
+    <div class='govuk-grid-row'>
+      <% if related_things.related_learning_pages.any? %>
+        <div class='govuk-grid-column-one-half'>
+          <h4>Learn</h4>
 
-        <ul>
-        <% related_things.related_learning_pages.each do |page| %>
-          <li><%= link_to page.data.title, page.url %></li>
-        <% end %>
-        </ul>
-      </div>
-    <% end %>
+          <ul class="govuk-list">
+          <% related_things.related_learning_pages.each do |page| %>
+            <li><%= link_to page.data.title, page.url %></li>
+          <% end %>
+          </ul>
+        </div>
+      <% end %>
 
-    <% if related_things.related_task_pages.any? %>
-      <div class='govuk-grid-column-one-half'>
-        <h4>How to...</h4>
+      <% if related_things.related_task_pages.any? %>
+        <div class='govuk-grid-column-one-half'>
+          <h4>How to...</h4>
 
-        <ul>
-        <% related_things.related_task_pages.each do |page| %>
-          <li><%= link_to page.data.title, page.url %></li>
-        <% end %>
-        </ul>
-      </div>
-    <% end %>
+          <ul class="govuk-list">
+          <% related_things.related_task_pages.each do |page| %>
+            <li><%= link_to page.data.title, page.url %></li>
+          <% end %>
+          </ul>
+        </div>
+      <% end %>
+    </div>
   <% end %>
 </div>
diff --git a/source/stylesheets/screen.css.scss b/source/stylesheets/screen.css.scss
@@ -59,30 +59,16 @@
   }
 }
 
-.visually-hidden {
-  position: absolute;
-  left: -9999em;
-  top: auto;
-  width: 1px;
-  height: 1px;
-  overflow: hidden
-}
-
 .related-content {
   border-top: 1px solid #090909;
-  margin: 40px 0 0 0;
-  padding: 10px 0 0 0;
-
-  .column-half {
-    padding-left: 0;
-  }
+  margin-top: 40px;
+}
 
-  ul {
-    padding: 0;
-  }
+.toc__back-link {
+  display: inline-block;
+  margin: govuk-spacing(1) 0 govuk-spacing(2) govuk-spacing(1);
+}
 
-  ul li {
-    list-style: none;
-    padding: 0;
-  }
+.technical-documentation > p:first-child {
+  margin: govuk-spacing(3) 0 0 0;
 }