Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add breadcrumbs to taxonomy result list #1011

Merged
merged 7 commits into from
Jun 13, 2022
Merged

Add breadcrumbs to taxonomy result list #1011

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d4c8511
gh-1004 Add breadcrumbs and cards to taxonomy result list
at055612 May 17, 2022
33a6ebc
gh-1004 Change breadcrumb partial so leaf item is not a link
at055612 May 17, 2022
89877c6
gh-1004 Format scss
at055612 May 17, 2022
34d3368
Merge branch 'main' into gh-1004-taxonomy-list-breadcrumbs
at055612 May 17, 2022
afce42f
Merge branch 'main' into gh-1004-taxonomy-list-breadcrumbs
LisaFC May 18, 2022
5eb3245
Merge branch 'main' into gh-1004-taxonomy-list-breadcrumbs
at055612 Jun 13, 2022
ca76f2e
Merge branch 'main' into gh-1004-taxonomy-list-breadcrumbs
LisaFC Jun 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 33 additions & 17 deletions assets/scss/_taxonomy.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
font-size: 0.8rem;

.taxonomy-title {
display: inline;
display: inline;
font-size: 1.25em;
height: 1em;
line-height: 1em;
Expand All @@ -21,7 +21,7 @@
font-size: 0.8rem;

.taxonomy-title {
display: inline-block;
display: inline-block;
width: 100%;
font-size: 1rem;
font-weight: 700;
Expand Down Expand Up @@ -79,7 +79,7 @@
.taxonomy-terms {
list-style: none;
margin: 0;
overflow: hidden;
overflow: hidden;
padding: 0;
display: inline;

Expand Down Expand Up @@ -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;
Expand All @@ -136,9 +136,9 @@
color: $dark!important;
}
}

&:hover::before {
background: $primary;
background: $primary;
}
}

Expand All @@ -160,7 +160,7 @@
text-decoration: none;
-webkit-clip-path: none;
clip-path: none;

&:hover {
background: none;
color: $link-color;
Expand All @@ -169,7 +169,7 @@
color: $dark!important;
}
}

&:hover::before {
background: none;
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -249,7 +249,7 @@
text-decoration: none;
-webkit-clip-path: none;
clip-path: none;

&:hover {
background: none;
color: $link-color;
Expand All @@ -258,7 +258,7 @@
color: $dark!important;
}
}

&:hover::before {
background: none;
text-shadow: 0 0 3px $gray-900;
Expand All @@ -276,7 +276,7 @@
.taxonomy-title {
display: none;
}
}
}
}

.taxonomy-taxonomy-page {
Expand All @@ -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;
}
Expand All @@ -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;
}
Expand All @@ -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;
}
}
7 changes: 5 additions & 2 deletions layouts/_default/taxonomy.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" . }}
Expand All @@ -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 }}
9 changes: 6 additions & 3 deletions layouts/partials/breadcrumb.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@at055612 - why did you remove aria-current?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good question. I can't remember why I took that out. Maybe because I don't think it is applicable when the breadcrumb is shown on the taxonomy list, however I agree it ought to be there for the page breadcrumbs. Will take a look.

Copy link
Collaborator

@chalin chalin Jun 24, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For now I've reverted this change -- see #1068. We would need a bit more logic to remove (all?) the ARIA related labels for the taxonomy-list usage ... or maybe just use a regex to strip all aria labels from breadcrumbs in taxonomy list. I'll let you follow up on that if you think that it's worth it.

<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 -}}