Add breadcrumbs to taxonomy result list (#1011)

* gh-1004 Add breadcrumbs and cards to taxonomy result list * gh-1004 Change breadcrumb partial so leaf item is not a link * gh-1004 Format scss Co-authored-by: LisaFC <lcarey@google.com>
google · Jun 13, 2022 · 0dc154d · 0dc154d
1 parent 436ae87
commit 0dc154d
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 22 deletions.
diff --git a/assets/scss/_taxonomy.scss b/assets/scss/_taxonomy.scss
@@ -6,7 +6,7 @@
   font-size: 0.8rem;
 
   .taxonomy-title {
-    display: inline; 
+    display: inline;
     font-size: 1.25em;
     height: 1em;
     line-height: 1em;
@@ -21,7 +21,7 @@
   font-size: 0.8rem;
 
   .taxonomy-title {
-    display: inline-block; 
+    display: inline-block;
     width: 100%;
     font-size: 1rem;
     font-weight: 700;
@@ -79,7 +79,7 @@
 .taxonomy-terms {
   list-style: none;
   margin: 0;
-  overflow: hidden; 
+  overflow: hidden;
   padding: 0;
   display: inline;
 
@@ -127,7 +127,7 @@
   -webkit-transition: color 0.2s;
   -webkit-clip-path: polygon(100% 0,100% 100%,0.8em 100%,0 50%,0.8em 0);
   clip-path: polygon(100% 0,100% 100%,0.8em 100%,0 50%,0.8em 0);
-  
+
   &:hover {
     background-color: $primary;
     color: $white;
@@ -136,9 +136,9 @@
       color: $dark!important;
     }
   }
-  
+
   &:hover::before {
-    background: $primary; 
+    background: $primary;
   }
 }
 
@@ -160,7 +160,7 @@
     text-decoration: none;
     -webkit-clip-path: none;
     clip-path: none;
-    
+
     &:hover {
       background: none;
       color: $link-color;
@@ -169,7 +169,7 @@
         color: $dark!important;
       }
     }
-    
+
     &:hover::before {
       background: none;
     }
@@ -207,8 +207,8 @@
     font-variant: normal;
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
-    font-family: "Font Awesome 5 Free"; 
-    // font-weight: 900; 
+    font-family: "Font Awesome 5 Free";
+    // font-weight: 900;
     padding-right: 0.5em;
     font-size: 2em;
     min-width: 1.5em;
@@ -249,7 +249,7 @@
     text-decoration: none;
     -webkit-clip-path: none;
     clip-path: none;
-    
+
     &:hover {
       background: none;
       color: $link-color;
@@ -258,7 +258,7 @@
         color: $dark!important;
       }
     }
-    
+
     &:hover::before {
       background: none;
       text-shadow: 0 0 3px $gray-900;
@@ -276,7 +276,7 @@
     .taxonomy-title {
       display: none;
     }
-  } 
+  }
 }
 
 .taxonomy-taxonomy-page {
@@ -298,7 +298,7 @@
   font-variant: normal;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
-  font-family: "Font Awesome 5 Free"; 
+  font-family: "Font Awesome 5 Free";
   content: "\f02d";
   padding-right: 0.5em;
 }
@@ -309,7 +309,7 @@
   font-variant: normal;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
-  font-family: "Font Awesome 5 Free"; 
+  font-family: "Font Awesome 5 Free";
   content: "\f781";
   padding-right: 0.5em;
 }
@@ -325,8 +325,24 @@
     font-variant: normal;
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
-    font-family: "Font Awesome 5 Free"; 
+    font-family: "Font Awesome 5 Free";
     content: "\f122";
     padding-right: 0.5em;
   }
-}
+}
+
+.article-teaser {
+  &.card {
+      padding: 1.0em;
+      margin-bottom: 1.5em;
+  }
+
+  .breadcrumb {
+      margin-bottom: 0em;
+      font-size: 0.85rem;
+  }
+
+  .article-meta {
+      margin-bottom: 0em;
+  }
+}
diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html
@@ -8,8 +8,11 @@ <h1>{{ with .Data.Singular }}{{ . | humanize }}: {{ end }}<span>{{ .Title }}</sp
     <div>
       {{ range .Pages }}
         {{ $manualLink := cond (isset .Params "manuallink") .Params.manualLink ( cond (isset .Params "manuallinkrelref") (relref . .Params.manualLinkRelref) .RelPermalink) }}
-        <article class="article-teaser article-type-{{ with .Type }}{{ ( urlize . ) }}{{ end }}">
+        <article class="card article-teaser article-type-{{ with .Type }}{{ ( urlize . ) }}{{ end }}">
           <h3><a href="{{ $manualLink }}"{{ with .Params.manualLinkTitle }} title="{{ . }}"{{ end }}{{ with .Params.manualLinkTarget }} target="{{ . }}"{{ if eq . "_blank" }} rel="noopener"{{ end }}{{ end }}>{{- .Title -}}</a></h3>
+          {{ if not .Site.Params.ui.taxonomy_breadcrumb_disable }}
+            {{- partial "breadcrumb.html" . -}}
+          {{ end }}
           <p>{{ .Description | markdownify }}</p>
           <header class="article-meta">
             {{ partial "taxonomy_terms_article_wrapper.html" . }}
@@ -23,4 +26,4 @@ <h3><a href="{{ $manualLink }}"{{ with .Params.manualLinkTitle }} title="{{ . }}
     <a href="{{ with .Site.GetPage (printf "/%s" ( lower .Data.Plural )) }}{{ .Permalink }}{{ end }}" class="all-taxonomy-terms">{{ humanize ( T "ui_all" ) }} {{ with .Data.Plural }}{{ . | humanize }}{{ end }}</a>
   </main>
 </div>
-{{ end }}
+{{ end }}
diff --git a/layouts/partials/breadcrumb.html b/layouts/partials/breadcrumb.html
@@ -18,8 +18,11 @@
     {{ template "breadcrumbnav" (dict "p1" .p1.Site.Home "p2" .p2 )  -}}
   {{ end -}}
   {{ $isActive :=  eq .p1 .p2 }}
-  <li class="breadcrumb-item{{ if $isActive }} active{{ end }}"
-      {{- if $isActive }} aria-current="page"{{ end }}>
-    <a href="{{ .p1.Permalink }}">{{ .p1.LinkTitle }}</a>
+  <li class="breadcrumb-item{{ if $isActive }} active{{ end }}">
+    {{- if $isActive }}
+      <span>{{ .p1.LinkTitle }}</span>
+    {{ else -}}
+      <a href="{{ .p1.Permalink }}">{{ .p1.LinkTitle }}</a>
+    {{ end -}}
   </li>
 {{- end -}}