Skip to content

Commit afbfe1e

Browse files
thetwopctai-naymul
thetwopct
authored and
ai-naymul
committed
Browse by Tag UI improvements, accessibility, cncf#1006
Signed-off-by: James Hunt <10615884+thetwopct@users.noreply.github.com>
1 parent 9718e1c commit afbfe1e

File tree

5 files changed

+145
-89
lines changed

5 files changed

+145
-89
lines changed

‎assets/scss/_tag-search.scss

Lines changed: 107 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,93 @@
1-
2-
.permalink {
3-
background-image: url(../images/link.png);
4-
background-repeat: no-repeat;
5-
display: inline-block;
6-
vertical-align: middle;
7-
font-size: 0;
8-
color: transparent;
9-
width: 17px;
10-
height: 17px;
11-
margin-left: 10px;
1+
// Hide the sidebar on Taxonomy Search/Browse page.
2+
.td-taxonomy .td-sidebar-toc {
3+
display: none !important;
124
}
135

14-
.term-anchor {
15-
display: block;
16-
position: relative;
17-
top: -90px;
18-
visibility: hidden;
6+
// Adding padding to bottom of Taxonomy Browse page.
7+
.td-taxonomy .td-main main {
8+
padding-bottom: 6rem;
199
}
2010

21-
.tag-option {
22-
padding: 1px 8px 2px;
23-
margin: 10px 15px 10px 0;
24-
float:left;
11+
// Tags container.
12+
.canonical-tag-container {
13+
margin-top: 1.5625rem;
14+
display: flex;
15+
flex-wrap: wrap;
16+
gap: 20px;
17+
align-items: center;
2518
}
2619

20+
// Tag item. Default gray.
2721
.canonical-tag {
28-
color: black;
29-
background-color: #E2E2E2;
30-
border-radius: 5px;
31-
width: 105px;
32-
text-align: center;
33-
}
34-
35-
.tag-option a {
36-
color: inherit;
37-
text-decoration: none;
38-
font-weight: 600;
39-
letter-spacing: 0.02em;
40-
padding: 0 10px;
41-
font-size: 10px;
42-
}
43-
44-
#select-all-tags, #deselect-all-tags {
45-
margin: 0;
46-
padding-right: 0;
47-
}
48-
49-
.active-tag {
50-
font-weight: 500;
51-
background-color: $link-color;
52-
color: white;
53-
}
54-
55-
.invisible {
56-
visibility: hidden;
57-
}
58-
59-
#tag-container {
60-
margin: 35px 0 0;
22+
// button reset
23+
border: none;
24+
background: none;
25+
box-sizing: border-box;
26+
// button sizing.
27+
min-width: 96px;
28+
// style to match _taxonomy/.tax-term
29+
display: block;
30+
background-color: #e2e2e2;
31+
color: black;
32+
border-radius: 10px;
33+
padding-top: 7px;
34+
padding-bottom: 7px;
35+
padding-left: 15px;
36+
padding-right: 15px;
37+
font-weight: 700;
38+
font-size: 10px;
39+
line-height: 120%;
40+
text-align: center;
41+
letter-spacing: 0.02em;
42+
// Turn pink when selected is-active.
43+
&.is-active {
44+
background-color: $link-color;
45+
color: white;
46+
&:hover {
47+
background-color: $link-color;
48+
color: white;
49+
}
50+
}
51+
// Hover default state.
52+
&:hover {
53+
background-color: #d2d2d2;
54+
}
6155
}
6256

63-
.tag-description {
64-
text-align: center;
65-
margin: 5px 0px;
57+
// Reset buttons to look like text.
58+
.button-reset-to-text {
59+
border: none;
60+
background: none;
61+
box-sizing: border-box;
62+
padding: 0;
63+
cursor: pointer;
64+
display: block;
65+
margin-left: initial;
66+
margin-right: initial;
67+
width: unset;
68+
// styling.
69+
font-size: 10px;
70+
line-height: 120%;
71+
font-weight: 700;
72+
letter-spacing: 0.02em;
73+
color: black;
74+
&:active {
75+
color: inherit;
76+
}
77+
&:hover {
78+
color: $link-color;
79+
}
6680
}
6781

82+
// Results
6883
#terms-by-tag {
69-
clear: both;
70-
padding-top: 1rem;
71-
84+
margin-top: 1rem;
85+
> div {
86+
margin-top: 2.5rem;
87+
}
7288
h3 {
73-
margin: 2.5rem 0 1rem;
89+
margin-top: 2.5rem;
90+
margin-bottom: 1rem;
7491
a {
7592
color: black;
7693
&:hover {
@@ -80,6 +97,35 @@ margin: 5px 0px;
8097
}
8198
}
8299

100+
// Tag results.
101+
.invisible {
102+
visibility: hidden;
103+
}
104+
83105
.hide {
84106
display: none;
85-
}
107+
}
108+
109+
// Unused?
110+
.tag-description {
111+
text-align: center;
112+
margin: 5px 0px;
113+
}
114+
115+
// Unused?
116+
.permalink {
117+
background-image: url(../images/link.png); // does not exist?
118+
background-repeat: no-repeat;
119+
display: inline-block;
120+
vertical-align: middle;
121+
font-size: 0;
122+
color: transparent;
123+
width: 17px;
124+
height: 17px;
125+
margin-left: 10px;
126+
}
127+
128+
129+
130+
131+

‎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;
717
background-color: $link-color;
8-
border-radius: 50px;
9-
font-weight: 500;
18+
border-radius: 10px;
19+
padding-top: 7px;
20+
padding-bottom: 7px;
21+
padding-left: 15px;
22+
padding-right: 15px;
23+
font-weight: 700;
1024
font-size: 10px;
11-
line-height: 140%;
25+
line-height: 120%;
1226
text-align: center;
1327
letter-spacing: 0.02em;
1428
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/en.toml

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,11 @@ other = "Tag"
2626
[ui_tags]
2727
other = "Tags"
2828
[ui_search_by_tags]
29-
other = "Search by Tags"
29+
other = "Browse by Tags"
30+
[ui_tags_intro]
31+
other = "We've categorized the glossary terms by tags. Use the filters to browse terms by tag."
3032
[ui_or_search_by_tags]
31-
other = "...or search by tags"
33+
other = "...or browse by tag"
3234
[ui_select_all]
3335
other = "Select All"
3436
[ui_deselect_all]

‎layouts/_default/terms.html

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
{{ define "main" }}
2-
<div>
2+
<div class="td-content">
33
<h1>{{ title ( T "ui_search_by_tags" ) }}</h1>
44

55
<link href="{{ "css/glossary.css" | relURL }}" rel="stylesheet">
66
<script src="{{ "js/glossary.js" | relURL }}"></script>
77

88
{{ $tags := index .Site.Taxonomies "tags" }}
99

10-
<div id="tag-container">
10+
<div class="canonical-tag-container">
1111
{{ range $tags }}
1212
{{ $tagid := printf "tag-%s" .Page.Title }}
1313
<span id="{{ $tagid }}" class="tag-option canonical-tag" data-target="{{ $tagid }}">
1414
<a class="tax-term taxonomy-label" href="javascript:void(0)">{{ title .Page.Title }}</a>
1515
</span>
1616
{{ end }}
17-
<span class="tag-option"><a id="select-all-tags" href="javascript:void(0)">{{ T "ui_select_all" }}</a></span>
18-
<span class="tag-option"><a id="deselect-all-tags" href="javascript:void(0)">{{ T "ui_deselect_all" }}</a></span>
17+
<span class=""><button class="button-reset-to-text" id="select-all-tags">{{ T "ui_select_all" }}</button></span>
18+
<span class=""><button class="button-reset-to-text" id="deselect-all-tags">{{ T "ui_deselect_all" }}</button></span>
1919
</div>
2020

2121
{{ $glossary_items := (where .Site.Pages "Params.status" "Completed") | union (where .Site.Pages "Params.status" "completed") }}
@@ -34,7 +34,9 @@ <h1>{{ title ( T "ui_search_by_tags" ) }}</h1>
3434
<div class="{{ $.Scratch.Get "tag_classes" }} hide" data-show-count="0">
3535
<h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
3636
<div>
37+
<p>
3738
{{ replace ( .Summary | markdownify ) "What it is" "" }}..
39+
</p>
3840
</div>
3941
</div>
4042
{{ end }}

‎static/js/tag-search.js

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ $( document ).ready(function() {
44
var selectAllKey = "all";
55
var deselectAllKey = "none";
66

7-
var defaultActiveTag = "fundamental";
7+
var defaultActiveTag = "";
88
var activeTags = {};
99

1010
var paramSize = function(paramHash) {
@@ -51,7 +51,7 @@ $( document ).ready(function() {
5151
var targetClass = "." + targetTag;
5252
var tagName = targetTag.split('tag-')[1];
5353

54-
elt.removeClass("active-tag");
54+
elt.removeClass("is-active");
5555
$(targetClass).each(function(){
5656
var showCount = $(this).data("show-count");
5757
var newShowCount = showCount - 1;
@@ -68,7 +68,7 @@ $( document ).ready(function() {
6868
var targetClass = "." + targetTag;
6969
var tagName = targetTag.split('tag-')[1];
7070

71-
elt.addClass("active-tag");
71+
elt.addClass("is-active");
7272
$(targetClass).each(function(){
7373
var showCount = $(this).data("show-count");
7474
var newShowCount = showCount + 1;
@@ -96,7 +96,7 @@ $( document ).ready(function() {
9696
});
9797

9898
$(this).click(function(){
99-
var shouldHide = $(this).hasClass("active-tag");
99+
var shouldHide = $(this).hasClass("is-active");
100100
if (shouldHide) {
101101
deactivateTagTerms($(this));
102102
} else {
@@ -109,7 +109,7 @@ $( document ).ready(function() {
109109
// Adds functionality to "select all tags" link
110110
$("#select-all-tags").click(function(){
111111
$(".canonical-tag").each(function(){
112-
var shouldActivate = !$(this).hasClass("active-tag");
112+
var shouldActivate = !$(this).hasClass("is-active");
113113
if (shouldActivate) {
114114
activateTagTerms($(this));
115115
}
@@ -122,7 +122,7 @@ $( document ).ready(function() {
122122
// Adds functionality to "deselect all tags" link
123123
$("#deselect-all-tags").click(function(){
124124
$(".canonical-tag").each(function(){
125-
var shouldHide = $(this).hasClass("active-tag");
125+
var shouldHide = $(this).hasClass("is-active");
126126
if (shouldHide) {
127127
deactivateTagTerms($(this));
128128
}
@@ -140,8 +140,9 @@ $( document ).ready(function() {
140140
} else if (activeTags[deselectAllKey]) {
141141
$("#deselect-all-tags").click();
142142
} else {
143+
console.log({activeTags})
143144
for (var tagId in activeTags) {
144-
$("#tag-" + tagId).find("a")[0].click();
145+
$("#tag-" + tagId).click();
145146
}
146147
}
147148
}

0 commit comments

Comments
 (0)