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

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));
     }