Add support for different sections for term content

5 files changed, 28 insertions, 3 deletions

diff --git a/ext/mixed/css/display-dark.css b/ext/mixed/css/display-dark.css
index c9cd9f90..908d9cc5 100644
--- a/ext/mixed/css/display-dark.css
+++ b/ext/mixed/css/display-dark.css
@@ -19,6 +19,8 @@
 
 body { background-color: #1e1e1e; color: #d4d4d4; }
 
+h2 { border-bottom-color: #2f2f2f; }
+
 .navigation-header {
     background-color: #1e1e1e;
     border-bottom-color: #2f2f2f;
diff --git a/ext/mixed/css/display-default.css b/ext/mixed/css/display-default.css
index 6eee43c4..e43e3742 100644
--- a/ext/mixed/css/display-default.css
+++ b/ext/mixed/css/display-default.css
@@ -19,6 +19,8 @@
 
 body { background-color: #ffffff; color: #333333; }
 
+h2 { border-bottom-color: #eeeeee; }
+
 .navigation-header {
     background-color: #ffffff;
     border-bottom-color: #eeeeee;
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 688a357c..51015057 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -65,6 +65,14 @@ ol, ul {
     height: 2.28571428em; /* 14px => 32px */
 }
 
+h2 {
+    font-size: 1.25em;
+    font-weight: normal;
+    margin: 0.25em 0 0;
+    border-bottom-width: 0.05714285714285714em; /* 14px * 1.25em => 1px */
+    border-bottom-style: solid;
+}
+
 /*
  * Navigation
  */
@@ -422,6 +430,11 @@ button.action-button {
     display: inline;
 }
 
+.term-entry-body[data-section-count="0"] .term-entry-body-section-header,
+.term-entry-body[data-section-count="1"] .term-entry-body-section-header {
+    display: none;
+}
+
 
 /*
  * Kanji
diff --git a/ext/mixed/display-templates.html b/ext/mixed/display-templates.html
index 7ae51a62..837245cf 100644
--- a/ext/mixed/display-templates.html
+++ b/ext/mixed/display-templates.html
@@ -17,7 +17,9 @@
         </div>
         <div class="term-special-tags"><div class="frequencies tag-list"></div></div>
     </div>
-    <div class="term-definition-container"><ol class="term-definition-list"></ol></div>
+    <div class="term-entry-body">
+        <div class="term-entry-body-section term-pitch-accent-container"><h2 class="term-entry-body-section-header term-pitch-accent-header">Pitch Accents</h2><ol class="term-entry-body-section-content term-pitch-accent-group-list"></ol></div>
+    </div>
     <pre class="debug-info"></pre>
 </div></template>
 <template id="term-expression-template"><div class="term-expression"><span class="term-expression-text source-text"></span><div class="term-expression-details">
diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js
index d88b8648..e9cdd998 100644
--- a/ext/mixed/js/display-generator.js
+++ b/ext/mixed/js/display-generator.js
@@ -43,11 +43,17 @@ class DisplayGenerator {
 
         const expressionMulti = Array.isArray(details.expressions);
         const definitionMulti = Array.isArray(details.definitions);
+        const expressionCount = expressionMulti ? details.expressions.length : 1;
+        const definitionCount = definitionMulti ? details.definitions.length : 1;
 
         node.dataset.expressionMulti = `${expressionMulti}`;
         node.dataset.definitionMulti = `${definitionMulti}`;
-        node.dataset.expressionCount = `${expressionMulti ? details.expressions.length : 1}`;
-        node.dataset.definitionCount = `${definitionMulti ? details.definitions.length : 1}`;
+        node.dataset.expressionCount = `${expressionCount}`;
+        node.dataset.definitionCount = `${definitionCount}`;
+
+        bodyContainer.dataset.sectionCount = `${
+            (definitionCount > 0 ? 1 : 0)
+        }`;
 
         const termTags = details.termTags;
         let expressions = details.expressions;