Browse by Tag UI improvements, accessibility, cncf#1006

Signed-off-by: James Hunt <10615884+thetwopct@users.noreply.github.com>
seokho-son · Mar 20, 2023 · f25b454 · f25b454
1 parent 3094c02
commit f25b454
Show file tree

Hide file tree

Showing 5 changed files with 148 additions and 92 deletions.
diff --git a/assets/scss/_tag-search.scss b/assets/scss/_tag-search.scss
@@ -1,76 +1,93 @@
-
-.permalink {
-background-image: url(../images/link.png);
-background-repeat: no-repeat;
-display: inline-block;
-vertical-align: middle;
-font-size: 0;
-color: transparent;
-width: 17px;
-height: 17px;
-margin-left: 10px;
+// Hide the sidebar on Taxonomy Search/Browse page.
+.td-taxonomy .td-sidebar-toc {
+    display: none !important;
 }
 
-.term-anchor {
-display: block;
-position: relative;
-top: -90px;
-visibility: hidden;
+// Adding padding to bottom of Taxonomy Browse page.
+.td-taxonomy .td-main main {
+    padding-bottom: 6rem;
 }
 
-.tag-option {
-padding: 1px 8px 2px;
-margin: 10px 15px 10px 0;
-float:left;
+// Tags container.
+.canonical-tag-container {
+    margin-top: 1.5625rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    align-items: center;
 }
 
+// Tag item. Default gray.
 .canonical-tag {
-color: black;
-background-color: #E2E2E2;
-border-radius: 5px;
-width: 105px;
-text-align: center;
-}
-
-.tag-option a {
-color: inherit;
-text-decoration: none;
-font-weight: 600;
-letter-spacing: 0.02em;
-padding: 0 10px;
-font-size: 10px;
-}
-
-#select-all-tags, #deselect-all-tags {
-    margin: 0;
-    padding-right: 0;
-}
-
-.active-tag {
-    font-weight: 500;
-    background-color: $link-color;
-    color: white;
-}
-
-.invisible {
-visibility: hidden;
-}
-
-#tag-container {
-margin: 35px 0 0;
+    // button reset
+    border: none;
+    background: none;
+    box-sizing: border-box;
+    // button sizing.
+    min-width: 96px;
+    // style to match _taxonomy/.tax-term
+    display: block;
+    background-color: #e2e2e2;
+    color: black;
+    border-radius: 10px;
+    padding-top: 7px;
+    padding-bottom: 7px;
+    padding-left: 15px;
+    padding-right: 15px;
+    font-weight: 700;
+    font-size: 10px;
+    line-height: 120%;
+    text-align: center;
+    letter-spacing: 0.02em;
+    // Turn pink when selected is-active.
+    &.is-active {
+        background-color: $link-color;
+        color: white;
+        &:hover {
+            background-color: $link-color;
+            color: white;
+        }
+    }
+    // Hover default state.
+    &:hover {
+        background-color: #d2d2d2;
+    }
 }
 
-.tag-description {
-text-align: center;
-margin: 5px 0px;
+// Reset buttons to look like text.
+.button-reset-to-text {
+    border: none;
+    background: none;
+    box-sizing: border-box;
+    padding: 0;
+    cursor: pointer;
+    display: block;
+    margin-left: initial;
+    margin-right: initial;
+    width: unset;
+    // styling.
+    font-size: 10px;
+    line-height: 120%;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    color: black;
+    &:active {
+        color: inherit;
+    }
+    &:hover {
+        color: $link-color;
+    }
 }
 
+// Results
 #terms-by-tag {
-    clear: both;
-    padding-top: 1rem;
-
+    margin-top: 1rem;
+    > div {
+        margin-top: 2.5rem;
+    }
     h3 {
-        margin: 2.5rem 0 1rem;
+        margin-top: 2.5rem;
+        margin-bottom: 1rem;
         a {
             color: black;
             &:hover {
@@ -80,6 +97,35 @@ margin: 5px 0px;
     }
 }
 
+// Tag results.
+.invisible {
+    visibility: hidden;
+}
+
 .hide {
     display: none;
-}
+}
+
+// Unused?
+.tag-description {
+    text-align: center;
+    margin: 5px 0px;
+}
+
+// Unused?
+.permalink {
+    background-image: url(../images/link.png); // does not exist?
+    background-repeat: no-repeat;
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 0;
+    color: transparent;
+    width: 17px;
+    height: 17px;
+    margin-left: 10px;
+}
+
+
+
+
+
diff --git a/assets/scss/_taxonomy.scss b/assets/scss/_taxonomy.scss
@@ -1,35 +1,39 @@
-// Container for Taxonomy items.
 .article-meta {
 	margin-bottom: 3rem;
 }
 
+.taxonomy-terms {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 13px;
+}
+
 .tax-term {
+	display: block;
 	background-color: $link-color;
-	border-radius: 50px;
-	font-weight: 500;
+	border-radius: 10px;
+	padding-top: 7px;
+	padding-bottom: 7px;
+	padding-left: 15px;
+	padding-right: 15px;
+	font-weight: 700;
 	font-size: 10px;
-	line-height: 140%;
+	line-height: 120%;
 	text-align: center;
 	letter-spacing: 0.02em;
 	color: $white;
-	padding: 5px 12px;
-	margin-right: 8px;
 	&:hover {
 		color: $white;
 		text-decoration: none;
 		background-color: $primary-300;
 	}
 }
 
-.taxonomy-terms {
-	list-style: none;
-	margin: 0;
-	overflow: hidden;
-	padding: 0;
-	display: flex;
-	flex-wrap: wrap;
-}
-
+// Used in Tax Terms Cloud
 .tax-terms {
 	list-style: none;
 	margin: 60px 0;
@@ -39,6 +43,7 @@
 	}
 }
 
+// Used in Tax Terms Cloud
 .taxonomy-count {
 	padding-left: 0;
 	margin-left: 0;

diff --git a/i18n/en.toml b/i18n/en.toml
@@ -26,9 +26,11 @@ other = "Tag"
 [ui_tags]
 other = "Tags"
 [ui_search_by_tags]
-other = "Search by Tags"
+other = "Browse by Tags"
+[ui_tags_intro]
+other = "We've categorized the glossary terms by tags. Use the filters to browse terms by tag."
 [ui_or_search_by_tags]
-other = "...or search by tags"
+other = "...or browse by tag"
 [ui_select_all]
 other = "Select All"
 [ui_deselect_all]

diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html
@@ -1,20 +1,20 @@
 {{ define "main" }}
-<div>
+<div class="td-content">
     <h1>{{ title ( T "ui_search_by_tags" ) }}</h1>
 
+    <p>{{ ( T "ui_tags_intro" ) }}</p>
+
     <script src="{{ "js/tag-search.js" | relURL }}"></script>
 
     {{ $tags := index .Site.Taxonomies "tags" }}
 
-    <div id="tag-container">
+    <div class="canonical-tag-container">
         {{ range $tags }}
             {{ $tagid := printf "tag-%s" .Page.Title }}
-            <span id="{{ $tagid  }}" class="tag-option canonical-tag" data-target="{{ $tagid  }}">
-                <a class="taxonomy-label" href="javascript:void(0)">{{ title .Page.Title }}</a>
-            </span>
+            <button id="{{ $tagid  }}" class="canonical-tag" data-target="{{ $tagid  }}">{{ title .Page.Title }}</button>
         {{ end }}
-        <span class="tag-option"><a id="select-all-tags" href="javascript:void(0)">{{ T "ui_select_all" }}</a></span>
-        <span class="tag-option"><a id="deselect-all-tags" href="javascript:void(0)">{{ T "ui_deselect_all" }}</a></span>
+        <span class=""><button class="button-reset-to-text" id="select-all-tags">{{ T "ui_select_all" }}</button></span>
+        <span class=""><button class="button-reset-to-text" id="deselect-all-tags">{{ T "ui_deselect_all" }}</button></span>
     </div>
 
     {{ $glossary_items := (where .Site.Pages "Params.status" "Completed") | union (where .Site.Pages "Params.status" "completed") }}
@@ -33,7 +33,9 @@ <h1>{{ title ( T "ui_search_by_tags" ) }}</h1>
                 <div class="{{ $.Scratch.Get "tag_classes" }} hide" data-show-count="0">
                     <h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
                     <div>
+                        <p>
                         {{ replace ( .Summary | markdownify ) "What it is" "" }}..
+                        </p>
                     </div>
                 </div>
             {{ end }}

diff --git a/static/js/tag-search.js b/static/js/tag-search.js
@@ -4,7 +4,7 @@ $( document ).ready(function() {
     var selectAllKey = "all";
     var deselectAllKey = "none";
 
-    var defaultActiveTag = "fundamental";
+    var defaultActiveTag = "";
     var activeTags = {};
 
     var paramSize = function(paramHash) {
@@ -51,7 +51,7 @@ $( document ).ready(function() {
         var targetClass = "." + targetTag;
         var tagName = targetTag.split('tag-')[1];
 
-        elt.removeClass("active-tag");
+        elt.removeClass("is-active");
         $(targetClass).each(function(){
           var showCount = $(this).data("show-count");
           var newShowCount = showCount - 1;
@@ -68,7 +68,7 @@ $( document ).ready(function() {
         var targetClass = "." + targetTag;
         var tagName = targetTag.split('tag-')[1];
 
-        elt.addClass("active-tag");
+        elt.addClass("is-active");
         $(targetClass).each(function(){
           var showCount = $(this).data("show-count");
           var newShowCount = showCount + 1;
@@ -96,7 +96,7 @@ $( document ).ready(function() {
         });
 
         $(this).click(function(){
-          var shouldHide = $(this).hasClass("active-tag");
+          var shouldHide = $(this).hasClass("is-active");
           if (shouldHide) {
             deactivateTagTerms($(this));
           } else {
@@ -109,7 +109,7 @@ $( document ).ready(function() {
       // Adds functionality to "select all tags" link
       $("#select-all-tags").click(function(){
         $(".canonical-tag").each(function(){
-          var shouldActivate = !$(this).hasClass("active-tag");
+          var shouldActivate = !$(this).hasClass("is-active");
           if (shouldActivate) {
             activateTagTerms($(this));
           }
@@ -122,7 +122,7 @@ $( document ).ready(function() {
       // Adds functionality to "deselect all tags" link
       $("#deselect-all-tags").click(function(){
         $(".canonical-tag").each(function(){
-          var shouldHide = $(this).hasClass("active-tag");
+          var shouldHide = $(this).hasClass("is-active");
           if (shouldHide) {
             deactivateTagTerms($(this));
           }
@@ -140,8 +140,9 @@ $( document ).ready(function() {
       } else if (activeTags[deselectAllKey]) {
         $("#deselect-all-tags").click();
       } else {
+        console.log({activeTags})
         for (var tagId in activeTags) {
-          $("#tag-" + tagId).find("a")[0].click();
+          $("#tag-" + tagId).click();
         }
       }
     }