Skip to content

Commit dc9c421

Browse files
seokho-sonseokho-son
authored
Merge pull request #1715 from cncf/tag-search
Search by Tags
2 parents bafc442 + b028484 commit dc9c421

File tree

17 files changed

+461
-24
lines changed

17 files changed

+461
-24
lines changed

‎assets/scss/_search.scss

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
padding-top: 0.5rem !important;
99
padding-left: 1.5rem;
1010
padding-right: 1rem;
11-
padding-bottom: 1rem;
11+
padding-bottom: 5px;
1212
}
1313
@media (min-width: 1300px) {
1414
padding-left: 2.5rem;
@@ -74,5 +74,29 @@
7474
border-bottom: $black 2px solid;
7575
}
7676
}
77+
}
78+
}
79+
80+
.search-by-tag {
81+
position: relative;
82+
width: 100%;
83+
font-size: 12px;
84+
text-align: right;
85+
@media (max-width: 767px) {
86+
display: none;
87+
}
88+
@media (min-width: 768px) {
89+
width: calc(100% - 20px);
7790
}
91+
padding-left: calc(20px + 20px);
92+
@media (min-width: 768px) {
93+
padding-left: 30px;
94+
}
95+
@media (min-width: 992px) {
96+
padding-left: 35px;
97+
}
98+
@media (min-width: 1100px) {
99+
padding-left: calc(20px + 20px);
100+
}
101+
78102
}

‎assets/scss/_styles_project.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
@import 'footer';
1616
@import 'header';
1717
@import 'cookie-banner';
18+
@import 'tag-search';
1819
@import 'main';
1920
@import 'search';
2021
@import 'sidebar-left';

‎assets/scss/_tag-search.scss

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
// Hide the sidebar on Taxonomy Search/Browse page.
2+
.td-taxonomy .td-sidebar-toc {
3+
display: none !important;
4+
}
5+
6+
// Adding padding to bottom of Taxonomy Browse page.
7+
.td-taxonomy .td-main main {
8+
padding-bottom: 6rem;
9+
}
10+
11+
// Tags container.
12+
.canonical-tag-container {
13+
margin-top: 1.5625rem;
14+
display: grid;
15+
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
16+
gap: 20px;
17+
@media (min-width: 768px) {
18+
display: flex;
19+
flex-wrap: wrap;
20+
align-items: center;
21+
margin-bottom: 3rem;
22+
}
23+
@media (max-width: 767px) {
24+
> span {
25+
display: flex;
26+
align-items: center;
27+
align-content: center;
28+
justify-content: center;
29+
}
30+
}
31+
}
32+
33+
// Tag item. Default gray.
34+
.canonical-tag {
35+
// button reset
36+
border: none;
37+
background: none;
38+
box-sizing: border-box;
39+
// button sizing.
40+
min-width: 96px;
41+
// style to match _taxonomy/.tax-term
42+
display: block;
43+
background: #efefef;
44+
color: black;
45+
border-radius: 50px;
46+
padding-top: 7px;
47+
padding-bottom: 7px;
48+
padding-left: 18px;
49+
padding-right: 18px;
50+
font-weight: 600;
51+
font-size: 10px;
52+
line-height: 120%;
53+
text-align: center;
54+
letter-spacing: 0.02em;
55+
// Turn pink when selected is-active.
56+
&.is-active {
57+
background-color: $link-color;
58+
color: white;
59+
@media (hover: hover) {
60+
&:hover {
61+
background-color: $link-color;
62+
color: white;
63+
}
64+
}
65+
}
66+
@media (hover: hover) {
67+
// Hover default state.
68+
&:hover {
69+
background-color: #d2d2d2;
70+
}
71+
}
72+
}
73+
74+
// Reset buttons to look like text.
75+
.button-reset-to-text {
76+
border: none;
77+
background: none;
78+
box-sizing: border-box;
79+
padding: 0;
80+
cursor: pointer;
81+
display: block;
82+
margin-left: initial;
83+
margin-right: initial;
84+
width: unset;
85+
// styling.
86+
font-size: 10px;
87+
line-height: 120%;
88+
font-weight: 600;
89+
letter-spacing: 0.02em;
90+
color: black;
91+
&:active {
92+
color: inherit;
93+
}
94+
&:hover {
95+
color: $link-color;
96+
}
97+
}
98+
99+
// Results
100+
#terms-by-tag {
101+
margin-top: 1rem;
102+
> div {
103+
margin-top: 2.5rem;
104+
}
105+
h3 {
106+
margin-top: 2.5rem;
107+
margin-bottom: 1rem;
108+
a {
109+
color: black;
110+
&:hover {
111+
color: $link-color;
112+
}
113+
}
114+
}
115+
}
116+
117+
// Tag results.
118+
.invisible {
119+
visibility: hidden;
120+
}
121+
122+
.hide {
123+
display: none;
124+
}

‎assets/scss/_taxonomy.scss

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,39 @@
1-
// Container for Taxonomy items.
21
.article-meta {
32
margin-bottom: 3rem;
43
}
54

5+
.taxonomy-terms {
6+
list-style: none;
7+
margin: 0;
8+
padding: 0;
9+
overflow: hidden;
10+
display: flex;
11+
flex-wrap: wrap;
12+
gap: 13px;
13+
}
14+
615
.tax-term {
16+
display: block;
17+
color: $white;
718
background-color: $link-color;
819
border-radius: 50px;
9-
font-weight: 500;
20+
padding-top: 7px;
21+
padding-bottom: 7px;
22+
padding-left: 15px;
23+
padding-right: 15px;
24+
font-weight: 600;
1025
font-size: 10px;
11-
line-height: 140%;
26+
line-height: 120%;
1227
text-align: center;
1328
letter-spacing: 0.02em;
14-
color: $white;
15-
padding: 5px 12px;
16-
margin-right: 8px;
1729
&:hover {
1830
color: $white;
1931
text-decoration: none;
2032
background-color: $primary-300;
2133
}
2234
}
2335

24-
.taxonomy-terms {
25-
list-style: none;
26-
margin: 0;
27-
overflow: hidden;
28-
padding: 0;
29-
display: flex;
30-
flex-wrap: wrap;
31-
}
32-
36+
// Used in Tax Terms Cloud
3337
.tax-terms {
3438
list-style: none;
3539
margin: 60px 0;
@@ -39,6 +43,7 @@
3943
}
4044
}
4145

46+
// Used in Tax Terms Cloud
4247
.taxonomy-count {
4348
padding-left: 0;
4449
margin-left: 0;

‎i18n/bn.toml

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,16 @@ other = "See all tags"
2525
other = "Tag"
2626
[ui_tags]
2727
other = "Tags"
28-
28+
[ui_search_by_tags]
29+
other = "Browse by Tags"
30+
[ui_tags_intro]
31+
other = "We've categorized the glossary terms. Use the filters to browse terms by tag."
32+
[ui_or_search_by_tags]
33+
other = "...or browse by tag"
34+
[ui_select_all]
35+
other = "Select All"
36+
[ui_deselect_all]
37+
other = "Deselect All"
2938

3039
# Footer text
3140
[footer_all_rights_reserved]

‎i18n/de.toml

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,16 @@ other = "See all tags"
2525
other = "Tag"
2626
[ui_tags]
2727
other = "Tags"
28-
28+
[ui_search_by_tags]
29+
other = "Browse by Tags"
30+
[ui_tags_intro]
31+
other = "We've categorized the glossary terms. Use the filters to browse terms by tag."
32+
[ui_or_search_by_tags]
33+
other = "...or browse by tag"
34+
[ui_select_all]
35+
other = "Select All"
36+
[ui_deselect_all]
37+
other = "Deselect All"
2938

3039
# Footer text
3140
[footer_all_rights_reserved]

‎i18n/en.toml

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,16 @@ other = "See all tags"
2525
other = "Tag"
2626
[ui_tags]
2727
other = "Tags"
28+
[ui_search_by_tags]
29+
other = "Browse by Tags"
30+
[ui_tags_intro]
31+
other = "We've categorized the glossary terms. Use the filters to browse terms by tag."
32+
[ui_or_search_by_tags]
33+
other = "...or browse by tag"
34+
[ui_select_all]
35+
other = "Select All"
36+
[ui_deselect_all]
37+
other = "Deselect All"
2838

2939
# Footer text
3040
[footer_all_rights_reserved]

‎i18n/es.toml

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,16 @@ other = "See all tags"
2525
other = "Tag"
2626
[ui_tags]
2727
other = "Tags"
28-
28+
[ui_search_by_tags]
29+
other = "Browse by Tags"
30+
[ui_tags_intro]
31+
other = "We've categorized the glossary terms. Use the filters to browse terms by tag."
32+
[ui_or_search_by_tags]
33+
other = "...or browse by tag"
34+
[ui_select_all]
35+
other = "Select All"
36+
[ui_deselect_all]
37+
other = "Deselect All"
2938

3039
# Footer text
3140
[footer_all_rights_reserved]

‎i18n/hi.toml

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,16 @@ other = "See all tags"
2525
other = "Tag"
2626
[ui_tags]
2727
other = "Tags"
28+
[ui_search_by_tags]
29+
other = "Browse by Tags"
30+
[ui_tags_intro]
31+
other = "We've categorized the glossary terms. Use the filters to browse terms by tag."
32+
[ui_or_search_by_tags]
33+
other = "...or browse by tag"
34+
[ui_select_all]
35+
other = "Select All"
36+
[ui_deselect_all]
37+
other = "Deselect All"
2838

2939
# Footer text
3040
[footer_all_rights_reserved]

‎i18n/it.toml

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,16 @@ other = "See all tags"
2525
other = "Tag"
2626
[ui_tags]
2727
other = "Tags"
28-
28+
[ui_search_by_tags]
29+
other = "Browse by Tags"
30+
[ui_tags_intro]
31+
other = "We've categorized the glossary terms. Use the filters to browse terms by tag."
32+
[ui_or_search_by_tags]
33+
other = "...or browse by tag"
34+
[ui_select_all]
35+
other = "Select All"
36+
[ui_deselect_all]
37+
other = "Deselect All"
2938

3039
# Footer text
3140
[footer_all_rights_reserved]

0 commit comments

Comments
 (0)