diff options
| -rw-r--r-- | ext/mixed/css/display.css | 12 | ||||
| -rw-r--r-- | ext/mixed/display-templates.html | 4 | ||||
| -rw-r--r-- | ext/mixed/js/display-generator.js | 9 |
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"> </span></li></template> +<template id="term-reason-template"><span class="term-reason"></span><span class="term-reason-separator"> </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); + } } |