From c8d0a8624f4925f8227be67da5f40d888e9e5756 Mon Sep 17 00:00:00 2001
From: Alex Yatskov <alex@foosoft.net>
Date: Sun, 27 Mar 2016 20:15:23 -0700
Subject: [PATCH] Improved styling

---
 ext/bg/templates.js |  2 +-
 ext/client.css      | 15 +++++++++++++++
 ext/client.js       |  2 +-
 util/tmpl/defs.html |  8 +++++---
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/ext/bg/templates.js b/ext/bg/templates.js
index 72c9653b..41d4adc0 100644
--- a/ext/bg/templates.js
+++ b/ext/bg/templates.js
@@ -1 +1 @@
-!function(){var a=Handlebars.template,n=Handlebars.templates=Handlebars.templates||{};n["defs.html"]=a({1:function(a,n,s,e,l){var r,i=null!=n?n:{},o=s.helperMissing,p="function",t=a.escapeExpression;return'<div class="yomichan-def">\n    <span class="yomichan-def-expression">'+t((r=null!=(r=s.expression||(null!=n?n.expression:n))?r:o,typeof r===p?r.call(i,{name:"expression",hash:{},data:l}):r))+'</span>\n    <span class="yomichan-def-reading">'+t((r=null!=(r=s.reading||(null!=n?n.reading:n))?r:o,typeof r===p?r.call(i,{name:"reading",hash:{},data:l}):r))+'</span>\n    <span class="yomichan-def-glossary">'+t((r=null!=(r=s.glossary||(null!=n?n.glossary:n))?r:o,typeof r===p?r.call(i,{name:"glossary",hash:{},data:l}):r))+"</span>\n</div>\n"},compiler:[7,">= 4.0.0"],main:function(a,n,s,e,l){var r;return null!=(r=s.each.call(null!=n?n:{},null!=n?n.defs:n,{name:"each",hash:{},fn:a.program(1,l,0),inverse:a.noop,data:l}))?r:""},useData:!0})}();
\ No newline at end of file
+!function(){var n=Handlebars.template,a=Handlebars.templates=Handlebars.templates||{};a["defs.html"]=n({1:function(n,a,e,l,s){var i,r,o=null!=a?a:{},d=e.helperMissing,t="function",c=n.escapeExpression;return'<div class="yomichan-def">\n    <div class="yomichan-def-expression">'+c((r=null!=(r=e.expression||(null!=a?a.expression:a))?r:d,typeof r===t?r.call(o,{name:"expression",hash:{},data:s}):r))+"</div>\n"+(null!=(i=e["if"].call(o,null!=a?a.reading:a,{name:"if",hash:{},fn:n.program(2,s,0),inverse:n.noop,data:s}))?i:"")+'    <div class="yomichan-def-glossary">'+c((r=null!=(r=e.glossary||(null!=a?a.glossary:a))?r:d,typeof r===t?r.call(o,{name:"glossary",hash:{},data:s}):r))+"</div>\n</div>\n"},2:function(n,a,e,l,s){var i;return'    <div class="yomichan-def-reading">'+n.escapeExpression((i=null!=(i=e.reading||(null!=a?a.reading:a))?i:e.helperMissing,"function"==typeof i?i.call(null!=a?a:{},{name:"reading",hash:{},data:s}):i))+"</div>\n"},compiler:[7,">= 4.0.0"],main:function(n,a,e,l,s){var i;return null!=(i=e.each.call(null!=a?a:{},null!=a?a.defs:a,{name:"each",hash:{},fn:n.program(1,s,0),inverse:n.noop,data:s}))?i:""},useData:!0})}();
\ No newline at end of file
diff --git a/ext/client.css b/ext/client.css
index 93866f03..c8f58a37 100644
--- a/ext/client.css
+++ b/ext/client.css
@@ -20,9 +20,24 @@
     background-color: #fff;
     border:           1px solid #999;
     box-shadow:       0 0 10px rgba(0, 0, 0, .5);
+    max-width:        50em;
     padding:          10px;
     pointer-events:   none;
     position:         fixed;
     width:            auto;
     z-index:          64;
 }
+
+.yomichan-def-expression {
+    float:       left;
+    font-weight: bold;
+}
+
+.yomichan-def-reading {
+    float:       right;
+    font-weight: bold;
+}
+
+.yomichan-def-glossary {
+    clear: both;
+}
diff --git a/ext/client.js b/ext/client.js
index 6055dc26..95308eec 100644
--- a/ext/client.js
+++ b/ext/client.js
@@ -32,7 +32,7 @@ class Client {
     }
 
     onMouseMove(e) {
-        if (!this.enabled) {
+        if (!this.enabled || !e.shiftKey) {
             return;
         }
 
diff --git a/util/tmpl/defs.html b/util/tmpl/defs.html
index fe40dfe3..553a8c62 100644
--- a/util/tmpl/defs.html
+++ b/util/tmpl/defs.html
@@ -1,7 +1,9 @@
 {{#each defs}}
 <div class="yomichan-def">
-    <span class="yomichan-def-expression">{{expression}}</span>
-    <span class="yomichan-def-reading">{{reading}}</span>
-    <span class="yomichan-def-glossary">{{glossary}}</span>
+    <div class="yomichan-def-expression">{{expression}}</div>
+    {{#if reading}}
+    <div class="yomichan-def-reading">{{reading}}</div>
+    {{/if}}
+    <div class="yomichan-def-glossary">{{glossary}}</div>
 </div>
 {{/each}}