Fix unclickable menu etc when there is no TOC

We don't need the 'sticky TOC offset' when there is no TOC. This removes that when there is no sidebar and therefore no TOC. This fixes that the Menu isn't clickable on mobile when the TOC is not there. It also fixes links above headings not being clickable, [alphagov/tech-docs-template#123], but only in the case when there is no sidebar.
alphagov · Jan 17, 2019 · 08b3bcc · 08b3bcc
1 parent 17031bd
commit 08b3bcc
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/lib/assets/stylesheets/modules/_technical-documentation.scss b/lib/assets/stylesheets/modules/_technical-documentation.scss
@@ -4,15 +4,20 @@
   // Scale margins with font size on mobile (16/19ths)
   $mobileTopMargin: ceil($tabletTopMargin * (16 / 19));
 
+  padding-top: min($mobileTopMargin, $gutter-half);
+  margin-top: max(0, $mobileTopMargin - $gutter-half);
+
   // Offset headings down on mobile so that linking to anchors they appear after
   // the sticky 'table of contents' element
   $stickyTocOffset: 20px + $gutter-half + 10px + 1px;
 
   // Pad the heading so that when linking to an anchor there is at most a
   // $gutter-half (mobile) or $gutter (tablet and above) sized gap between the
   // top of the viewport and the heading.
-  padding-top: min($mobileTopMargin, $gutter-half) + $stickyTocOffset;
-  margin-top: max(0, $mobileTopMargin - $gutter-half) - $stickyTocOffset;
+  .has-sidebar & {
+    padding-top: min($mobileTopMargin, $gutter-half) + $stickyTocOffset;
+    margin-top: max(0, $mobileTopMargin - $gutter-half) - $stickyTocOffset;
+  }
 
   @include media(tablet) {
     padding-top: min($tabletTopMargin, $gutter);

diff --git a/lib/source/layouts/core.erb b/lib/source/layouts/core.erb
@@ -29,7 +29,7 @@
     <%= yield_content :head %>
   </head>
 
-  <body>
+  <body <%= 'class="has-sidebar"' if content_for? :sidebar %>>
     <div class="app-pane">
       <div class="app-pane__header toc-open-disabled">
         <a href="#content" class="skip-link">Skip to main content</a>