Styling

ext/bg/js/templates.js

@@ -19,37 +19,42 @@ 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 "    <dl class=\"kanji-info\">\n        <dt>Meanings</dt>\n"
+  return "        <dt>Meanings</dt>\n        <dd>\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";
+    + "        </dd>\n";
 },"2":function(container,depth0,helpers,partials,data) {
-    return "        <dd>"
+    var stack1;
+
+  return "            "
     + container.escapeExpression(container.lambda(depth0, depth0))
-    + "</dd>\n";
+    + ((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 : "")
-},"4":function(container,depth0,helpers,partials,data) {
+    + "\n";
+},"3":function(container,depth0,helpers,partials,data) {
+    return ", ";
+},"5":function(container,depth0,helpers,partials,data) {
     var stack1;
 
-  return "    <dl class=\"kanji-info\">\n        <dt>Kun</dt>\n"
+  return "        <dt>Kunyomi</dt>\n        <dd>\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";
+    + "        </dd>\n";
-},"6":function(container,depth0,helpers,partials,data) {
+},"7":function(container,depth0,helpers,partials,data) {
     var stack1;
 
-  return "    <dl class=\"kanji-info\">\n        <dt>On</dt>\n"
+  return "        <dt>Onyomi</dt>\n        <dd>\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";
+    + "        </dd>\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-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>\n\n    <dl class=\"kanji-info\">\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.kunyomi : depth0),{"name":"if","hash":{},"fn":container.program(4, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.kunyomi : depth0),{"name":"if","hash":{},"fn":container.program(5, 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 : "")
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.onyomi : depth0),{"name":"if","hash":{},"fn":container.program(7, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
-    + "</div>\n</div>\n";
+    + "    </dl>\n</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;

ext/fg/css/frame.css

@@ -43,18 +43,6 @@ body {
     display: inline-block;
 }
 
-.kanji-glyph {
-    font-family:      "KanjiStrokeOrders";
-    font-size:        140px;
-    line-height:      140px;
-    vertical-align:   top;
-}
-
-.kanji-info {
-    float: left;
-    display: inline-block;
-}
-
 .tag {
     border-radius:    0.25em;
     color:            #fff;
@@ -85,6 +73,17 @@ body {
     background-color: #0275d8;
 }
 
+.kanji-glyph {
+    font-family:      "KanjiStrokeOrders";
+    font-size:        140px;
+    line-height:      140px;
+    vertical-align:   top;
+}
+
+.kanji-info {
+    display: inline-block;
+}
+
 ol {
     padding-left: 1.2em;
 }
@@ -97,6 +96,23 @@ li span {
     color: #000;
 }
 
+dl {
+    padding: 0.5em;
+}
+
 dt {
+    float: left;
+    clear: left;
+    width: 100px;
+    text-align: right;
     font-weight: bold;
 }
+
+dt:after {
+    content: ":";
+}
+
+dd {
+    margin: 0 0 0 110px;
+    padding: 0 0 0.5em 0;
+}

util/tmpl/kanji.html

@@ -1,31 +1,33 @@
 <div class="definition">
     <div class="kanji-info kanji-glyph">{{character}}</div>
 
-    {{#if glossary}}
     <dl class="kanji-info">
+        {{#if glossary}}
         <dt>Meanings</dt>
+        <dd>
             {{#each glossary}}
-        <dd>{{.}}</dd>
+            {{.}}{{#unless @last}}, {{/unless}}
             {{/each}}
-    </dl>
+        </dd>
         {{/if}}
 
         {{#if kunyomi}}
-    <dl class="kanji-info">
+        <dt>Kunyomi</dt>
-        <dt>Kun</dt>
+        <dd>
             {{#each kunyomi}}
-        <dd>{{.}}</dd>
+            {{.}}{{#unless @last}}, {{/unless}}
             {{/each}}
-    </dl>
+        </dd>
         {{/if}}
 
         {{#if onyomi}}
-    <dl class="kanji-info">
+        <dt>Onyomi</dt>
-        <dt>On</dt>
+        <dd>
             {{#each onyomi}}
-        <dd>{{.}}</dd>
+            {{.}}{{#unless @last}}, {{/unless}}
             {{/each}}
-    </dl>
+        </dd>
         {{/if}}
+    </dl>
 </div>
 </div>