Organize display styles (#1452)
* Improve grouping for inflection and expression styles * kanji-link => expression-kanji-link * Remove unnecessary entry-header2 and entry-header3 * Move tag list into header for consistency with term definitions * Move styles * Add clear
This commit is contained in:
toasted-nutbread
GitHub
parent
8d3436fca3
commit
c4b2e83cb4
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user