Fix unclickable links

Bug: When links are in the last line above a heading, they are currently not clickable. Feature: Following a link to an anchor on mobile currently appears below the sticky table of contents. But that feature also causes the unclickable links bug, which is why this removes that feature again. Therefore this intentionally re-introduces the lesser evil that headings will be hidden underneath the TOC on mobile to fix alphagov/tech-docs-template#123.
alphagov · Feb 8, 2019 · aa08b16 · aa08b16
1 parent cc8bc9a
commit aa08b16
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 13 deletions.
diff --git a/lib/assets/stylesheets/modules/_technical-documentation.scss b/lib/assets/stylesheets/modules/_technical-documentation.scss
@@ -1,24 +1,15 @@
 // Adds combination of margin and padding to headings to make them appear
 // correctly when they're linked to as anchors, and scale them on mobile
+// TODO: Headings are hidden underneath the sticky 'table of contents' on mobile
+// when following a link to them
+
 @mixin heading-offset($tabletTopMargin) {
   // 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.
-  .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);
     margin-top: max(0, $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 <%= 'class="has-sidebar"' if content_for? :sidebar %>>
+  <body>
     <div class="app-pane">
       <div class="app-pane__header toc-open-disabled">
         <a href="#content" class="skip-link">Skip to main content</a>