Updating styles and templates

ext/bg/js/templates.js

@@ -16,24 +16,29 @@ templates['defs.html'] = template({"1":function(container,depth0,helpers,partial
   return ((stack1 = helpers.each.call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.defs : depth0),{"name":"each","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "");
 },"usePartial":true,"useData":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;
+
+  return "<div class=\"yomichan-def-expression\"><ruby>"
+    + alias4(((helper = (helper = helpers.expression || (depth0 != null ? depth0.expression : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"expression","hash":{},"data":data}) : helper)))
+    + "<rt>"
+    + alias4(((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";
+},"3":function(container,depth0,helpers,partials,data) {
     var helper;
 
-  return "<div class=\"yomichan-def-reading\">"
-    + container.escapeExpression(((helper = (helper = helpers.reading || (depth0 != null ? depth0.reading : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"reading","hash":{},"data":data}) : helper)))
-    + "</div>";
-},"3":function(container,depth0,helpers,partials,data) {
+  return "<div class=\"yomichan-def-expression\">"
+    + 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)))
+    + "</div>\n";
+},"5":function(container,depth0,helpers,partials,data) {
     return "        <li>"
     + container.escapeExpression(container.lambda(depth0, depth0))
     + "</li>\n";
 },"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    var stack1, helper, alias1=depth0 != null ? depth0 : {};
+    var stack1, alias1=depth0 != null ? depth0 : {};
 
-  return "<div class=\"yomichan-def-expression\">"
-    + container.escapeExpression(((helper = (helper = helpers.expression || (depth0 != null ? depth0.expression : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(alias1,{"name":"expression","hash":{},"data":data}) : helper)))
-    + "</div>\n"
-    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.reading : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+  return ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.reading : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.program(3, data, 0),"data":data})) != null ? stack1 : "")
     + "\n<div class=\"yomichan-def-glossary\">\n    <ol>\n"
-    + ((stack1 = helpers.each.call(alias1,(depth0 != null ? depth0.glossary : depth0),{"name":"each","hash":{},"fn":container.program(3, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers.each.call(alias1,(depth0 != null ? depth0.glossary : depth0),{"name":"each","hash":{},"fn":container.program(5, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "    </ol>\n</div>\n";
 },"useData":true});
 })();

ext/fg/css/client.css

@@ -35,17 +35,11 @@
 }
 
 .yomichan-def-expression {
-    float:       left;
     font-family: serif;
-    font-size:   16pt;
-}
-
-.yomichan-def-reading {
-    float:       right;
-    font-family: serif;
-    font-size:   16pt;
+    font-size:   18pt;
 }
 
 .yomichan-def-glossary {
-    clear: both;
+    clear:     both;
+    font-size: 12pt;
 }

util/tmpl/term.html

@@ -1,5 +1,9 @@
+{{#if reading}}
+<div class="yomichan-def-expression"><ruby>{{expression}}<rt>{{reading}}</rt></ruby></div>
+{{else}}
 <div class="yomichan-def-expression">{{expression}}</div>
-{{#if reading}}<div class="yomichan-def-reading">{{reading}}</div>{{/if}}
+{{/if}}
+
 <div class="yomichan-def-glossary">
     <ol>
         {{#each glossary}}