Skip to content

Commit 8214a5f

Browse files
author
Tim Bannister
committed
Restyle glossary page
Match the theme more closely, and use SCSS to define the styling. Also change the permalink hover behavior to be pure CSS.
1 parent 5a283be commit 8214a5f

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,19 +1,16 @@
11
{{ define "side-menu" }}
2-
{{ partial "docs/side-menu.html" . }}
2+
{{ partial "docs/side-menu.html" . }}
33
{{ end }}
44

55
{{ define "main" }}
66
<h1>{{ .Title }}</h1>
7-
{{- with resources.Get "css/glossary.css" -}}
8-
<link href="{{ .RelPermalink }}" rel="stylesheet">
9-
{{- end -}}
107
<p>{{ T "layouts_docs_glossary_description" }}</p>
118
<div id="tag-container">
12-
<p>{{ T "layouts_docs_glossary_filter" }}</p>
9+
<p><em>{{ T "layouts_docs_glossary_filter" }}</em></p>
1310
<div class="tag-description invisible" id="placeholder">.</div>
1411
{{ range (index site.Data "canonical-tags") }}
1512
<div class="tag-description hide" id="{{ printf "tag-%s-description" .id }}">
16-
<i>{{ T (printf "layout_docs_glossary_%s_description" .id) }}</i>
13+
{{ T (printf "layout_docs_glossary_%s_description" .id) }}
1714
</div>
1815
{{ end }}
1916
{{ $sorted_tags := sort (index site.Data "canonical-tags") "id" }}
@@ -26,12 +23,12 @@ <h1>{{ .Title }}</h1>
2623
<span class="tag-option"><a id="select-all-tags" href="javascript:void(0)">{{ T "layouts_docs_glossary_select_all" }}</a></span>
2724
<span class="tag-option"><a id="deselect-all-tags" href="javascript:void(0)">{{ T "layouts_docs_glossary_deselect_all" }}</a></span>
2825
</div>
29-
<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>
26+
<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>
3027
{{ partial "docs/glossary-terms.html" . }}
3128
{{ $glossary_items := $.Scratch.Get "glossary_items" }}
3229
{{ with $glossary_items }}
3330
{{ $glossary_terms := sort . "Title" "asc" }}
34-
<ul>
31+
<ul class="glossary-terms">
3532
{{ range $glossary_terms }}
3633
{{ $.Scratch.Set "tag_classes" "" }}
3734
{{ range .Params.tags }}
@@ -41,11 +38,15 @@ <h1>{{ .Title }}</h1>
4138

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

0 commit comments

Comments
 (0)