Skip to content

Commit 2f3d790

Browse files
athu-tranathu-tran
authored
Merge pull request #3352 from CVEProject/jd-2812-anchors-int
Resolves #2821 Fixes scrolling to anchors
2 parents b648586 + eb3c5c3 commit 2f3d790

File tree

3 files changed

+167
-103
lines changed

3 files changed

+167
-103
lines changed

‎src/components/SearchTable.vue‎

Lines changed: 61 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,82 @@
11
<template>
22
<div ref="tableRef" class="table-container">
3-
<table aria-live="polite" class="table cve-border-dark-blue is-striped is-hoverable" >
3+
<table aria-live="polite" class="table cve-border-dark-blue is-striped is-hoverable">
44
<thead>
55
<tr>
6-
<th v-for="(header, index) in tableHeaders" :key="index">{{header}}</th>
6+
<th v-for="(header, index) in tableHeaders" :key="index">{{ header }}</th>
77
</tr>
88
</thead>
99
<tbody>
10-
<tr v-for="(entry, index) in tableData" :key="index"
10+
<tr
11+
v-for="(entry, index) in tableData"
12+
:key="index"
1113
:id="entry.id"
1214
:ref="entry.id"
1315
v-on:click="selectRow(entry.id)"
14-
15-
v-bind:class="{'cve-term-active': selectedRow === entry.id}">
16+
v-bind:class="{ 'cve-term-active': selectedRow === entry.id }"
17+
>
1618
<td class="table-column-width">
17-
<a :href="entry.termLink" v-bind:class="{'selectTermLink': selectedRow === entry.id}" class="has-text-weight-bold termLink"> {{ entry.term }} </a>
19+
<router-link
20+
:to="'#' + entry.id"
21+
v-bind:class="{ selectTermLink: selectedRow === entry.id }"
22+
class="has-text-weight-bold termLink"
23+
>
24+
{{ entry.term }}
25+
</router-link>
1826
</td>
19-
<td v-if="renderAsHTML" class="cve-term-definition" v-html="entry.definition"> </td>
20-
<td v-else class="cve-term-definition">{{ entry.definition }} </td>
27+
<td
28+
v-if="renderAsHTML"
29+
class="cve-term-definition"
30+
v-html="entry.definition"
31+
></td>
32+
<td v-else class="cve-term-definition">{{ entry.definition }}</td>
2133
</tr>
2234
</tbody>
2335
</table>
2436
</div>
25-
</template>
26-
27-
<script>
37+
</template>
2838

29-
export default {
30-
name: "SearchTable",
31-
props: {
32-
tableData: {
33-
type: Array,
34-
required: true,
35-
},
36-
tableHeaders: {
37-
type: Array,
38-
required: true,
39-
},
40-
renderAsHTML: {
41-
type: Boolean,
42-
default: false,
43-
required: false,
44-
}
39+
<script>
40+
export default {
41+
name: "SearchTable",
42+
props: {
43+
tableData: {
44+
type: Array,
45+
required: true,
4546
},
46-
data() {
47-
return {
48-
selectedRow: null
49-
};
47+
tableHeaders: {
48+
type: Array,
49+
required: true,
5050
},
51-
mounted() {
52-
let term = null;
53-
54-
// Add active term as a hash to scroll to it then select it
55-
if (this.$route.query.activeTerm) {
56-
term = this.$route.query.activeTerm;
57-
this.$router.push({hash: "#" + term })
58-
this.selectRow(term)
59-
}
60-
// If route already has a hash, just select the term
61-
else if (this.$route.hash) {
62-
term = this.$route.hash.slice(1);
63-
this.selectRow(term)
64-
}
51+
renderAsHTML: {
52+
type: Boolean,
53+
default: false,
54+
required: false,
6555
},
66-
methods: {
67-
selectRow(rowId) {
68-
69-
this.selectedRow = (rowId === this.selectedRow ? null : rowId)
70-
}
56+
},
57+
data() {
58+
return {
59+
selectedRow: null,
60+
};
61+
},
62+
mounted() {
63+
let term = null;
64+
65+
if (this.$route.hash) {
66+
term = this.$route.hash.slice(1);
67+
this.selectRow(term);
68+
}
69+
},
70+
methods: {
71+
selectRow(rowId) {
72+
this.selectedRow = rowId;
7173
},
72-
};
73-
</script>
74-
75-
<!-- Add "scoped" attribute to limit CSS to this component only -->
76-
<style scoped lang="scss">
77-
78-
@import '@/assets/style/routerLink.scss';
74+
},
75+
};
76+
</script>
7977

78+
<!-- Add "scoped" attribute to limit CSS to this component only -->
79+
<style scoped lang="scss">
8080
@media only screen and (min-width: $desktop) {
8181
.table-column-width {
8282
width: 30% !important;
@@ -85,18 +85,18 @@
8585
8686
.cve-term-active {
8787
background-color: $theme-color-accent-cool-light !important;
88-
color: black ;
89-
padding-left: 8px;
88+
color: black;
89+
padding-left: 8px;
9090
padding-top: 5px;
9191
padding-bottom: 5px;
9292
}
93-
93+
9494
.termLink {
9595
color: $theme-color-primary;
96+
background: unset;
9697
}
9798
9899
.selectTermLink {
99100
color: black;
100101
}
101102
</style>
102-

‎src/router/index.js‎

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -45,16 +45,24 @@ import NotFound from '@/views/NotFound.vue';
4545

4646
const router = createRouter({
4747
history: createWebHistory(import.meta.env.BASE_URL),
48-
scrollBehavior(to) {
49-
if (to.hash) {
50-
return {
51-
el: to.hash,
52-
top: 55
53-
};
54-
}
55-
return {
56-
top: 0
57-
};
48+
scrollBehavior(to) {
49+
return new Promise((resolve) => {
50+
setTimeout(() => {
51+
if (to.hash) {
52+
resolve({
53+
el: to.hash,
54+
top: 55,
55+
behavior: "instant"
56+
});
57+
}
58+
resolve({
59+
top: 0
60+
});
61+
}, 0)
62+
63+
})
64+
65+
5866
},
5967
routes: [
6068
{
@@ -213,6 +221,12 @@ const router = createRouter({
213221
meta: {
214222
title: 'Glossary | CVE',
215223
},
224+
beforeEnter: (to) => {
225+
if (!to.hash) {
226+
const term = to.query.activeTerm;
227+
to.hash = '#' + term
228+
}
229+
},
216230
},
217231
{
218232
path: '/ResourcesSupport/FAQs',

‎src/views/ResourcesSupport/AllResources/CNARules.vue‎

Lines changed: 82 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -2,76 +2,119 @@
22
<div id="cve-tertiary-page-main-container" class="container">
33
<div class="columns is-centered">
44
<div class="column is-3 is-hidden-touch">
5-
<TableOfContentsSidebar :nav="cvePageNavs"/>
5+
<TableOfContentsSidebar :nav="cvePageNavs" />
66
</div>
77
<div class="column is-8-desktop cve-main-column-content-width is-12-tablet">
88
<main id="cve-main-page-content" role="main">
99
<h1 class="title">CVE Numbering Authority (CNA) Operational Rules</h1>
1010
<div id="cve-versionInformation">
11-
<p class="has-text-weight-bold">Document Version: <span>{{versionNum}}</span></p>
12-
<p class="has-text-weight-bold">CVE Board Approval: <span>{{versionApprovalDate}}</span></p>
13-
<p class="has-text-weight-bold">Effective Date: <span>{{versionDate}}</span></p>
14-
<p><router-link to="/Resources/Roles/Cnas/CNA_Rules_v4.0.pdf" target="_blank">View as PDF (0.2MB)</router-link></p>
11+
<p class="has-text-weight-bold">
12+
Document Version: <span>{{ versionNum }}</span>
13+
</p>
14+
<p class="has-text-weight-bold">
15+
CVE Board Approval: <span>{{ versionApprovalDate }}</span>
16+
</p>
17+
<p class="has-text-weight-bold">
18+
Effective Date: <span>{{ versionDate }}</span>
19+
</p>
20+
<p>
21+
<router-link to="/Resources/Roles/Cnas/CNA_Rules_v4.0.pdf" target="_blank">
22+
View as PDF (0.2MB)
23+
</router-link>
24+
</p>
1525
</div>
16-
<hr>
26+
<hr />
1727
<!-- Top level section -->
1828
<div class="content">
1929
<ol class="ml-0">
2030
<li v-for="(section, index) of cnaRulesSections" :key="index">
2131
<h2 class="title" :id="section.sectionId">
22-
{{ section.sectionTitle }}
32+
<a :href="`#${section.sectionId}`">
33+
{{ section.sectionTitle }}
34+
</a>
2335
</h2>
24-
<p v-for="(para, index) of section.sectionParagraphs" v-html="para" :key="index"></p>
36+
<p
37+
v-for="(para, index) of section.sectionParagraphs"
38+
v-html="para"
39+
:key="index"
40+
></p>
2541
<!-- Sub section -->
2642
<ol class="ml-0">
2743
<li v-for="(subSection, index) of section.subSections" :key="index">
2844
<h3 class="title" :id="subSection.subSectionId">
29-
{{ subSection.subSectionTitle }}
45+
<a :href="`#${subSection.subSectionId}`">
46+
{{ subSection.subSectionTitle }}
47+
</a>
3048
</h3>
31-
<p v-for="(para, index) of subSection.subSectionParagraphs"
32-
v-html="para" :key="index"></p>
49+
<p
50+
v-for="(para, index) of subSection.subSectionParagraphs"
51+
v-html="para"
52+
:key="index"
53+
></p>
3354
</li>
34-
</ol> <!-- end page sub section -->
55+
</ol>
56+
<!-- end page sub section -->
3557
</li>
36-
</ol> <!-- end page section -->
58+
</ol>
59+
<!-- end page section -->
3760
<ul class="ml-0 cve-list-no-bullet">
3861
<li v-for="(section, index) of cnaRulesAppendices" :key="index">
3962
<h2 class="title" :id="section.sectionId">
4063
{{ section.sectionTitle }}
4164
</h2>
42-
<p v-for="(para, index) of section.sectionParagraphs" v-html="para" :key="index"></p>
65+
<p
66+
v-for="(para, index) of section.sectionParagraphs"
67+
v-html="para"
68+
:key="index"
69+
></p>
4370
<!-- Sub section -->
4471
<ul class="ml-0 cve-list-no-bullet">
4572
<li v-for="(subSection, index) of section.subSections" :key="index">
4673
<h3 class="title" :id="subSection.subSectionId">
47-
{{ subSection.subSectionTitle }}
74+
{{ subSection.subSectionTitle }}
4875
</h3>
49-
<p v-for="(para, index) of subSection.subSectionParagraphs" v-html="para" :key="index"></p>
50-
<ul class="ml-0 cve-list-no-bullet"> <!-- Sub Sub section -->
51-
<li v-for="(subSubSection, index) of subSection.subSubSections" :key="index">
76+
<p
77+
v-for="(para, index) of subSection.subSectionParagraphs"
78+
v-html="para"
79+
:key="index"
80+
></p>
81+
<ul class="ml-0 cve-list-no-bullet">
82+
<!-- Sub Sub section -->
83+
<li
84+
v-for="(subSubSection, index) of subSection.subSubSections"
85+
:key="index"
86+
>
5287
<h4 class="title" :id="subSubSection.subSubSectionId">
5388
{{ subSubSection.subSubSectionTitle }}
5489
</h4>
55-
<p v-for="(para, index) of subSubSection.subSubSectionParagraphs" v-html="para" :key="index"></p>
90+
<p
91+
v-for="(para, index) of subSubSection.subSubSectionParagraphs"
92+
v-html="para"
93+
:key="index"
94+
></p>
5695
</li>
57-
</ul> <!-- end apendices sub sub section -->
96+
</ul>
97+
<!-- end apendices sub sub section -->
5898
</li>
59-
</ul> <!-- end appendices sub section -->
99+
</ul>
100+
<!-- end appendices sub section -->
60101
</li>
61-
</ul> <!-- end appendicessection -->
62-
</div>
102+
</ul>
103+
<!-- end appendicessection -->
104+
</div>
63105
</main>
64106
</div>
65-
</div> <!-- end columns -->
107+
</div>
108+
<!-- end columns -->
66109
</div>
67110
</template>
68111

69112
<script>
70-
import TableOfContentsSidebar from '@/components/TableOfContentsSidebar.vue';
71-
import cnaRulesData from '@/assets/data/cnaRules.json';
113+
import TableOfContentsSidebar from "@/components/TableOfContentsSidebar.vue";
114+
import cnaRulesData from "@/assets/data/cnaRules.json";
72115
73116
export default {
74-
name: 'CNARules',
117+
name: "CNARules",
75118
components: {
76119
TableOfContentsSidebar,
77120
},
@@ -89,21 +132,28 @@ export default {
89132
</script>
90133

91134
<style lang="scss">
92-
@import '@/assets/style/globals.scss';
135+
@import "@/assets/style/globals.scss";
93136
</style>
94137

95138
<!-- Add "scoped" attribute to limit CSS to this component only -->
96139
<style scoped lang="scss">
140+
ol {
141+
counter-reset: item;
142+
}
143+
ol li {
144+
display: block;
145+
}
97146
98-
ol { counter-reset: item; }
99-
ol li {display: block;}
100-
ol li p, ul li p {
147+
ol li p,
148+
ul li p {
101149
margin-bottom: 16px;
102150
}
103-
ol li h2::before, ol li h3::before {
151+
ol li h2 a::before,
152+
ol li h3 a::before {
104153
content: counters(item, ".");
105154
counter-increment: item;
106155
margin-right: 0.5rem;
156+
color: #005ea2;
107157
}
108158
109159
:deep(.cve-acronym),

0 commit comments

Comments
 (0)