govuk_tech_docs 6.6.0 → 6.6.0.2.rc

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f5035007e52803cd8c363d3edb9edef4eb6d539af99ac7057a95620f4ca16af6
-  data.tar.gz: caf5e336a81016120b725c7a2220c2b94296aa75cda9082952bfb934e06e68c7
+  metadata.gz: d6e328084d2f13b8f8e68129ba49e81d665d6ec8f72ee36124744b3d59ee2746
+  data.tar.gz: 677f49e76228b855545387d892f598e99dab171faf26f4bb4b57fb334ad02d39
 SHA512:
-  metadata.gz: 9611da809f7c47179e93561f679e2fb130a6957bb6aa64ce26aa0baadcc125a2911f83d0c4ae9b48e78bc947155457d5e16599226cb1b8f710bf275a458babf6
-  data.tar.gz: 0a209c6d34f05bce7bd71ee769bc212ebbca961cdbe5e1f586b1aa95fa79f772142cc68c8c5c5dc24dd0bf7330b31b43d149030916675714d09efecb8d83dfd5
+  metadata.gz: 4e027b5f33816e9e0e892acb272bd70326d761fda26c3b3d92b7f56a085d5bebf81060e60d1bf31f12580c23dc5f1f87bb4c13ead563189f2c2650309c67f16c
+  data.tar.gz: 2df2a47ac7fc68b6231ff86abaef8c229c1ffac8bf9ef71980e6a1997f8d433492fa9ff6034f654f37288d04122c6c64a7b68596c5dcc7a25d7251acca262b12

data/CHANGELOG.md

@@ -1,5 +1,14 @@
 ## Unreleased changes
 
+## 6.6.0.2.rc
+- Fix missing top-level pages in multipage navigation when a custom `http_prefix` is configured ([issue 488](https://github.com/alphagov/tech-docs-gem/issues/488)).
+
+## 6.6.0.1
+
+- Fix sticky TOC fighting page scroll: keep the active nav item visible by scrolling only the sidebar pane, not the window, so a long table of contents no longer blocks reaching the footer
+- Keep the sidebar divider running down to the footer when the page is shorter than the table of contents
+- Fix desktop sidebar scrolling after the `.app-pane` wrapper was removed: keep the table of contents sticky and independently scrollable while the page (and full-width footer) scroll normally ([related to pull request 513](https://github.com/alphagov/tech-docs-gem/pull/513))
+
 ## 6.6.0
 
 - Use GOV.UK front end to `6.6.0`

data/lib/assets/javascripts/_modules/collapsible-navigation.js

@@ -14,6 +14,9 @@
       // Attach collapsible heading functionality,on mobile and desktop
       collapsibleHeadings()
       openActiveHeading()
+      // Page scroll is on the window (sticky TOC layout); keep listening in case
+      // a consumer still scrolls .app-pane__content independently.
+      $(window).on('scroll', _.debounce(openActiveHeading, 100, { maxWait: 100 }))
       $contentPane.on('scroll', _.debounce(openActiveHeading, 100, { maxWait: 100 }))
     }
 

data/lib/assets/javascripts/_modules/in-page-navigation.js

@@ -11,7 +11,9 @@
       $tocItems = $('.js-toc-list').find('a')
       $targets = $contentPane.find('[id]')
 
-      $contentPane.on('scroll', _.debounce(handleScrollEvent, 100, { maxWait: 100 }))
+      // Scroll happens on the window now that the layout no longer uses a
+      // viewport-locked .app-pane with overflow scrolling on .app-pane__content.
+      $(window).on('scroll', _.debounce(handleScrollEvent, 100, { maxWait: 100 }))
 
       if (Modernizr.history) {
         // Popstate is triggered when using the back button to navigate 'within'
@@ -34,7 +36,7 @@
 
     function restoreScrollPosition (state) {
       if (state && typeof state.scrollTop !== 'undefined') {
-        $contentPane.scrollTop(state.scrollTop)
+        window.scrollTo(0, state.scrollTop)
       }
     }
 
@@ -58,7 +60,7 @@
     function storeCurrentPositionInHistoryApi (fragment) {
       if (Modernizr.history && fragment) {
         history.replaceState(
-          { scrollTop: $contentPane.scrollTop() },
+          { scrollTop: window.scrollY || window.pageYOffset },
           '',
           fragment
         )
@@ -88,8 +90,37 @@
       }
     }
 
+    // Scroll only within the sticky TOC pane. Avoid Element.scrollIntoView —
+    // it can also scroll the window, which fights page scroll toward the footer
+    // when the sticky sidebar is leaving the viewport.
     function scrollTocToActiveItem (activeTocElement) {
-      activeTocElement.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+      const scrollParent = getScrollableAncestor(activeTocElement)
+      if (!scrollParent) {
+        return
+      }
+
+      const parentRect = scrollParent.getBoundingClientRect()
+      const elementRect = activeTocElement.getBoundingClientRect()
+
+      if (elementRect.top < parentRect.top) {
+        scrollParent.scrollTop -= parentRect.top - elementRect.top
+      } else if (elementRect.bottom > parentRect.bottom) {
+        scrollParent.scrollTop += elementRect.bottom - parentRect.bottom
+      }
+    }
+
+    function getScrollableAncestor (element) {
+      let parent = element.parentElement
+
+      while (parent && parent !== document.body && parent !== document.documentElement) {
+        const overflowY = window.getComputedStyle(parent).overflowY
+        if (overflowY === 'auto' || overflowY === 'scroll') {
+          return parent
+        }
+        parent = parent.parentElement
+      }
+
+      return null
     }
 
     function fragmentForTargetElement () {
@@ -106,7 +137,7 @@
 
         const $this = $(this)
 
-        if (Math.floor($this.position().top) <= 0) {
+        if (Math.floor($this[0].getBoundingClientRect().top) <= 0) {
           result = $this
         }
       })

data/lib/assets/stylesheets/modules/_app-pane.scss

@@ -2,49 +2,36 @@
   $toc-width: 330px;
 
   .flexbox, .flexboxtweener {
-
-    body {
-      overflow: hidden;
-    }
-
-    .app-pane {
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      height: 100vh;
-    }
-
-    .app-pane__header {
-      display: flex;
-      flex-direction: column;
-      flex: 1 0 auto;
-
-      > * {
-        flex: 1 0 auto;
-      }
-    }
-
+    // Document scroll (not a locked viewport pane) so the full-width footer can
+    // sit after the content and scroll into view. The TOC stays visible via
+    // position: sticky and scrolls independently when taller than the viewport.
     .app-pane__body {
       display: flex;
-      flex: 1 1 100%;
-      min-height: 0;
+      align-items: flex-start;
       position: relative;
-
-      > * {
-        overflow-x: scroll;
-        -webkit-overflow-scrolling: touch;
-        -ms-overflow-style: none;
-      }
     }
 
     .app-pane__toc {
       flex: 0 0 auto;
       width: $toc-width;
-      border-right: 1px solid govuk-functional-colour(border);
+      position: sticky;
+      top: 0;
+      align-self: flex-start;
+      max-height: 100vh;
+      overflow-x: hidden;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+      -ms-overflow-style: none;
     }
 
     .app-pane__content {
       flex: 1 1 auto;
+      align-self: stretch;
+      min-width: 0;
+      overflow: visible;
+      // The row is as tall as the TOC. Stretch this column so the divider
+      // reaches the footer when the page is shorter than the sidebar.
+      border-left: 1px solid govuk-functional-colour(border);
     }
   }
 

data/lib/govuk_tech_docs/table_of_contents/helpers.rb

@@ -30,14 +30,17 @@ module GovukTechDocs
           .to_a
       end
 
-      def select_top_level_html_files(resources)
+      def select_top_level_html_files(resources, config = nil)
+        http_prefix = config&.[](:http_prefix).to_s
+        home_url = http_prefix.end_with?("/") ? http_prefix : "#{http_prefix}/"
+
         resources
-          .select { |r| r.path.end_with?(".html") && (r.parent.nil? || r.parent.url == "/") }
+          .select { |r| r.path.end_with?(".html") && (r.parent.nil? || r.parent.url == home_url) }
       end
 
       def multi_page_table_of_contents(resources, current_page, config, current_page_html = nil, include_child_resources: true)
         resources = sort_resources_stably(
-          select_top_level_html_files(resources),
+          select_top_level_html_files(resources, config),
         )
 
         render_page_tree(resources, current_page, config, current_page_html, include_child_resources:)

data/lib/govuk_tech_docs/version.rb

@@ -1,3 +1,3 @@
 module GovukTechDocs
-  VERSION = "6.6.0".freeze
+  VERSION = "6.6.0.2.rc".freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: govuk_tech_docs
 version: !ruby/object:Gem::Version
-  version: 6.6.0
+  version: 6.6.0.2.rc
 platform: ruby
 authors:
 - Government Digital Service