From f466fe721885877d473e66d22caef060919524ea Mon Sep 17 00:00:00 2001
From: Alex Yatskov <alex@foosoft.net>
Date: Sun, 24 Apr 2016 20:50:27 -0700
Subject: [PATCH] Styling work

---
 ext/bg/js/templates.js | 43 ++++++++++++++++++------------------
 ext/fg/css/frame.css   | 10 ++++-----
 ext/fg/js/client.js    |  4 +++-
 util/tmpl/kanji.html   | 50 ++++++++++++++++++++++--------------------
 4 files changed, 54 insertions(+), 53 deletions(-)

diff --git a/ext/bg/js/templates.js b/ext/bg/js/templates.js
index 08708535..092d4e64 100644
--- a/ext/bg/js/templates.js
+++ b/ext/bg/js/templates.js
@@ -19,38 +19,37 @@ templates['header.html'] = template({"compiler":[7,">= 4.0.0"],"main":function(c
 templates['kanji.html'] = template({"1":function(container,depth0,helpers,partials,data) {
     var stack1;
 
-  return "            <dt>Kunyomi:</dt>\n"
-    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.kunyomi : depth0),{"name":"each","hash":{},"fn":container.program(2, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "");
+  return "    <dl class=\"kanji-info\">\n        <dt>Meanings</dt>\n"
+    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.glossary : depth0),{"name":"each","hash":{},"fn":container.program(2, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "    </dl>\n";
 },"2":function(container,depth0,helpers,partials,data) {
-    var stack1;
-
-  return "            <dd>"
+    return "        <dd>"
     + container.escapeExpression(container.lambda(depth0, depth0))
-    + ((stack1 = helpers.unless.call(depth0 != null ? depth0 : {},(data && data.last),{"name":"unless","hash":{},"fn":container.program(3, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "</dd>\n";
-},"3":function(container,depth0,helpers,partials,data) {
-    return ", ";
-},"5":function(container,depth0,helpers,partials,data) {
+},"4":function(container,depth0,helpers,partials,data) {
     var stack1;
 
-  return "            <dt>Onyomi:</dt>\n"
-    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.onyomi : depth0),{"name":"each","hash":{},"fn":container.program(2, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "");
-},"7":function(container,depth0,helpers,partials,data) {
-    return "            <li><span>"
-    + container.escapeExpression(container.lambda(depth0, depth0))
-    + "</span></li>\n";
+  return "    <dl class=\"kanji-info\">\n        <dt>Kun</dt>\n"
+    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.kunyomi : depth0),{"name":"each","hash":{},"fn":container.program(2, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "    </dl>\n";
+},"6":function(container,depth0,helpers,partials,data) {
+    var stack1;
+
+  return "    <dl class=\"kanji-info\">\n        <dt>On</dt>\n"
+    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.onyomi : depth0),{"name":"each","hash":{},"fn":container.program(2, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "    </dl>\n";
 },"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
     var stack1, helper, alias1=depth0 != null ? depth0 : {};
 
-  return "<div class=\"definition\">\n    <div class=\"kanji\">"
+  return "<div class=\"definition\">\n    <div class=\"kanji-info kanji-glyph\">"
     + container.escapeExpression(((helper = (helper = helpers.character || (depth0 != null ? depth0.character : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(alias1,{"name":"character","hash":{},"data":data}) : helper)))
-    + "</div>\n\n    <div class=\"readings\">\n        <dl>\n"
-    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.kunyomi : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "</div>\n\n"
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.glossary : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "\n"
-    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.onyomi : depth0),{"name":"if","hash":{},"fn":container.program(5, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
-    + "        </dl>\n    </div>\n\n    <div class=\"glossary\">\n        <ol>\n"
-    + ((stack1 = helpers.each.call(alias1,(depth0 != null ? depth0.glossary : depth0),{"name":"each","hash":{},"fn":container.program(7, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
-    + "        </ol>\n    </div>\n</div>\n";
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.kunyomi : depth0),{"name":"if","hash":{},"fn":container.program(4, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "\n"
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.onyomi : depth0),{"name":"if","hash":{},"fn":container.program(6, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "</div>\n</div>\n";
 },"useData":true});
 templates['kanji-link.html'] = template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
     var helper;
diff --git a/ext/fg/css/frame.css b/ext/fg/css/frame.css
index ace8aae1..832e189a 100644
--- a/ext/fg/css/frame.css
+++ b/ext/fg/css/frame.css
@@ -43,18 +43,16 @@ body {
     display: inline-block;
 }
 
-.kanji {
-    background-color: #eee;
-    display:          inline-block;
+.kanji-glyph {
     font-family:      "KanjiStrokeOrders";
     font-size:        140px;
     line-height:      140px;
     vertical-align:   top;
 }
 
-.readings {
-    display:        inline-block;
-    vertical-align: top;
+.kanji-info {
+    float: left;
+    display: inline-block;
 }
 
 .tag {
diff --git a/ext/fg/js/client.js b/ext/fg/js/client.js
index 2355cf81..fdb46acb 100644
--- a/ext/fg/js/client.js
+++ b/ext/fg/js/client.js
@@ -82,7 +82,9 @@ class Client {
             displayKanji: this.displayKanji
         };
 
-        handlers[action].call(this, data);
+        if (handlers.hasOwnProperty(action)) {
+            handlers[action].call(this, data);
+        }
     }
 
     searchAt(point) {
diff --git a/util/tmpl/kanji.html b/util/tmpl/kanji.html
index d9e7ffcf..603872ae 100644
--- a/util/tmpl/kanji.html
+++ b/util/tmpl/kanji.html
@@ -1,29 +1,31 @@
 <div class="definition">
-    <div class="kanji">{{character}}</div>
+    <div class="kanji-info kanji-glyph">{{character}}</div>
 
-    <div class="readings">
-        <dl>
-            {{#if kunyomi}}
-            <dt>Kunyomi:</dt>
-            {{#each kunyomi}}
-            <dd>{{.}}{{#unless @last}}, {{/unless}}</dd>
-            {{/each}}
-            {{/if}}
+    {{#if glossary}}
+    <dl class="kanji-info">
+        <dt>Meanings</dt>
+        {{#each glossary}}
+        <dd>{{.}}</dd>
+        {{/each}}
+    </dl>
+    {{/if}}
 
-            {{#if onyomi}}
-            <dt>Onyomi:</dt>
-            {{#each onyomi}}
-            <dd>{{.}}{{#unless @last}}, {{/unless}}</dd>
-            {{/each}}
-            {{/if}}
-        </dl>
-    </div>
+    {{#if kunyomi}}
+    <dl class="kanji-info">
+        <dt>Kun</dt>
+        {{#each kunyomi}}
+        <dd>{{.}}</dd>
+        {{/each}}
+    </dl>
+    {{/if}}
 
-    <div class="glossary">
-        <ol>
-            {{#each glossary}}
-            <li><span>{{.}}</span></li>
-            {{/each}}
-        </ol>
-    </div>
+    {{#if onyomi}}
+    <dl class="kanji-info">
+        <dt>On</dt>
+        {{#each onyomi}}
+        <dd>{{.}}</dd>
+        {{/each}}
+    </dl>
+    {{/if}}
+</div>
 </div>