diff options
Diffstat (limited to 'ext')
-rw-r--r-- | ext/mixed/css/display.css | 8 | ||||
-rw-r--r-- | ext/mixed/display-templates.html | 4 | ||||
-rw-r--r-- | ext/mixed/js/display-generator.js | 4 |
3 files changed, 11 insertions, 5 deletions
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css index 55e76ab7..8bbd5731 100644 --- a/ext/mixed/css/display.css +++ b/ext/mixed/css/display.css @@ -208,17 +208,21 @@ button.action-button { } .tag { - display: inline; + display: inline-block; padding: 0.2em 0.6em 0.3em; font-size: 75%; font-weight: 700; - line-height: 1; + line-height: 1.25; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.25em; } +.tag-inner { + display: block; +} + .tag-list>.tag+.tag { margin-left: 0.375em; } diff --git a/ext/mixed/display-templates.html b/ext/mixed/display-templates.html index 62f3c69c..eda9abd9 100644 --- a/ext/mixed/display-templates.html +++ b/ext/mixed/display-templates.html @@ -75,7 +75,7 @@ <template id="kanji-glossary-item-template"><li class="kanji-glossary-item"><span class="kanji-glossary"></span></li></template> <template id="kanji-reading-template"><dd class="kanji-reading"></dd></template> -<template id="tag-template"><span class="tag"></span></template> -<template id="tag-frequency-template"><span class="tag" data-category="frequency"><span class="term-frequency-dictionary-name"></span><span class="term-frequency-separator"></span><span class="term-frequency-value"></span></template> +<template id="tag-template"><span class="tag"><span class="tag-inner"></span></span></template> +<template id="tag-frequency-template"><span class="tag" data-category="frequency"><span class="tag-inner"><span class="term-frequency-dictionary-name"></span><span class="term-frequency-separator"></span><span class="term-frequency-value"></span></span></template> </body></html> diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js index e1710488..8c39d380 100644 --- a/ext/mixed/js/display-generator.js +++ b/ext/mixed/js/display-generator.js @@ -252,8 +252,10 @@ class DisplayGenerator { createTag(details) { const node = DisplayGenerator._instantiateTemplate(this._tagTemplate); + const inner = node.querySelector('.tag-inner'); + node.title = details.notes; - node.textContent = details.name; + inner.textContent = details.name; node.dataset.category = details.category; return node; |