diff options
-rw-r--r-- | ext/mixed/css/display-dark.css | 2 | ||||
-rw-r--r-- | ext/mixed/css/display-default.css | 2 | ||||
-rw-r--r-- | ext/mixed/css/display.css | 13 | ||||
-rw-r--r-- | ext/mixed/display-templates.html | 4 | ||||
-rw-r--r-- | ext/mixed/js/display-generator.js | 10 |
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; |