aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-02-27 16:54:15 -0500
committerGitHub <noreply@github.com>2021-02-27 16:54:15 -0500
commitc4b2e83cb4291a3ad11d05a21a45701e3a407055 (patch)
treefc04f0219d927a6575e04618f2fa63a4083b7e96
parent8d3436fca3885ba648e2c6f6bad4fa11bd8cb8c4 (diff)
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
-rw-r--r--ext/css/display.css109
-rw-r--r--ext/display-templates.html52
-rw-r--r--ext/js/display/display-generator.js2
-rw-r--r--ext/js/display/display.js2
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));
}