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 @@