8000 Fix header link (#1263) · vuejs-vn/vuejs.org@b73f126 · GitHub
[go: up one dir, main page]
Skip to content
This repository was archived by the owner on Sep 16, 2020. It is now read-only.

Commit b73f126

Browse files
Justineochrisvfritz
Justineo
authored and
chrisvfritz
committed
Fix header link (vuejs#1263)
* fix header link * fix cr
1 parent de0a793 commit b73f126

File tree

3 files changed

+22
-9
lines changed

3 files changed

+22
-9
lines changed

‎themes/vue/source/css/_settings.styl

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,14 @@ $info = #1C90F3
1919

2020
$radius = 2px
2121
$content-padding-top = 30px
22+
23+
// header settings
2224
$header-inner-height = 41px
2325
$heading-padding-vertical = 10px
2426
$header-height = $header-inner-height + $heading-padding-vertical * 2
2527
$mobile-header-height = 40px
26-
$heading-link-padding-top = $content-padding-top
27-
$mobile-heading-link-padding-top = $content-padding-top
28+
// prevent headers from being covered by the top nav upon navigation
29+
$heading-link-padding-top = $header-height + $content-padding-top
30+
$mobile-heading-link-padding-top = $mobile-header-height + $content-padding-top
2831
$h2-margin-top = 45px
2932
$h3-margin-top = 52px

‎themes/vue/source/css/page.styl

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,10 @@
5151
h1
5252
margin: 0 0 1em
5353
h2, h3
54+
pointer-events: none
55+
a
56+
pointer-events: auto
57+
color: $dark
5458
&:before
5559
content: ""
5660
display: block
@@ -61,11 +65,9 @@
6165
margin: $h2-margin-top 0 .8em
6266
padding-bottom: .7em
6367
border-bottom: 1px solid $border
64-
z-index: -1
6568
h3
6669
margin: $h3-margin-top 0 1.2em
6770
position: relative
68-
z-index: -1
6971
&:after
7072
content: "#"
7173
color: $green

‎themes/vue/source/js/common.js

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
(function () {
2-
32
initMobileMenu()
43
if (PAGE_TYPE) {
54
initVersionSelect()
@@ -26,7 +25,7 @@
2625
})
2726
}
2827

29-
function createSourceSearchPath(query) {
28+
function createSourceSearchPath (query) {
3029
query = query
3130
.replace(/\([^\)]*?\)/g, '')
3231
.replace(/(Vue\.)(\w+)/g, '$1$2" OR "$2')
@@ -251,7 +250,7 @@
251250
}
252251
}
253252
if (last)
254-
setActive(last.id, !hoveredOverSidebar)
253+
setActive(last.id, !hoveredOverSidebar)
255254
}
256255

257256
function makeLink (h) {
@@ -337,8 +336,17 @@
337336
function makeHeaderClickable (link) {
338337
var wrapper = link.querySelector('a')
339338
wrapper.setAttribute('data-scroll', '')
340-
link.parentNode.insertBefore(wrapper, link)
341-
wrapper.appendChild(link)
339+
340+
// transform DOM structure from
341+
// `<h2><a></a>Header</a>` to <h2><a>Header</a></h2>`
342+
// to make the link clickable
343+
var nodes = link.childNodes
344+
for (var i = 0; i < nodes.length; i++) {
345+
var node = nodes[i]
346+
if (node !== wrapper) {
347+
wrapper.appendChild(node)
348+
}
349+
}
342350
}
343351
}
344352
})()

0 commit comments

Comments
 (0)
0