Add an icon in the title area of glossary term popovers. (#3286)

layouts/_default/faq-landing.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 
-{{ partial "primary-top.html" . }}
+{{ partial "primary_top.html" . }}
 
 {{ .Content }}
 
@@ -25,6 +25,6 @@
     {{ end }}
 </div>
 
-{{ partial "primary-bottom.html" . }}
+{{ partial "primary_bottom.html" . }}
 
 {{ end }}

layouts/_default/faq.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 
-{{ partial "primary-top.html" . }}
+{{ partial "primary_top.html" . }}
 
 {{ $questions := .Resources.ByType "page" }}
 {{ $sorted_questions := sort $questions ".Params.weight" }}
@@ -30,6 +30,6 @@
     {{ end }}
 </div>
 
-{{ partial "primary-bottom.html" . }}
+{{ partial "primary_bottom.html" . }}
 
 {{ end }}

layouts/_default/glossary.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 
-{{ partial "primary-top.html" . }}
+{{ partial "primary_top.html" . }}
 
 {{ .Content }}
 
@@ -48,6 +48,6 @@
     </div>
 </div>
 
-{{ partial "primary-bottom.html" . }}
+{{ partial "primary_bottom.html" . }}
 
 {{ end }}

layouts/_default/list.html

@@ -2,7 +2,7 @@
 
 {{ .Scratch.Set "skipSeeAlso" true }}
 
-{{ partial "primary-top.html" . }}
+{{ partial "primary_top.html" . }}
 
 <p>{{ .Description }}</p>
 
@@ -23,7 +23,7 @@
             {{ if eq .Parent $parent }}
                 <div class="entry">
                     <h5>
-                        <a href="{{ .Permalink }}">{{- if .Params.icon -}}<i class="page_icon">
+                        <a href="{{ .Permalink }}">{{- if .Params.icon -}}<i class="page-icon">
                                 {{- partial "icon.html" .Params.icon -}}</i>{{- end -}}{{- .Title -}}</a>
                     </h5>
                     <p>{{ .Description }}</p>
@@ -35,6 +35,6 @@
 
 {{ .Content }}
 
-{{ partial "primary-bottom.html" . }}
+{{ partial "primary_bottom.html" . }}
 
 {{ end }}

layouts/_default/partner-component.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-{{ partial "primary-top.html" . }}
+{{ partial "primary_top.html" . }}
 
 <div class="partner-component">
     <p>
@@ -50,5 +50,5 @@
 
 {{ .Content }}
 
-{{ partial "primary-bottom.html" . }}
+{{ partial "primary_bottom.html" . }}
 {{ end }}

layouts/_default/search.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 
-{{ partial "primary-top.html" . }}
+{{ partial "primary_top.html" . }}
 
 <style>
     .gs-webResult div.gs-visibleUrl-long, .gs-promotion div.gs-visibleUrl-long {
@@ -117,6 +117,6 @@
 
 {{ .Content }}
 
-{{ partial "primary-bottom.html" . }}
+{{ partial "primary_bottom.html" . }}
 
 {{ end }}

layouts/_default/single.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-{{ partial "primary-top.html" . }}
+{{ partial "primary_top.html" . }}
 {{ .Content }}
-{{ partial "primary-bottom.html" . }}
+{{ partial "primary_bottom.html" . }}
 {{ end }}

layouts/partials/large_icon.html

@@ -1 +1 @@
-{{- $name := . -}}<svg class="large_icon"><use xlink:href="/img/icons.svg#{{ $name }}"/></svg>
+{{- $name := . -}}<svg class="large-icon"><use xlink:href="/img/icons.svg#{{ $name }}"/></svg>

layouts/partials/primary_top.html

@@ -10,10 +10,10 @@
     <div id="sidebar-container" class="sidebar-container sidebar-offcanvas">
         {{ $section := .Site.GetPage "section" .Section }}
         {{ if $section.Params.sidebar_multicard }}
-            {{ partial "sidebar-multicard.html" . }}
+            {{ partial "sidebar_multicard.html" . }}
         {{ else if $section.Params.sidebar_none }}
         {{ else }}
-            {{ partial "sidebar-singlecard.html" . }}
+            {{ partial "sidebar_singlecard.html" . }}
         {{ end }}
     </div>
 
@@ -31,7 +31,7 @@
         <main aria-labelledby="title">
             <h1 id="title">
                 {{- if .Params.icon -}}
-                    <i class="page_icon">
+                    <i class="page-icon">
                         {{- partial "icon.html" .Params.icon -}}
                     </i>
                 {{- end -}}

layouts/partials/sidebar_level.html

@@ -19,7 +19,7 @@
                         <a {{ if eq $current.Permalink .Permalink }}class="current"{{ end }} title="{{ .Description }}" href="{{ .Permalink }}">{{ .LinkTitle}}</a>
                     </label>
 
-                    {{ partial "sidebar-level.html" (dict "pages" $pages "parent" . "current" $current "collapse" $collapse) }}
+                    {{ partial "sidebar_level.html" (dict "pages" $pages "parent" . "current" $current "collapse" $collapse) }}
                 </li>
             {{ else }}
                 <li>

layouts/partials/sidebar_multicard.html

@@ -23,7 +23,7 @@
 
                     <div id="collapse{{ $count }}" class="collapse{{if .IsAncestor $current}} show{{end}}" role="tabpanel" aria-labelledby="header{{ $count }}">
                         <div class="card-body">
-                            {{ partial "sidebar-level.html" (dict "pages" $pages "parent" $page "current" $current "collapse" false) }}
+                            {{ partial "sidebar_level.html" (dict "pages" $pages "parent" $page "current" $current "collapse" false) }}
                         </div>
                     </div>
                 </div>

layouts/partials/sidebar_singlecard.html

@@ -17,7 +17,7 @@
 
             <div role="tabpanel" aria-labelledby="header0">
                 <div class="card-body">
-                    {{ partial "sidebar-level.html" (dict "pages" $pages "parent" $section "current" . "collapse" false) }}
+                    {{ partial "sidebar_level.html" (dict "pages" $pages "parent" $section "current" . "collapse" false) }}
                 </div>
             </div>
         </div>

layouts/shortcodes/idea.html

@@ -1,6 +1,6 @@
 <div class="callout idea">
     <div class="type">
-        <svg class="large_icon"><use xlink:href="/img/icons.svg#callout-idea"/></svg>
+        <svg class="large-icon"><use xlink:href="/img/icons.svg#callout-idea"/></svg>
     </div>
     <div class="content">
         {{ $trimmed := trim .Inner " \n" }}

layouts/shortcodes/quote.html

@@ -1,6 +1,6 @@
 <div class="callout quote">
     <div class="type">
-        <svg class="large_icon"><use xlink:href="/img/icons.svg#callout-quote"/></svg>
+        <svg class="large-icon"><use xlink:href="/img/icons.svg#callout-quote"/></svg>
     </div>
     <div class="content">
         {{ $trimmed := trim .Inner " \n" }}

layouts/shortcodes/tip.html

@@ -1,6 +1,6 @@
 <div class="callout tip">
     <div class="type">
-        <svg class="large_icon"><use xlink:href="/img/icons.svg#callout-tip"/></svg>
+        <svg class="large-icon"><use xlink:href="/img/icons.svg#callout-tip"/></svg>
     </div>
     <div class="content">
         {{ $trimmed := trim .Inner " \n" }}

layouts/shortcodes/warning.html

@@ -1,6 +1,6 @@
 <div class="callout warning">
     <div class="type">
-        <svg class="large_icon"><use xlink:href="/img/icons.svg#callout-warning"/></svg>
+        <svg class="large-icon"><use xlink:href="/img/icons.svg#callout-warning"/></svg>
     </div>
     <div class="content">
         {{ $trimmed := trim .Inner " \n" }}

src/js/misc.js

@@ -5,9 +5,16 @@ document.addEventListener('DOMContentLoaded', () => {
     // Expand spans that define terms into appropriate popup markup
     function expandPopovers() {
         document.querySelectorAll('.term').forEach(term => {
+            const i = document.createElement('i');
+            i.innerHTML = "<svg class='icon'><use xlink:href='" + iconFile + "#glossary'/></svg>";
+
+            const span = document.createElement('span');
+            span.innerText = " " + term.dataset.title;
+
             const title = document.createElement('div');
             title.className = 'title';
-            title.innerText = term.dataset.title;
+            title.appendChild(i);
+            title.appendChild(span);
 
             const body = document.createElement('div');
             body.className = 'body';

src/sass/base/_base.scss

@@ -489,7 +489,7 @@ blockquote {
     vertical-align: middle;
 }
 
-.large_icon {
+.large-icon {
     width: 1.4em;
     height: 1.4em;
     display: inline;
@@ -498,7 +498,7 @@ blockquote {
     vertical-align: middle;
 }
 
-.page_icon {
+.page-icon {
     margin-right: .3em;
 }
 

src/sass/base/_constants.scss

@@ -24,6 +24,6 @@ $promotion-z: 200;
 $header-z: 100;
 $overlay-z: 75;
 $sidebar-z: 50;
+$floating-button-z: 15;
 $glossary-letter-z: 10;
-$floating-button-z: 5;
 $toolbar-button-z: 1;

src/sass/misc/_popover.scss

@@ -25,7 +25,7 @@
         text-align: center;
         color: $popoverHeaderTextColor;
         background-color: $popoverHeaderBackgroundColor;
-        font-size: 110%;
+        font-size: 140%;
         border-radius: 4px 4px 0 0;
     }