styling

9 files changed, 202 insertions, 65 deletions

diff --git a/ext/bg/js/database.js b/ext/bg/js/database.js
index b74a59a0..4d1f0fb5 100644
--- a/ext/bg/js/database.js
+++ b/ext/bg/js/database.js
@@ -78,7 +78,7 @@ class Database {
                     reading: row.reading,
                     tags: splitField(row.tags),
                     rules: splitField(row.rules),
-                    glossary: row.glossary,
+                    glossary: row.glossary.map(g => g.trim()),
                     score: row.score,
                     dictionary: row.dictionary,
                     id: row.id
@@ -108,7 +108,7 @@ class Database {
                     onyomi: splitField(row.onyomi),
                     kunyomi: splitField(row.kunyomi),
                     tags: splitField(row.tags),
-                    glossary: row.meanings,
+                    glossary: row.meanings.map(m => m.trim()),
                     dictionary: row.dictionary
                 });
             }
diff --git a/ext/bg/js/templates.js b/ext/bg/js/templates.js
index 5edf7be1..88af693d 100644
--- a/ext/bg/js/templates.js
+++ b/ext/bg/js/templates.js
@@ -59,19 +59,19 @@ templates['kanji.html'] = template({"1":function(container,depth0,helpers,partia
 },"8":function(container,depth0,helpers,partials,data) {
     var stack1;
 
-  return "        <ol>\n"
+  return "        <ol \"kanji-glossary-group\">\n"
     + ((stack1 = helpers.each.call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.glossary : depth0),{"name":"each","hash":{},"fn":container.program(9, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "        </ol>\n";
 },"9":function(container,depth0,helpers,partials,data) {
-    return "            <li><span>"
+    return "            <li><span class=\"kanji-glossary-item\">"
     + container.escapeExpression(container.lambda(depth0, depth0))
     + "</span></li>\n";
 },"11":function(container,depth0,helpers,partials,data) {
     var stack1;
 
-  return "        <p>"
+  return "        <div class=\"kanji-glossary-group kanji-glossary-item\">"
     + container.escapeExpression(container.lambda(((stack1 = (depth0 != null ? depth0.glossary : depth0)) != null ? stack1["0"] : stack1), depth0))
-    + "</p>\n";
+    + "</div>\n";
 },"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
     var stack1, helper, alias1=depth0 != null ? depth0 : {};
 
@@ -128,6 +128,124 @@ templates['model.html'] = template({"1":function(container,depth0,helpers,partia
     + ((stack1 = helpers.each.call(alias1,(depth0 != null ? depth0.markers : depth0),{"name":"each","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "                </ul>\n            </div>\n        </div>\n    </td>\n</tr>\n";
 },"useData":true});
+templates['term-grouped.html'] = template({"1":function(container,depth0,helpers,partials,data) {
+    var helper, alias1=depth0 != null ? depth0 : {}, alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "        <a href=\"#\" title=\"Add term as expression\" class=\"action-add-note pending disabled\" data-mode=\"term_kanji\" data-index=\""
+    + alias4(((helper = (helper = helpers.index || (data && data.index)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"index","hash":{},"data":data}) : helper)))
+    + "\"><img src=\"img/add_term_kanji.png\"></a>\n        <a href=\"#\" title=\"Add term as reading\" class=\"action-add-note pending disabled\" data-mode=\"term_kana\" data-index=\""
+    + alias4(((helper = (helper = helpers.index || (data && data.index)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"index","hash":{},"data":data}) : helper)))
+    + "\"><img src=\"img/add_term_kana.png\"></a>\n";
+},"3":function(container,depth0,helpers,partials,data) {
+    var helper;
+
+  return "        <a href=\"#\" title=\"Play audio\" class=\"action-play-audio\" data-index=\""
+    + container.escapeExpression(((helper = (helper = helpers.index || (data && data.index)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"index","hash":{},"data":data}) : helper)))
+    + "\"><img src=\"img/play_audio.png\"></a>\n";
+},"5":function(container,depth0,helpers,partials,data) {
+    var stack1, helper, options, alias1=depth0 != null ? depth0 : {}, alias2=helpers.helperMissing, alias3="function", buffer = 
+  "    <div class=\"term-expression\"><ruby>";
+  stack1 = ((helper = (helper = helpers.kanjiLinks || (depth0 != null ? depth0.kanjiLinks : depth0)) != null ? helper : alias2),(options={"name":"kanjiLinks","hash":{},"fn":container.program(6, data, 0),"inverse":container.noop,"data":data}),(typeof helper === alias3 ? helper.call(alias1,options) : helper));
+  if (!helpers.kanjiLinks) { stack1 = helpers.blockHelperMissing.call(depth0,stack1,options)}
+  if (stack1 != null) { buffer += stack1; }
+  return buffer + "<rt>"
+    + container.escapeExpression(((helper = (helper = helpers.reading || (depth0 != null ? depth0.reading : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"reading","hash":{},"data":data}) : helper)))
+    + "</rt></ruby></div>\n";
+},"6":function(container,depth0,helpers,partials,data) {
+    var helper;
+
+  return container.escapeExpression(((helper = (helper = helpers.expression || (depth0 != null ? depth0.expression : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"expression","hash":{},"data":data}) : helper)));
+},"8":function(container,depth0,helpers,partials,data) {
+    var stack1, helper, options, buffer = 
+  "    <div class=\"term-expression\">";
+  stack1 = ((helper = (helper = helpers.kanjiLinks || (depth0 != null ? depth0.kanjiLinks : depth0)) != null ? helper : helpers.helperMissing),(options={"name":"kanjiLinks","hash":{},"fn":container.program(6, data, 0),"inverse":container.noop,"data":data}),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},options) : helper));
+  if (!helpers.kanjiLinks) { stack1 = helpers.blockHelperMissing.call(depth0,stack1,options)}
+  if (stack1 != null) { buffer += stack1; }
+  return buffer + "</div>\n";
+},"10":function(container,depth0,helpers,partials,data) {
+    var stack1;
+
+  return "    <div class=\"term-reasons\">\n"
+    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.reasons : depth0),{"name":"each","hash":{},"fn":container.program(11, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "    </div>\n";
+},"11":function(container,depth0,helpers,partials,data) {
+    var stack1;
+
+  return "        <span class=\"reasons\">"
+    + container.escapeExpression(container.lambda(depth0, depth0))
+    + "</span> "
+    + ((stack1 = helpers.unless.call(depth0 != null ? depth0 : {},(data && data.last),{"name":"unless","hash":{},"fn":container.program(12, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "\n";
+},"12":function(container,depth0,helpers,partials,data) {
+    return "&laquo;";
+},"14":function(container,depth0,helpers,partials,data) {
+    var stack1, alias1=depth0 != null ? depth0 : {};
+
+  return "            <li>\n"
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.tags : depth0),{"name":"if","hash":{},"fn":container.program(15, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers["if"].call(alias1,((stack1 = (depth0 != null ? depth0.glossary : depth0)) != null ? stack1["1"] : stack1),{"name":"if","hash":{},"fn":container.program(18, data, 0),"inverse":container.program(21, data, 0),"data":data})) != null ? stack1 : "")
+    + "            </li>\n";
+},"15":function(container,depth0,helpers,partials,data) {
+    var stack1;
+
+  return "                <div class=\"term-tags\">\n"
+    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.tags : depth0),{"name":"each","hash":{},"fn":container.program(16, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "                </div>\n";
+},"16":function(container,depth0,helpers,partials,data) {
+    var helper, alias1=depth0 != null ? depth0 : {}, alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "                    <span class=\"tag tag-"
+    + alias4(((helper = (helper = helpers.category || (depth0 != null ? depth0.category : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"category","hash":{},"data":data}) : helper)))
+    + "\" title=\""
+    + alias4(((helper = (helper = helpers.notes || (depth0 != null ? depth0.notes : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"notes","hash":{},"data":data}) : helper)))
+    + "\">"
+    + alias4(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data}) : helper)))
+    + "</span>\n";
+},"18":function(container,depth0,helpers,partials,data) {
+    var stack1;
+
+  return "                <ul class=\"term-glossary-group\">\n"
+    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.glossary : depth0),{"name":"each","hash":{},"fn":container.program(19, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "                </ul>\n";
+},"19":function(container,depth0,helpers,partials,data) {
+    return "                    <li><span class=\"term-glossary-item\">"
+    + container.escapeExpression(container.lambda(depth0, depth0))
+    + "</span></li>\n";
+},"21":function(container,depth0,helpers,partials,data) {
+    var stack1;
+
+  return "                <div class=\"term-glossary-group term-glossary-item\">"
+    + container.escapeExpression(container.lambda(((stack1 = (depth0 != null ? depth0.glossary : depth0)) != null ? stack1["0"] : stack1), depth0))
+    + "</div>\n";
+},"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
+    var stack1, alias1=depth0 != null ? depth0 : {};
+
+  return "<div class=\"term-definition\">\n    <div class=\"action-bar\">\n"
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.addable : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.playback : depth0),{"name":"if","hash":{},"fn":container.program(3, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "    </div>\n\n"
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.reading : depth0),{"name":"if","hash":{},"fn":container.program(5, data, 0),"inverse":container.program(8, data, 0),"data":data})) != null ? stack1 : "")
+    + "\n"
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.reasons : depth0),{"name":"if","hash":{},"fn":container.program(10, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "\n    <div class=\"term-glossary\">\n        <ol>\n"
+    + ((stack1 = helpers.each.call(alias1,(depth0 != null ? depth0.definitions : depth0),{"name":"each","hash":{},"fn":container.program(14, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "        </ol>\n    </div>\n</div>\n";
+},"useData":true});
+templates['term-grouped-list.html'] = template({"1":function(container,depth0,helpers,partials,data,blockParams,depths) {
+    var stack1;
+
+  return ((stack1 = helpers.each.call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.definitions : depth0),{"name":"each","hash":{},"fn":container.program(2, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "");
+},"2":function(container,depth0,helpers,partials,data,blockParams,depths) {
+    var stack1;
+
+  return ((stack1 = container.invokePartial(partials["term-grouped.html"],depth0,{"name":"term-grouped.html","hash":{"playback":(depths[1] != null ? depths[1].playback : depths[1]),"addable":(depths[1] != null ? depths[1].addable : depths[1])},"data":data,"indent":"    ","helpers":helpers,"partials":partials,"decorators":container.decorators})) != null ? stack1 : "");
+},"4":function(container,depth0,helpers,partials,data) {
+    return "    <p>No results found</p>\n";
+},"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data,blockParams,depths) {
+    var stack1;
+
+  return ((stack1 = helpers["if"].call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.definitions : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0, blockParams, depths),"inverse":container.program(4, data, 0, blockParams, depths),"data":data})) != null ? stack1 : "");
+},"usePartial":true,"useData":true,"useDepths":true});
 templates['term.html'] = template({"1":function(container,depth0,helpers,partials,data) {
     var helper, alias1=depth0 != null ? depth0 : {}, alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
 
@@ -189,7 +307,7 @@ templates['term.html'] = template({"1":function(container,depth0,helpers,partial
     + ((stack1 = helpers.each.call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.glossary : depth0),{"name":"each","hash":{},"fn":container.program(16, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "        </ol>\n";
 },"16":function(container,depth0,helpers,partials,data) {
-    return "            <li><span>"
+    return "            <li><span class=\"term-glossary-item\">"
     + container.escapeExpression(container.lambda(depth0, depth0))
     + "</span></li>\n";
 },"18":function(container,depth0,helpers,partials,data) {
diff --git a/ext/bg/js/util.js b/ext/bg/js/util.js
index 19d08a7c..f9932a61 100644
--- a/ext/bg/js/util.js
+++ b/ext/bg/js/util.js
@@ -93,8 +93,6 @@ function undupeTermDefs(definitions) {
 
 function groupTermDefs(definitions) {
     const groups = {};
-    let groupCount = 0;
-
     for (const definition of definitions) {
         const key = [definition.source, definition.expression].concat(definition.reasons);
         if (definition.reading) {
@@ -106,50 +104,20 @@ function groupTermDefs(definitions) {
             group.push(definition);
         } else {
             groups[key] = [definition];
-            ++groupCount;
         }
     }
 
     const results = [];
     for (const key in groups) {
-        const groupDefs = sortTermDefs(groups[key]);
-
-        const tagCounts = {};
-        for (const tag of groupDefs.map(def => def.tags)) {
-            const count = tagCounts[tag.name] || 0;
-            tagCounts[tag.name] = count + 1;
-        }
-
-        const tagsGlobal = [];
-        const tagsGlobalAdded = {};
-        let maxScore = Number.MIN_SAFE_INTEGER;
-
-        for (const definition of groupDefs) {
-            const tagsLocal = [];
-            for (const tag of definition.tags) {
-                if (tagCounts[tag.name] === groupCount) {
-                    if (!tagsGlobalAdded[tag.name]) {
-                        tagsGlobalAdded[tag.name] = true;
-                        tagsGlobal.push(tag);
-                    }
-                } else {
-                    tagsLocal.push(tag);
-                }
-            }
-
-            definition.tags = tagsLocal;
-            maxScore = Math.max(maxScore, definition.score);
-        }
-
+        const groupDefs = groups[key];
         const firstDef = groupDefs[0];
         results.push({
             definitions: groupDefs,
             expression: firstDef.expression,
             reading: firstDef.reading,
             reasons: firstDef.reasons,
-            score: maxScore,
+            score: groupDefs.reduce((x, y) => x > y ? x : y, Number.MIN_SAFE_INTEGER),
             source: firstDef.source,
-            tags: sortTags(tagsGlobal),
         });
     }
 
diff --git a/ext/fg/css/frame.css b/ext/fg/css/frame.css
index f270fa54..f07358aa 100644
--- a/ext/fg/css/frame.css
+++ b/ext/fg/css/frame.css
@@ -129,11 +129,7 @@ body {
     display: inline-block;
 }
 
-.term-glossary {
-    font-family: vl-gothic-regular;
-}
-
-.term-glossary ol {
+.term-glossary ol, .term-glossary ul {
     padding-left: 1.4em;
 }
 
@@ -141,13 +137,14 @@ body {
     color: #777;
 }
 
-.term-glossary li span {
-    color:       #000;
-    overflow-x:  auto;
-    white-space: pre;
+.term-glossary-group {
+    padding-bottom: 0.7em;
+    padding-top:    0.7em;
 }
 
-.term-glossary p {
+.term-glossary-item {
+    color:       #000;
+    font-family: vl-gothic-regular;
     overflow-x:  auto;
     white-space: pre;
 }
@@ -177,10 +174,6 @@ body {
     font-family: vl-gothic-regular;
 }
 
-.kanji-glossary {
-    font-family: vl-gothic-regular;
-}
-
 .kanji-glossary ol {
     padding-left: 1.4em;
 }
@@ -189,13 +182,14 @@ body {
     color: #777;
 }
 
-.kanji-glossary li span {
-    color:       #000;
-    overflow-x:  auto;
-    white-space: pre;
+.kanji-glossary-group {
+    padding-bottom: 0.7em;
+    padding-top:    0.7em;
 }
 
-.kanji-glossary p {
+.kanji-glossary-item {
+    color:       #000;
+    font-family: vl-gothic-regular;
     overflow-x:  auto;
     white-space: pre;
 }
diff --git a/ext/fg/js/frame.js b/ext/fg/js/frame.js
index fc32a718..ad1c32e8 100644
--- a/ext/fg/js/frame.js
+++ b/ext/fg/js/frame.js
@@ -73,7 +73,7 @@ class Frame {
         this.showSpinner(false);
         window.scrollTo(0, 0);
 
-        renderText(context, 'term-list.html').then(content => {
+        renderText(context, 'term-grouped-list.html').then(content => {
             $('.content').html(content);
             $('.action-add-note').click(this.onAddNote.bind(this));
 
diff --git a/tmpl/kanji.html b/tmpl/kanji.html
index eda8b8e4..a14fff78 100644
--- a/tmpl/kanji.html
+++ b/tmpl/kanji.html
@@ -36,13 +36,13 @@
 
     <div class="kanji-glossary">
         {{#if glossary.[1]}}
-        <ol>
+        <ol "kanji-glossary-group">
             {{#each glossary}}
-            <li><span>{{.}}</span></li>
+            <li><span class="kanji-glossary-item">{{.}}</span></li>
             {{/each}}
         </ol>
         {{else}}
-        <p>{{glossary.[0]}}</p>
+        <div class="kanji-glossary-group kanji-glossary-item">{{glossary.[0]}}</div>
         {{/if}}
     </div>
 </div>
diff --git a/tmpl/term-grouped-list.html b/tmpl/term-grouped-list.html
new file mode 100644
index 00000000..6156ab7b
--- /dev/null
+++ b/tmpl/term-grouped-list.html
@@ -0,0 +1,7 @@
+{{#if definitions}}
+    {{#each definitions}}
+    {{> term-grouped.html addable=../addable playback=../playback}}
+    {{/each}}
+{{else}}
+    <p>No results found</p>
+{{/if}}
diff --git a/tmpl/term-grouped.html b/tmpl/term-grouped.html
new file mode 100644
index 00000000..ac15a126
--- /dev/null
+++ b/tmpl/term-grouped.html
@@ -0,0 +1,50 @@
+<div class="term-definition">
+    <div class="action-bar">
+        {{#if addable}}
+        <a href="#" title="Add term as expression" class="action-add-note pending disabled" data-mode="term_kanji" data-index="{{@index}}"><img src="img/add_term_kanji.png"></a>
+        <a href="#" title="Add term as reading" class="action-add-note pending disabled" data-mode="term_kana" data-index="{{@index}}"><img src="img/add_term_kana.png"></a>
+        {{/if}}
+        {{#if playback}}
+        <a href="#" title="Play audio" class="action-play-audio" data-index="{{@index}}"><img src="img/play_audio.png"></a>
+        {{/if}}
+    </div>
+
+    {{#if reading}}
+    <div class="term-expression"><ruby>{{#kanjiLinks}}{{expression}}{{/kanjiLinks}}<rt>{{reading}}</rt></ruby></div>
+    {{else}}
+    <div class="term-expression">{{#kanjiLinks}}{{expression}}{{/kanjiLinks}}</div>
+    {{/if}}
+
+    {{#if reasons}}
+    <div class="term-reasons">
+        {{#each reasons}}
+        <span class="reasons">{{.}}</span> {{#unless @last}}&laquo;{{/unless}}
+        {{/each}}
+    </div>
+    {{/if}}
+
+    <div class="term-glossary">
+        <ol>
+            {{#each definitions}}
+            <li>
+                {{#if tags}}
+                <div class="term-tags">
+                    {{#each tags}}
+                    <span class="tag tag-{{category}}" title="{{notes}}">{{name}}</span>
+                    {{/each}}
+                </div>
+                {{/if}}
+                {{#if glossary.[1]}}
+                <ul class="term-glossary-group">
+                    {{#each glossary}}
+                    <li><span class="term-glossary-item">{{.}}</span></li>
+                    {{/each}}
+                </ul>
+                {{else}}
+                <div class="term-glossary-group term-glossary-item">{{glossary.[0]}}</div>
+                {{/if}}
+            </li>
+            {{/each}}
+        </ol>
+    </div>
+</div>
diff --git a/tmpl/term.html b/tmpl/term.html
index b4d72d4b..a6ae2d26 100644
--- a/tmpl/term.html
+++ b/tmpl/term.html
@@ -31,7 +31,7 @@
         {{#if glossary.[1]}}
         <ol>
             {{#each glossary}}
-            <li><span>{{.}}</span></li>
+            <li><span class="term-glossary-item">{{.}}</span></li>
             {{/each}}
         </ol>
         {{else}}