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.pull/47484/head
Tim Bannister
parent
5a283be787
commit
8214a5f0ef
|
|
@ -1,60 +0,0 @@
|
|||
.preview-text p {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.term-anchor {
|
||||
display: block;
|
||||
position: relative;
|
||||
top: -90px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.tag-option {
|
||||
padding: 5px;
|
||||
margin: 10px;
|
||||
float:left;
|
||||
}
|
||||
|
||||
.canonical-tag {
|
||||
color: white;
|
||||
background-color: #b7c8e8;
|
||||
}
|
||||
|
||||
.canonical-tag a {
|
||||
color: inherit;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.active-tag {
|
||||
background-color: #326ce5;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#tag-container {
|
||||
float: left;
|
||||
width: 100%;
|
||||
border-top: 1px solid #8c8c8c;
|
||||
border-bottom: 1px solid #8c8c8c;
|
||||
padding: 7px 0px;
|
||||
margin: 25px 0px;
|
||||
}
|
||||
|
||||
.tag-description {
|
||||
text-align: center;
|
||||
margin: 5px 0px;
|
||||
}
|
||||
|
|
@ -149,16 +149,6 @@ $( document ).ready(function() {
|
|||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Shows permalink when term name is hovered over
|
||||
$(".term-name").each(function() {
|
||||
var permalink = $($(this).parent().find(".permalink")[0]);
|
||||
$(this).mouseenter(function(){
|
||||
permalink.removeClass("hide");
|
||||
}).mouseleave(function(){
|
||||
permalink.addClass("hide");
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
function initActiveTags() {
|
||||
|
|
|
|||
|
|
@ -626,6 +626,147 @@ body.td-home #deprecation-warning {
|
|||
margin-right: auto;
|
||||
}
|
||||
|
||||
body.glossary {
|
||||
main {
|
||||
ul.glossary-terms > li {
|
||||
list-style-type: none;
|
||||
padding: 0.5em;
|
||||
padding-bottom: calc(min(0.5em, 0.25em + 0.15vh ));
|
||||
margin: 0;
|
||||
margin-top: calc(min(1.0em, 0.25em + 0.15vh ));
|
||||
}
|
||||
ul.glossary-terms > li.hide {
|
||||
display: none;
|
||||
}
|
||||
ul.glossary-terms > li:has(.term-anchor:target) {
|
||||
border-left: 0.3em solid $blue;
|
||||
background: rgba(#999999, 0.2);
|
||||
}
|
||||
#tag-container {
|
||||
float: left;
|
||||
max-width: calc(max(80%, 100em));
|
||||
border-top: 1px solid #999999;
|
||||
border-bottom: 1px solid #999999;
|
||||
padding-top: 0.5em 0;
|
||||
margin: 2em 0;
|
||||
> p {
|
||||
display: inline-block;
|
||||
padding-top: 0.2em;
|
||||
}
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
.tag-option {
|
||||
border-radius: 0.33em;
|
||||
padding: 0.5em;
|
||||
padding-left: 0.6em;
|
||||
padding-right: 0.75em;
|
||||
margin: 0.75em;
|
||||
margin-top: 0.1em;
|
||||
float: left;
|
||||
font-weight: bold;
|
||||
font-size: 0.925em;
|
||||
}
|
||||
.tag-option:not(.canonical-tag):hover {
|
||||
outline: 1.5px solid $blue;
|
||||
}
|
||||
.tag-description {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 0.2em;
|
||||
padding-bottom: 0.8em;
|
||||
text-align: center;
|
||||
}
|
||||
.canonical-tag {
|
||||
color: white;
|
||||
background-color: #999999;
|
||||
}
|
||||
.canonical-tag a {
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.active-tag {
|
||||
color: $white;
|
||||
background-color: $blue;
|
||||
}
|
||||
// darken on hover
|
||||
.canonical-tag:hover {
|
||||
background: darken(#999999, 15%)
|
||||
}
|
||||
.canonical-tag.active-tag:hover {
|
||||
background: darken($blue, 15%)
|
||||
}
|
||||
}
|
||||
.term-anchor:target + .term-name > span {
|
||||
color: $blue;
|
||||
}
|
||||
.term-anchor:target {
|
||||
visibility: initial;
|
||||
}
|
||||
.glossary-term-name {
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
padding-left: 0.25em;
|
||||
padding-right: 0.25em;
|
||||
}
|
||||
.glossary-aka {
|
||||
display: inline-block;
|
||||
padding-left: 0.25em;
|
||||
padding-right: 0.25em;
|
||||
padding-bottom: 0.25em;
|
||||
}
|
||||
#glossary-details-before {
|
||||
margin-top: 3em;
|
||||
font-style: italic;
|
||||
clear: both;
|
||||
}
|
||||
.preview-text {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
.preview-text + * {
|
||||
margin-top: 0.2em;
|
||||
}
|
||||
.term-definition {
|
||||
margin-left: calc(min(2em, 0.5em + 0.75vw));
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.glossary-aka {
|
||||
font-style: italic;
|
||||
}
|
||||
.preview-text p {
|
||||
display: inline;
|
||||
}
|
||||
.permalink {
|
||||
display: inline-block;
|
||||
background-image: url(../images/link.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
padding-left: 0.1em;
|
||||
}
|
||||
.term-name:hover {
|
||||
color: $blue;
|
||||
}
|
||||
.term-name:not(:hover) > .permalink {
|
||||
visibility: hidden;
|
||||
}
|
||||
.term-anchor {
|
||||
display: block;
|
||||
position: relative;
|
||||
top: -4rem; // adjust scrolling to target
|
||||
visibility: hidden;
|
||||
}
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#caseStudies body > #deprecation-warning, body.cid-casestudies > #deprecation-warning, body.cid-community > #deprecation-warning {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<head{{- if hugo.IsProduction}} class="live-site"{{- end -}}>
|
||||
{{ partial "head.html" . }}
|
||||
</head>
|
||||
<body class="td-{{ .Kind }}{{- if ne (lower .Params.cid) "" -}}{{- printf " cid-%s" (lower .Params.cid) -}}{{- end -}}">
|
||||
<body class="td-{{ .Kind }}{{- if ne (lower .Params.cid) "" -}}{{- printf " cid-%s" (lower .Params.cid) -}}{{- end -}}{{ with .Page.Params.body_class }} {{ . }}{{ end }}">
|
||||
<header>
|
||||
{{ partial "navbar.html" . }}
|
||||
{{ block "announcement" . }}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
{{ partial "head.html" . }}
|
||||
<title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}</title>
|
||||
</head>
|
||||
<body class="td-{{ .Kind }} td-blog">
|
||||
<body class="td-{{ .Kind }} td-blog {{- with .Page.Params.body_class }} {{ . }}{{ end }}">
|
||||
<header>
|
||||
{{ partial "navbar.html" . }}
|
||||
{{ partial "announcement.html" . }}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
{{ partial "head.html" . }}
|
||||
</head>
|
||||
<body>
|
||||
<body{{ with .Page.Params.body_class }} class="{{ . }}"{{ end }}>
|
||||
{{ partial "navbar.html" . }}
|
||||
{{ partial "deprecation-warning.html" . }}
|
||||
<div data-pagefind-body>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
{{ partial "head.html" . }}
|
||||
<title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}</title>
|
||||
</head>
|
||||
<body class="td-{{ .Kind }} td-documentation">
|
||||
<body class="td-{{ .Kind }}{{ with .Page.Params.body_class }} {{ . }}{{ end }}">
|
||||
<header>
|
||||
{{ partial "navbar.html" . }}
|
||||
{{ partial "announcement.html" . }}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,16 @@
|
|||
{{ define "side-menu" }}
|
||||
{{ partial "docs/side-menu.html" . }}
|
||||
{{ partial "docs/side-menu.html" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
<h1>{{ .Title }}</h1>
|
||||
{{- with resources.Get "css/glossary.css" -}}
|
||||
<link href="{{ .RelPermalink }}" rel="stylesheet">
|
||||
{{- end -}}
|
||||
<p>{{ T "layouts_docs_glossary_description" }}</p>
|
||||
<div id="tag-container">
|
||||
<p>{{ T "layouts_docs_glossary_filter" }}</p>
|
||||
<p><em>{{ T "layouts_docs_glossary_filter" }}</em></p>
|
||||
<div class="tag-description invisible" id="placeholder">.</div>
|
||||
{{ range (index site.Data "canonical-tags") }}
|
||||
<div class="tag-description hide" id="{{ printf "tag-%s-description" .id }}">
|
||||
<i>{{ T (printf "layout_docs_glossary_%s_description" .id) }}</i>
|
||||
{{ T (printf "layout_docs_glossary_%s_description" .id) }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ $sorted_tags := sort (index site.Data "canonical-tags") "id" }}
|
||||
|
|
@ -26,12 +23,12 @@
|
|||
<span class="tag-option"><a id="select-all-tags" href="javascript:void(0)">{{ T "layouts_docs_glossary_select_all" }}</a></span>
|
||||
<span class="tag-option"><a id="deselect-all-tags" href="javascript:void(0)">{{ T "layouts_docs_glossary_deselect_all" }}</a></span>
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
{{ partial "docs/glossary-terms.html" . }}
|
||||
{{ $glossary_items := $.Scratch.Get "glossary_items" }}
|
||||
{{ with $glossary_items }}
|
||||
{{ $glossary_terms := sort . "Title" "asc" }}
|
||||
<ul>
|
||||
<ul class="glossary-terms">
|
||||
{{ range $glossary_terms }}
|
||||
{{ $.Scratch.Set "tag_classes" "" }}
|
||||
{{ range .Params.tags }}
|
||||
|
|
@ -41,11 +38,15 @@
|
|||
|
||||
<li class="{{ $.Scratch.Get "tag_classes" }} hide" data-show-count="0">
|
||||
<div id="{{ $term_identifier }}" class="term-anchor"></div>
|
||||
<div>
|
||||
<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>
|
||||
<div class="term-name" data-pagefind-index-attrs="term"><span class="glossary-term-name">{{ .Title }}</span><a href="{{ printf "#%s" $term_identifier }}" class="permalink">
|
||||
{{- with resources.Get "icons/link.svg" -}}
|
||||
{{- .Content | safeHTML -}}
|
||||
{{- end -}}
|
||||
</a></div>
|
||||
<div class="term-definition">
|
||||
{{ with .Params.aka }}
|
||||
{{ T "layouts_docs_glossary_aka" }}: <i>{{ delimit . ", " }}</i>
|
||||
<br>
|
||||
{{ T "layouts_docs_glossary_aka" }}: <span class="glossary-aka">{{ delimit . ", " }}</span>
|
||||
<br />
|
||||
{{ end }}
|
||||
<span class="preview-text">{{ .Summary }} <a href="javascript:void(0)" class="click-controller no-underline" data-target="{{ .Params.id }}">[+]</a></span>
|
||||
<div id="{{ .Params.id }}" class="hide">
|
||||
|
|
|
|||
Loading…
Reference in New Issue