aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--ext/mixed/css/display.css12
-rw-r--r--ext/mixed/display-templates.html4
-rw-r--r--ext/mixed/js/display-generator.js9
3 files changed, 20 insertions, 5 deletions
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 8bbd5731..b70ede90 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -249,7 +249,7 @@ button.action-button {
display: inline-block;
}
-.term-reasons>.term-reason+.term-reason:before {
+.term-reasons>.term-reason+.term-reason-separator+.term-reason:before {
content: " \00AB "; /* The two spaces is not a typo */
display: inline;
}
@@ -468,3 +468,13 @@ button.action-button {
padding-left: 1.4em;
list-style-type: decimal;
}
+
+.term-glossary-separator,
+.term-reason-separator {
+ display: inline-block;
+ width: 0;
+ height: 0;
+ font-size: 0;
+ opacity: 0;
+ white-space: pre;
+}
diff --git a/ext/mixed/display-templates.html b/ext/mixed/display-templates.html
index eda9abd9..e762f66b 100644
--- a/ext/mixed/display-templates.html
+++ b/ext/mixed/display-templates.html
@@ -31,8 +31,8 @@
<ul class="term-glossary-list"></ul>
</li></template>
<template id="term-definition-only-template"><span class="term-definition-only"></span></template>
-<template id="term-glossary-item-template"><li class="term-glossary-item"><span class="term-glossary"></span></li></template>
-<template id="term-reason-template"><span class="term-reason"></span></template>
+<template id="term-glossary-item-template"><li class="term-glossary-item"><span class="term-glossary"></span><span class="term-glossary-separator">&#10;</span></li></template>
+<template id="term-reason-template"><span class="term-reason"></span><span class="term-reason-separator">&#10;</span></template>
<template id="kanji-entry-template"><div class="entry" data-type="kanji">
<div class="entry-header1">
diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js
index 8c39d380..0a57df80 100644
--- a/ext/mixed/js/display-generator.js
+++ b/ext/mixed/js/display-generator.js
@@ -110,10 +110,11 @@ class DisplayGenerator {
}
createTermReason(reason) {
- const node = DisplayGenerator._instantiateTemplate(this._termReasonTemplate);
+ const fragment = DisplayGenerator._instantiateTemplateFragment(this._termReasonTemplate);
+ const node = fragment.querySelector('.term-reason');
node.textContent = reason;
node.dataset.reason = reason;
- return node;
+ return fragment;
}
createTermDefinitionItem(details) {
@@ -378,4 +379,8 @@ class DisplayGenerator {
static _instantiateTemplate(template) {
return document.importNode(template.content.firstChild, true);
}
+
+ static _instantiateTemplateFragment(template) {
+ return document.importNode(template.content, true);
+ }
}