diff options
| -rw-r--r-- | ext/css/display.css | 109 | ||||
| -rw-r--r-- | ext/display-templates.html | 52 | ||||
| -rw-r--r-- | ext/js/display/display-generator.js | 2 | ||||
| -rw-r--r-- | ext/js/display/display.js | 2 |
4 files changed, 81 insertions, 84 deletions
diff --git a/ext/css/display.css b/ext/css/display.css index b80a949c..63213103 100644 --- a/ext/css/display.css +++ b/ext/css/display.css @@ -789,12 +789,63 @@ button.action-button[data-icon=source-term]::before { padding: var(--entry-vertical-padding) var(--entry-horizontal-padding); position: relative; } -.kanji-link { +.entry+.entry { + border-top: var(--thin-border-size) solid var(--light-border-color); +} +.entry-body { + clear: both; +} +.entry[data-definition-count='0'] .entry-body-section[data-section-type=definitions], +.entry[data-frequency-count='0'] .entry-body-section[data-section-type=frequencies], +.entry[data-pitch-accent-count='0'] .entry-body-section[data-section-type=pitch-accents] { + display: none; +} + + +/* Inflections */ +.inflection-list { + display: inline-block; + color: var(--reason-text-color); +} +.inflection-list:empty { + display: none; +} +.inflection-list>.inflection+.inflection-separator+.inflection::before { + content: ' \00AB '; /* The two spaces is not a typo */ + white-space: pre-wrap; + display: inline; +} + + +/* Expressions */ +.expression-kanji-link { border-bottom: var(--expression-thin-border-size) dashed var(--expression-kanji-border-color); color: var(--expression-text-color); text-decoration: none; cursor: pointer; } +.expression-list { + display: inline; + margin-right: var(--expression-list-end-space); +} +.expression { + display: inline-block; +} +.expression-details { + display: inline; +} +.expression-tag-list { + display: none; +} +.expression-details>.frequencies { + display: none; +} +.expression-list-details { + display: inline; +} +.expression-list-tag-list { + display: inline; +} .expression-text-container { display: inline-block; margin-left: calc(-1 * var(--expression-reading-space)); @@ -825,60 +876,19 @@ button.action-button[data-icon=source-term]::before { content: var(--expression-separator); font-size: var(--expression-reading-font-size); } +.expression-text>ruby>rt { + color: var(--expression-furigana-text-color); +} .entry[data-expression-multi=true] .expression[data-frequency=popular] .expression-text, .entry[data-expression-multi=true] .expression[data-frequency=popular] .expression-reading, -.entry[data-expression-multi=true] .expression[data-frequency=popular] .kanji-link { +.entry[data-expression-multi=true] .expression[data-frequency=popular] .expression-kanji-link { color: var(--expression-text-color-popular); } .entry[data-expression-multi=true] .expression[data-frequency=rare] .expression-text, .entry[data-expression-multi=true] .expression[data-frequency=rare] .expression-reading, -.entry[data-expression-multi=true] .expression[data-frequency=rare] .kanji-link { +.entry[data-expression-multi=true] .expression[data-frequency=rare] .expression-kanji-link { color: var(--expression-text-color-rare); } -.expression-text>ruby>rt { - color: var(--expression-furigana-text-color); -} -.entry-header2, -.entry-header3 { - display: inline; -} -.entry+.entry { - border-top: var(--thin-border-size) solid var(--light-border-color); -} -.inflection-list { - display: inline-block; - color: var(--reason-text-color); -} -.inflection-list:empty { - display: none; -} -.inflection-list>.inflection+.inflection-separator+.inflection::before { - content: ' \00AB '; /* The two spaces is not a typo */ - white-space: pre-wrap; - display: inline; -} -.expression-list { - display: inline; - margin-right: var(--expression-list-end-space); -} -.expression { - display: inline-block; -} -.expression-details { - display: inline; -} -.expression-tag-list { - display: none; -} -.expression-details>.frequencies { - display: none; -} -.expression-list-details { - display: inline; -} -.expression-list-tag-list { - display: inline; -} .entry[data-expression-multi=true] .expression-list-details { display: block; } @@ -1118,11 +1128,6 @@ button.action-button[data-icon=source-term]::before { opacity: 0; white-space: pre-wrap; } -.entry[data-definition-count='0'] .entry-body-section[data-section-type=definitions], -.entry[data-frequency-count='0'] .entry-body-section[data-section-type=frequencies], -.entry[data-pitch-accent-count='0'] .entry-body-section[data-section-type=pitch-accents] { - display: none; -} /* Frequencies */ diff --git a/ext/display-templates.html b/ext/display-templates.html index 1ff8a4e4..c5659639 100644 --- a/ext/display-templates.html +++ b/ext/display-templates.html @@ -3,22 +3,18 @@ <!-- Term entry templates --> <template id="term-entry-template" data-remove-whitespace-text="true"><div class="entry" data-type="term"> <div class="entry-current-indicator" title="Current entry"><span class="entry-current-indicator-inner"></span></div> - <div class="entry-header1"> - <div class="entry-header2"> - <div class="entry-header3"> - <div class="actions"> - <button class="action-button action-view-note" hidden disabled data-icon="view-note" title="View added note" data-hotkey='["viewNote","title","View added note ({0})"]'></button> - <button class="action-button action-add-note" hidden disabled data-icon="add-term-kanji" data-mode="term-kanji" title="Add expression" data-hotkey='["addNoteTermKanji","title","Add expression ({0})"]'></button> - <button class="action-button action-add-note" hidden disabled data-icon="add-term-kana" data-mode="term-kana" title="Add reading" data-hotkey='["addNoteTermKana","title","Add reading ({0})"]'></button> - <button class="action-button action-play-audio" data-icon="play-audio" title="Play audio" data-title-default="Play audio" data-hotkey='["playAudio",["title","data-title-default"],"Play audio ({0})"]' data-menu-position="left below h-cover v-cover"><div class="action-button-badge icon" hidden></div></button> - <span class="entry-current-indicator-icon" title="Current entry"></span> - </div> - <div class="expression-list"></div> - </div> - <div class="expression-list-details"> - <div class="expression-list-tag-list tag-list"></div> - <div class="inflection-list"></div> - </div> + <div class="entry-header"> + <div class="actions"> + <button class="action-button action-view-note" hidden disabled data-icon="view-note" title="View added note" data-hotkey='["viewNote","title","View added note ({0})"]'></button> + <button class="action-button action-add-note" hidden disabled data-icon="add-term-kanji" data-mode="term-kanji" title="Add expression" data-hotkey='["addNoteTermKanji","title","Add expression ({0})"]'></button> + <button class="action-button action-add-note" hidden disabled data-icon="add-term-kana" data-mode="term-kana" title="Add reading" data-hotkey='["addNoteTermKana","title","Add reading ({0})"]'></button> + <button class="action-button action-play-audio" data-icon="play-audio" title="Play audio" data-title-default="Play audio" data-hotkey='["playAudio",["title","data-title-default"],"Play audio ({0})"]' data-menu-position="left below h-cover v-cover"><div class="action-button-badge icon" hidden></div></button> + <span class="entry-current-indicator-icon" title="Current entry"></span> + </div> + <div class="expression-list"></div> + <div class="expression-list-details"> + <div class="expression-list-tag-list tag-list"></div> + <div class="inflection-list"></div> </div> </div> <div class="entry-body"> @@ -92,22 +88,18 @@ <!-- Kanji entry templates --> <template id="kanji-entry-template" data-remove-whitespace-text="true"><div class="entry" data-type="kanji"> <div class="entry-current-indicator" title="Current entry"><span class="entry-current-indicator-inner"></span></div> - <div class="entry-header1"> - <div class="entry-header2"> - <div class="entry-header3"> - <div class="actions"> - <button class="action-button action-view-note" hidden disabled data-icon="view-note" title="View added note" data-hotkey='["viewNote","title","View added note ({0})"]'></button> - <button class="action-button action-add-note" hidden disabled data-icon="add-term-kanji" data-mode="kanji" title="Add kanji" data-hotkey='["addNoteKanji","title","Add kanji ({0})"]'></button> - <span class="entry-current-indicator-icon" title="Current entry"></span> - </div> - <div class="kanji-glyph-container"> - <span class="expression-current-indicator"></span> - <div class="kanji-glyph source-text"></div> - </div> - </div> + <div class="entry-header"> + <div class="actions"> + <button class="action-button action-view-note" hidden disabled data-icon="view-note" title="View added note" data-hotkey='["viewNote","title","View added note ({0})"]'></button> + <button class="action-button action-add-note" hidden disabled data-icon="add-term-kanji" data-mode="kanji" title="Add kanji" data-hotkey='["addNoteKanji","title","Add kanji ({0})"]'></button> + <span class="entry-current-indicator-icon" title="Current entry"></span> + </div> + <div class="kanji-glyph-container"> + <span class="expression-current-indicator"></span> + <div class="kanji-glyph source-text"></div> </div> + <div class="kanji-tag-list tag-list"></div> </div> - <div class="kanji-tag-list tag-list"></div> <div class="entry-body"> <div class="entry-body-section" data-section-type="frequencies"> <div class="entry-body-section-content frequency-group-list"></div> diff --git a/ext/js/display/display-generator.js b/ext/js/display/display-generator.js index 1a73ff80..32059d86 100644 --- a/ext/js/display/display-generator.js +++ b/ext/js/display/display-generator.js @@ -368,7 +368,7 @@ class DisplayGenerator { _createKanjiLink(character) { const node = document.createElement('a'); - node.className = 'kanji-link'; + node.className = 'expression-kanji-link'; this._setTextContent(node, character, 'ja'); return node; } diff --git a/ext/js/display/display.js b/ext/js/display/display.js index f5673737..ad9a25b4 100644 --- a/ext/js/display/display.js +++ b/ext/js/display/display.js @@ -1679,7 +1679,7 @@ class Display extends EventDispatcher { this._eventListeners.addEventListener(entry, 'click', this._onEntryClick.bind(this)); this._addMultipleEventListeners(entry, '.action-add-note', 'click', this._onNoteAdd.bind(this)); this._addMultipleEventListeners(entry, '.action-view-note', 'click', this._onNoteView.bind(this)); - this._addMultipleEventListeners(entry, '.kanji-link', 'click', this._onKanjiLookup.bind(this)); + this._addMultipleEventListeners(entry, '.expression-kanji-link', 'click', this._onKanjiLookup.bind(this)); this._addMultipleEventListeners(entry, '.debug-log-link', 'click', this._onDebugLogClick.bind(this)); this._addMultipleEventListeners(entry, '.tag-label', 'click', this._onTagClick.bind(this)); } |