Skip to content

Commit 211b486

Browse files
k8s-ci-robotk8s-ci-robot
authored
Merge pull request #47484 from sftim/20240514_restyle_glossary
Restyle glossary page
2 parents e26ffe4 + 8214a5f commit 211b486

File tree

8 files changed

+158
-86
lines changed

8 files changed

+158
-86
lines changed

‎assets/css/glossary.css

Lines changed: 0 additions & 60 deletions
This file was deleted.

‎assets/js/glossary.js

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -149,16 +149,6 @@ $( document ).ready(function() {
149149
}
150150
});
151151
});
152-
153-
// Shows permalink when term name is hovered over
154-
$(".term-name").each(function() {
155-
var permalink = $($(this).parent().find(".permalink")[0]);
156-
$(this).mouseenter(function(){
157-
permalink.removeClass("hide");
158-
}).mouseleave(function(){
159-
permalink.addClass("hide");
160-
});
161-
});
162152
};
163153

164154
function initActiveTags() {

‎assets/scss/_custom.scss

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -626,6 +626,147 @@ body.td-home #deprecation-warning {
626626
margin-right: auto;
627627
}
628628

629+
body.glossary {
630+
main {
631+
ul.glossary-terms > li {
632+
list-style-type: none;
633+
padding: 0.5em;
634+
padding-bottom: calc(min(0.5em, 0.25em + 0.15vh ));
635+
margin: 0;
636+
margin-top: calc(min(1.0em, 0.25em + 0.15vh ));
637+
}
638+
ul.glossary-terms > li.hide {
639+
display: none;
640+
}
641+
ul.glossary-terms > li:has(.term-anchor:target) {
642+
border-left: 0.3em solid $blue;
643+
background: rgba(#999999, 0.2);
644+
}
645+
#tag-container {
646+
float: left;
647+
max-width: calc(max(80%, 100em));
648+
border-top: 1px solid #999999;
649+
border-bottom: 1px solid #999999;
650+
padding-top: 0.5em 0;
651+
margin: 2em 0;
652+
> p {
653+
display: inline-block;
654+
padding-top: 0.2em;
655+
}
656+
.hide {
657+
display: none;
658+
}
659+
.tag-option {
660+
border-radius: 0.33em;
661+
padding: 0.5em;
662+
padding-left: 0.6em;
663+
padding-right: 0.75em;
664+
margin: 0.75em;
665+
margin-top: 0.1em;
666+
float: left;
667+
font-weight: bold;
668+
font-size: 0.925em;
669+
}
670+
.tag-option:not(.canonical-tag):hover {
671+
outline: 1.5px solid $blue;
672+
}
673+
.tag-description {
674+
margin-left: auto;
675+
margin-right: auto;
676+
padding: 0.2em;
677+
padding-bottom: 0.8em;
678+
text-align: center;
679+
}
680+
.canonical-tag {
681+
color: white;
682+
background-color: #999999;
683+
}
684+
.canonical-tag a {
685+
color: inherit;
686+
background: transparent;
687+
text-decoration: none !important;
688+
}
689+
.active-tag {
690+
color: $white;
691+
background-color: $blue;
692+
}
693+
// darken on hover
694+
.canonical-tag:hover {
695+
background: darken(#999999, 15%)
696+
}
697+
.canonical-tag.active-tag:hover {
698+
background: darken($blue, 15%)
699+
}
700+
}
701+
.term-anchor:target + .term-name > span {
702+
color: $blue;
703+
}
704+
.term-anchor:target {
705+
visibility: initial;
706+
}
707+
.glossary-term-name {
708+
font-weight: bold;
709+
display: inline-block;
710+
padding-left: 0.25em;
711+
padding-right: 0.25em;
712+
}
713+
.glossary-aka {
714+
display: inline-block;
715+
padding-left: 0.25em;
716+
padding-right: 0.25em;
717+
padding-bottom: 0.25em;
718+
}
719+
#glossary-details-before {
720+
margin-top: 3em;
721+
font-style: italic;
722+
clear: both;
723+
}
724+
.preview-text {
725+
display: inline-block;
726+
margin-bottom: 0.2em;
727+
}
728+
.preview-text + * {
729+
margin-top: 0.2em;
730+
}
731+
.term-definition {
732+
margin-left: calc(min(2em, 0.5em + 0.75vw));
733+
.hide {
734+
display: none;
735+
}
736+
}
737+
.glossary-aka {
738+
font-style: italic;
739+
}
740+
.preview-text p {
741+
display: inline;
742+
}
743+
.permalink {
744+
display: inline-block;
745+
background-image: url(../images/link.png);
746+
background-repeat: no-repeat;
747+
background-size: contain;
748+
width: 1em;
749+
height: 1em;
750+
padding-left: 0.1em;
751+
}
752+
.term-name:hover {
753+
color: $blue;
754+
}
755+
.term-name:not(:hover) > .permalink {
756+
visibility: hidden;
757+
}
758+
.term-anchor {
759+
display: block;
760+
position: relative;
761+
top: -4rem; // adjust scrolling to target
762+
visibility: hidden;
763+
}
764+
.invisible {
765+
visibility: hidden;
766+
}
767+
}
768+
}
769+
629770
#caseStudies body > #deprecation-warning, body.cid-casestudies > #deprecation-warning, body.cid-community > #deprecation-warning {
630771
display: inline-block;
631772
vertical-align: top;

‎layouts/_default/baseof.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<head{{- if hugo.IsProduction}} class="live-site"{{- end -}}>
77
{{ partial "head.html" . }}
88
</head>
9-
<body class="td-{{ .Kind }}{{- if ne (lower .Params.cid) "" -}}{{- printf " cid-%s" (lower .Params.cid) -}}{{- end -}}">
9+
<body class="td-{{ .Kind }}{{- if ne (lower .Params.cid) "" -}}{{- printf " cid-%s" (lower .Params.cid) -}}{{- end -}}{{ with .Page.Params.body_class }} {{ . }}{{ end }}">
1010
<header>
1111
{{ partial "navbar.html" . }}
1212
{{ block "announcement" . }}

‎layouts/blog/baseof.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
{{ partial "head.html" . }}
88
<title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}</title>
99
</head>
10-
<body class="td-{{ .Kind }} td-blog">
10+
<body class="td-{{ .Kind }} td-blog {{- with .Page.Params.body_class }} {{ . }}{{ end }}">
1111
<header>
1212
{{ partial "navbar.html" . }}
1313
{{ partial "announcement.html" . }}

‎layouts/case-studies/single-baseof.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
{{ partial "head.html" . }}
55
</head>
6-
<body>
6+
<body{{ with .Page.Params.body_class }} class="{{ . }}"{{ end }}>
77
{{ partial "navbar.html" . }}
88
{{ partial "deprecation-warning.html" . }}
99
<div data-pagefind-body>

‎layouts/docs/baseof.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
{{ partial "head.html" . }}
55
<title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}</title>
66
</head>
7-
<body class="td-{{ .Kind }} td-documentation">
7+
<body class="td-{{ .Kind }}{{ with .Page.Params.body_class }} {{ . }}{{ end }}">
88
<header>
99
{{ partial "navbar.html" . }}
1010
{{ partial "announcement.html" . }}

‎layouts/docs/glossary.html

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,17 @@
11
{{ define "side-menu" }}
2-
{{ partial "docs/side-menu.html" . }}
2+
{{ partial "docs/side-menu.html" . }}
33
{{ end }}
44

55
{{ define "main" }}
66
{{ partial "deprecation-warning.html" . }}
77
<h1>{{ .Title }}</h1>
8-
{{- with resources.Get "css/glossary.css" -}}
9-
<link href="{{ .RelPermalink }}" rel="stylesheet">
10-
{{- end -}}
118
<p>{{ T "layouts_docs_glossary_description" }}</p>
129
<div id="tag-container">
13-
<p>{{ T "layouts_docs_glossary_filter" }}</p>
10+
<p><em>{{ T "layouts_docs_glossary_filter" }}</em></p>
1411
<div class="tag-description invisible" id="placeholder">.</div>
1512
{{ range (index site.Data "canonical-tags") }}
1613
<div class="tag-description hide" id="{{ printf "tag-%s-description" .id }}">
17-
<i>{{ T (printf "layout_docs_glossary_%s_description" .id) }}</i>
14+
{{ T (printf "layout_docs_glossary_%s_description" .id) }}
1815
</div>
1916
{{ end }}
2017
{{ $sorted_tags := sort (index site.Data "canonical-tags") "id" }}
@@ -27,12 +24,12 @@ <h1>{{ .Title }}</h1>
2724
<span class="tag-option"><a id="select-all-tags" href="javascript:void(0)">{{ T "layouts_docs_glossary_select_all" }}</a></span>
2825
<span class="tag-option"><a id="deselect-all-tags" href="javascript:void(0)">{{ T "layouts_docs_glossary_deselect_all" }}</a></span>
2926
</div>
30-
<p>{{ T "layouts_docs_glossary_click_details_before" }} <a href="javascript:void(0)" class="no-underline">[+]</a> {{ T "layouts_docs_glossary_click_details_after" }}</p>
27+
<p id="glossary-details-before">{{ T "layouts_docs_glossary_click_details_before" }} <a href="javascript:void(0)" class="no-underline">[+]</a> {{ T "layouts_docs_glossary_click_details_after" }}</p>
3128
{{ partial "docs/glossary-terms.html" . }}
3229
{{ $glossary_items := $.Scratch.Get "glossary_items" }}
3330
{{ with $glossary_items }}
3431
{{ $glossary_terms := sort . "Title" "asc" }}
35-
<ul>
32+
<ul class="glossary-terms">
3633
{{ range $glossary_terms }}
3734
{{ $.Scratch.Set "tag_classes" "" }}
3835
{{ range .Params.tags }}
@@ -42,11 +39,15 @@ <h1>{{ .Title }}</h1>
4239

4340
<li class="{{ $.Scratch.Get "tag_classes" }} hide" data-show-count="0">
4441
<div id="{{ $term_identifier }}" class="term-anchor"></div>
45-
<div>
46-
<div class="term-name" term="{{ .Title}}" data-pagefind-index-attrs="term"><b>{{ .Title }}</b><a href="{{ printf "#%s" $term_identifier }}" class="permalink hide">LINK</a></div>
42+
<div class="term-name" data-pagefind-index-attrs="term"><span class="glossary-term-name">{{ .Title }}</span><a href="{{ printf "#%s" $term_identifier }}" class="permalink">
43+
{{- with resources.Get "icons/link.svg" -}}
44+
{{- .Content | safeHTML -}}
45+
{{- end -}}
46+
</a></div>
47+
<div class="term-definition">
4748
{{ with .Params.aka }}
48-
{{ T "layouts_docs_glossary_aka" }}: <i>{{ delimit . ", " }}</i>
49-
<br>
49+
{{ T "layouts_docs_glossary_aka" }}: <span class="glossary-aka">{{ delimit . ", " }}</span>
50+
<br />
5051
{{ end }}
5152
<span class="preview-text">{{ .Summary }} <a href="javascript:void(0)" class="click-controller no-underline" data-target="{{ .Params.id }}">[+]</a></span>
5253
<div id="{{ .Params.id }}" class="hide">

0 commit comments

Comments
 (0)