govuk_tech_docs 6.6.0 → 6.6.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: b97846919bebddc9c222c552525fdf7286769036476e64077b43f7fee189aedd
|
|
4
|
+
data.tar.gz: 427a3b22dc896b71d1d02e0c2491c0431d21fd17273b6b4f8f261c6ec96b0f8e
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: f48fb912f823784fc1b9a965a61b2fe7b05ed4799c354f115fde41a49e3522457280a721d63918b8fdc3f2b9306a0e3b95c53b910f4cb12bd9eb8fbcfb6ca5cf
|
|
7
|
+
data.tar.gz: 82eab075fa67f562a4654005d18eab35f2aa3223ea2e91b3b85415662fc941e7ea1836f1101d19106c730fae195a4d03f58db2d3d6bd09c0cfc40a5220ef0bfe
|
data/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
## Unreleased changes
|
|
2
2
|
|
|
3
|
+
## 6.6.0.1
|
|
4
|
+
|
|
5
|
+
- 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
|
|
6
|
+
- Keep the sidebar divider running down to the footer when the page is shorter than the table of contents
|
|
7
|
+
- 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))
|
|
8
|
+
|
|
3
9
|
## 6.6.0
|
|
4
10
|
|
|
5
11
|
- Use GOV.UK front end to `6.6.0`
|
|
@@ -14,6 +14,9 @@
|
|
|
14
14
|
// Attach collapsible heading functionality,on mobile and desktop
|
|
15
15
|
collapsibleHeadings()
|
|
16
16
|
openActiveHeading()
|
|
17
|
+
// Page scroll is on the window (sticky TOC layout); keep listening in case
|
|
18
|
+
// a consumer still scrolls .app-pane__content independently.
|
|
19
|
+
$(window).on('scroll', _.debounce(openActiveHeading, 100, { maxWait: 100 }))
|
|
17
20
|
$contentPane.on('scroll', _.debounce(openActiveHeading, 100, { maxWait: 100 }))
|
|
18
21
|
}
|
|
19
22
|
|
|
@@ -11,7 +11,9 @@
|
|
|
11
11
|
$tocItems = $('.js-toc-list').find('a')
|
|
12
12
|
$targets = $contentPane.find('[id]')
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
// Scroll happens on the window now that the layout no longer uses a
|
|
15
|
+
// viewport-locked .app-pane with overflow scrolling on .app-pane__content.
|
|
16
|
+
$(window).on('scroll', _.debounce(handleScrollEvent, 100, { maxWait: 100 }))
|
|
15
17
|
|
|
16
18
|
if (Modernizr.history) {
|
|
17
19
|
// Popstate is triggered when using the back button to navigate 'within'
|
|
@@ -34,7 +36,7 @@
|
|
|
34
36
|
|
|
35
37
|
function restoreScrollPosition (state) {
|
|
36
38
|
if (state && typeof state.scrollTop !== 'undefined') {
|
|
37
|
-
|
|
39
|
+
window.scrollTo(0, state.scrollTop)
|
|
38
40
|
}
|
|
39
41
|
}
|
|
40
42
|
|
|
@@ -58,7 +60,7 @@
|
|
|
58
60
|
function storeCurrentPositionInHistoryApi (fragment) {
|
|
59
61
|
if (Modernizr.history && fragment) {
|
|
60
62
|
history.replaceState(
|
|
61
|
-
{ scrollTop:
|
|
63
|
+
{ scrollTop: window.scrollY || window.pageYOffset },
|
|
62
64
|
'',
|
|
63
65
|
fragment
|
|
64
66
|
)
|
|
@@ -88,8 +90,37 @@
|
|
|
88
90
|
}
|
|
89
91
|
}
|
|
90
92
|
|
|
93
|
+
// Scroll only within the sticky TOC pane. Avoid Element.scrollIntoView —
|
|
94
|
+
// it can also scroll the window, which fights page scroll toward the footer
|
|
95
|
+
// when the sticky sidebar is leaving the viewport.
|
|
91
96
|
function scrollTocToActiveItem (activeTocElement) {
|
|
92
|
-
|
|
97
|
+
const scrollParent = getScrollableAncestor(activeTocElement)
|
|
98
|
+
if (!scrollParent) {
|
|
99
|
+
return
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
const parentRect = scrollParent.getBoundingClientRect()
|
|
103
|
+
const elementRect = activeTocElement.getBoundingClientRect()
|
|
104
|
+
|
|
105
|
+
if (elementRect.top < parentRect.top) {
|
|
106
|
+
scrollParent.scrollTop -= parentRect.top - elementRect.top
|
|
107
|
+
} else if (elementRect.bottom > parentRect.bottom) {
|
|
108
|
+
scrollParent.scrollTop += elementRect.bottom - parentRect.bottom
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
function getScrollableAncestor (element) {
|
|
113
|
+
let parent = element.parentElement
|
|
114
|
+
|
|
115
|
+
while (parent && parent !== document.body && parent !== document.documentElement) {
|
|
116
|
+
const overflowY = window.getComputedStyle(parent).overflowY
|
|
117
|
+
if (overflowY === 'auto' || overflowY === 'scroll') {
|
|
118
|
+
return parent
|
|
119
|
+
}
|
|
120
|
+
parent = parent.parentElement
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
return null
|
|
93
124
|
}
|
|
94
125
|
|
|
95
126
|
function fragmentForTargetElement () {
|
|
@@ -106,7 +137,7 @@
|
|
|
106
137
|
|
|
107
138
|
const $this = $(this)
|
|
108
139
|
|
|
109
|
-
if (Math.floor($this.
|
|
140
|
+
if (Math.floor($this[0].getBoundingClientRect().top) <= 0) {
|
|
110
141
|
result = $this
|
|
111
142
|
}
|
|
112
143
|
})
|
|
@@ -2,49 +2,36 @@
|
|
|
2
2
|
$toc-width: 330px;
|
|
3
3
|
|
|
4
4
|
.flexbox, .flexboxtweener {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.app-pane {
|
|
11
|
-
display: flex;
|
|
12
|
-
flex-direction: column;
|
|
13
|
-
overflow: hidden;
|
|
14
|
-
height: 100vh;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.app-pane__header {
|
|
18
|
-
display: flex;
|
|
19
|
-
flex-direction: column;
|
|
20
|
-
flex: 1 0 auto;
|
|
21
|
-
|
|
22
|
-
> * {
|
|
23
|
-
flex: 1 0 auto;
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
|
|
5
|
+
// Document scroll (not a locked viewport pane) so the full-width footer can
|
|
6
|
+
// sit after the content and scroll into view. The TOC stays visible via
|
|
7
|
+
// position: sticky and scrolls independently when taller than the viewport.
|
|
27
8
|
.app-pane__body {
|
|
28
9
|
display: flex;
|
|
29
|
-
|
|
30
|
-
min-height: 0;
|
|
10
|
+
align-items: flex-start;
|
|
31
11
|
position: relative;
|
|
32
|
-
|
|
33
|
-
> * {
|
|
34
|
-
overflow-x: scroll;
|
|
35
|
-
-webkit-overflow-scrolling: touch;
|
|
36
|
-
-ms-overflow-style: none;
|
|
37
|
-
}
|
|
38
12
|
}
|
|
39
13
|
|
|
40
14
|
.app-pane__toc {
|
|
41
15
|
flex: 0 0 auto;
|
|
42
16
|
width: $toc-width;
|
|
43
|
-
|
|
17
|
+
position: sticky;
|
|
18
|
+
top: 0;
|
|
19
|
+
align-self: flex-start;
|
|
20
|
+
max-height: 100vh;
|
|
21
|
+
overflow-x: hidden;
|
|
22
|
+
overflow-y: auto;
|
|
23
|
+
-webkit-overflow-scrolling: touch;
|
|
24
|
+
-ms-overflow-style: none;
|
|
44
25
|
}
|
|
45
26
|
|
|
46
27
|
.app-pane__content {
|
|
47
28
|
flex: 1 1 auto;
|
|
29
|
+
align-self: stretch;
|
|
30
|
+
min-width: 0;
|
|
31
|
+
overflow: visible;
|
|
32
|
+
// The row is as tall as the TOC. Stretch this column so the divider
|
|
33
|
+
// reaches the footer when the page is shorter than the sidebar.
|
|
34
|
+
border-left: 1px solid govuk-functional-colour(border);
|
|
48
35
|
}
|
|
49
36
|
}
|
|
50
37
|
|