summaryrefslogtreecommitdiff
path: root/ext
diff options
context:
space:
mode:
Diffstat (limited to 'ext')
-rw-r--r--ext/mixed/css/display.css8
-rw-r--r--ext/mixed/display-templates.html4
-rw-r--r--ext/mixed/js/display-generator.js4
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;