diff --git a/ext/css/display.css b/ext/css/display.css
index 631c4811d..eb52c4d0c 100644
--- a/ext/css/display.css
+++ b/ext/css/display.css
@@ -102,6 +102,7 @@
--collapsible-definition-line-count: 3;
--collapsible-definition-test-offset: 0.2em;
+ --collpasible-kanji-glyph-data-test-offset: 0.2em;
/* Colors */
--background-color: #ffffff;
@@ -127,6 +128,8 @@
--headword-kanji-border-color-popular: var(--headword-kanji-border-color);
--headword-kanji-border-color-rare: var(--headword-kanji-border-color);
+ --kanji-glyph-data-table-cell-padding: 0.36em;
+
--light-border-color: #eeeeee;
--medium-border-color: #dddddd;
--dark-border-color: #777777;
@@ -1184,14 +1187,6 @@ button.action-button:active {
display: list-item;
position: relative;
}
-.definition-item-inner.collapsible.collapsed {
- max-height: calc(1em * var(--collapsible-definition-line-count) * var(--line-height));
- overflow: hidden;
-}
-.definition-item-inner.collapse-test {
- max-height: calc(1em * var(--collapsible-definition-line-count) * var(--line-height) + var(--collapsible-definition-test-offset));
- overflow: hidden;
-}
.definition-item-inner {
display: flex;
flex-flow: row nowrap;
@@ -1202,7 +1197,9 @@ button.action-button:active {
background-color: transparent;
transition: background-color var(--animation-duration) ease-in-out;
}
-button.definition-item-expansion-button {
+
+/* Expansion buttons */
+button.expansion-button {
--button-content-color: var(--text-color-light4);
--button-border-color: transparent;
--button-background-color: transparent;
@@ -1223,34 +1220,57 @@ button.definition-item-expansion-button {
border-radius: 0;
border: 0;
}
-.definition-item-inner:not(.collapsible)>button.definition-item-expansion-button {
- display: none;
-}
-button.definition-item-expansion-button:hover+.definition-item-content,
-button.definition-item-expansion-button:active+.definition-item-content,
-button.definition-item-expansion-button:focus+.definition-item-content {
+
+button.expansion-button:hover+.definition-item-content,
+button.expansion-button:active+.definition-item-content,
+button.expansion-button:focus+.definition-item-content,
+button.expansion-button:hover+.kanji-glyph-data-table,
+button.expansion-button:active+.kanji-glyph-data-table,
+button.expansion-button:focus+.kanji-glyph-data-table {
background-color: var(--accent-color-transparent25);
}
-button.definition-item-expansion-button:focus:not(:focus-visible)+.definition-item-content {
+button.expansion-button:focus:not(:focus-visible)+.definition-item-content,
+button.expansion-button:focus:not(:focus-visible)+.kanji-glyph-data-table {
background-color: transparent;
}
-button.definition-item-expansion-button:focus:hover+.definition-item-content,
-button.definition-item-expansion-button:focus:active+.definition-item-content,
-button.definition-item-expansion-button:focus:focus-visible+.definition-item-content {
+button.expansion-button:focus:hover+.definition-item-content,
+button.expansion-button:focus:active+.definition-item-content,
+button.expansion-button:focus:focus-visible+.definition-item-content,
+button.expansion-button:focus:hover+.kanji-glyph-data-table,
+button.expansion-button:focus:active+.kanji-glyph-data-table,
+button.expansion-button:focus:focus-visible+.kanji-glyph-data-table {
background-color: var(--accent-color-transparent25);
}
-.definition-item-expansion-button-icon {
+.definition-item-inner.collapsible.collapsed {
+ max-height: calc(1em * var(--collapsible-definition-line-count) * var(--line-height));
+ overflow: hidden;
+}
+.definition-item-inner.collapse-test {
+ max-height: calc(1em * var(--collapsible-definition-line-count) * var(--line-height) + var(--collapsible-definition-test-offset));
+ overflow: hidden;
+}
+.kanji-glyph-data.collapsible.collapsed {
+ max-height: calc((20em / var(--font-size-no-units)) + var(--kanji-glyph-data-table-cell-padding) * 2);
+ overflow: hidden;
+}
+.kanji-glyph-data.collapsible.collapsed-test {
+ max-height: calc((20em / var(--font-size-no-units)) + var(--kanji-glyph-data-table-cell-padding) * 2 + var(--collpasible-kanji-glyph-data-test-offset));
+ overflow: hidden;
+}
+:not(.collapsible)>button.expansion-button {
+ display: none;
+}
+.expansion-button-icon {
transform: rotate(0deg);
width: calc(16em / var(--font-size-no-units));
height: calc(16em / var(--font-size-no-units));
background-color: var(--button-current-content-color);
transition: background-color var(--animation-duration) ease-in-out;
}
-.definition-item-inner.collapsible:not(.collapsed)>button.definition-item-expansion-button>.definition-item-expansion-button-icon {
+.collapsible:not(.collapsed)>button.expansion-button>.expansion-button-icon {
transform: rotate(180deg);
}
-
/* Frequencies */
.frequency-group-item {
display: inline;
@@ -1515,14 +1535,18 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con
}
.kanji-glyph-data {
margin-top: 0.75em;
+ display: flex;
+ flex-flow: row nowrap;
+}
+.kanji-glyph-data-table {
border-spacing: 0;
border-collapse: collapse;
}
-.kanji-glyph-data>tbody>tr>* {
+.kanji-glyph-data-table>tbody>tr>* {
border-top: var(--thin-border-size) solid var(--medium-border-color);
text-align: left;
vertical-align: top;
- padding: 0.36em;
+ padding: var(--kanji-glyph-data-table-cell-padding);
margin: 0;
}
.kanji-info-table {
@@ -1538,11 +1562,11 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con
.kanji-info-table>tbody>tr>td {
text-align: right;
}
-.kanji-glyph-data dl {
+.kanji-glyph-data-table dl {
margin-top: 0;
margin-bottom: 1.4em;
}
-.kanji-glyph-data dd {
+.kanji-glyph-data-table dd {
margin-left: 0;
}
.kanji-gloss-list {
diff --git a/ext/js/display/display-generator.js b/ext/js/display/display-generator.js
index fc9369d55..6f4d7e6cb 100644
--- a/ext/js/display/display-generator.js
+++ b/ext/js/display/display-generator.js
@@ -160,6 +160,7 @@ export class DisplayGenerator {
*/
createKanjiEntry(dictionaryEntry) {
const node = this._instantiate('kanji-entry');
+ node.dataset.dictionary = dictionaryEntry.dictionary;
const glyphContainer = this._querySelector(node, '.kanji-glyph');
const frequencyGroupListContainer = this._querySelector(node, '.frequency-group-list');
diff --git a/ext/js/display/element-overflow-controller.js b/ext/js/display/element-overflow-controller.js
index eb83dda43..21a01d9e1 100644
--- a/ext/js/display/element-overflow-controller.js
+++ b/ext/js/display/element-overflow-controller.js
@@ -76,7 +76,12 @@ export class ElementOverflowController {
addElements(entry) {
if (this._dictionaries.size === 0) { return; }
- const elements = entry.querySelectorAll('.definition-item-inner');
+
+ /** @type {Element[]} */
+ const elements = [
+ ...entry.querySelectorAll('.definition-item-inner'),
+ ...entry.querySelectorAll('.kanji-glyph-data'),
+ ];
for (const element of elements) {
const {parentNode} = element;
if (parentNode === null) { continue; }
@@ -96,7 +101,7 @@ export class ElementOverflowController {
element.classList.add('collapsed');
}
- const button = element.querySelector('.definition-item-expansion-button');
+ const button = element.querySelector('.expansion-button');
if (button !== null) {
this._eventListeners.addEventListener(button, 'click', this._onToggleButtonClickBind, false);
}
@@ -128,9 +133,15 @@ export class ElementOverflowController {
*/
_onToggleButtonClick(e) {
const element = /** @type {Element} */ (e.currentTarget);
- const container = element.closest('.definition-item-inner');
- if (container === null) { return; }
- container.classList.toggle('collapsed');
+ /** @type {(Element | null)[]} */
+ const collapsedElements = [
+ element.closest('.definition-item-inner'),
+ element.closest('.kanji-glyph-data'),
+ ];
+ for (const collapsedElement of collapsedElements) {
+ if (collapsedElement === null) { continue; }
+ collapsedElement.classList.toggle('collapsed');
+ }
}
/** */
diff --git a/ext/templates-display.html b/ext/templates-display.html
index dbd0eddba..94f9af664 100644
--- a/ext/templates-display.html
+++ b/ext/templates-display.html
@@ -69,7 +69,7 @@
-
-
- Meaning |
- Readings |
- Statistics |
-
-
-
|
-
|
- |
-
- Classifications |
- |
- Codepoints |
- |
- Dictionary Indices |
- |
-
+
+
+
+
+
+ Meaning |
+ Readings |
+ Statistics |
+
+
+
|
+
|
+ |
+
+ Classifications |
+ |
+ Codepoints |
+ |
+ Dictionary Indices |
+ |
+
+
+
|