improve styling of shortcut help (#12486)

* improve styling of shortcut help

* make them a bit more square

* updates expected ui file

2 files changed, 18 insertions, 23 deletions

diff --git a/plugins/CoreHome/javascripts/corehome.js b/plugins/CoreHome/javascripts/corehome.js
index 3ae506f777..4bf58fd56a 100755
--- a/plugins/CoreHome/javascripts/corehome.js
+++ b/plugins/CoreHome/javascripts/corehome.js
@@ -106,26 +106,18 @@ $( document ).ready(function() {
 
         jQuery.each(keys, function(i, key) {
             if (piwikHelper.shortcuts.hasOwnProperty(key)) {
-                list.append($('<dt />').text(key));
+                list.append($('<dt />').append($('<kbd />').text(key)));
                 list.append($('<dd />').text(piwikHelper.shortcuts[key]));
             }
         });
 
         var isMac = navigator.userAgent.indexOf('Mac OS X') != -1;
 
-        if (isMac) {
-            list.append($('<dt />').text(_pk_translate("CoreHome_MacPageUp")).css('width','auto'));
-        } else {
-            list.append($('<dt />').text(_pk_translate("CoreHome_HomeShortcut")).css('width','auto'));
-        }
+        list.append($('<dt />').append($('<kbd />').text(_pk_translate(isMac ? "CoreHome_MacPageUp" : "CoreHome_HomeShortcut"))));
 
         list.append($('<dd />').text(_pk_translate('CoreHome_PageUpShortcutDescription')));
 
-        if (isMac) {
-            list.append($('<dt />').text(_pk_translate("CoreHome_MacPageDown")).css('width','auto'));
-        } else {
-            list.append($('<dt />').text(_pk_translate("CoreHome_EndShortcut")).css('width','auto'));
-        }
+        list.append($('<dt />').append($('<kbd />').text(_pk_translate(isMac ? "CoreHome_MacPageDown" : "CoreHome_EndShortcut"))));
 
         list.append($('<dd />').text(_pk_translate('CoreHome_PageDownShortcutDescription')));
 
diff --git a/plugins/CoreHome/stylesheets/coreHome.less b/plugins/CoreHome/stylesheets/coreHome.less
index f4d17b2e84..bfad34d3bb 100644
--- a/plugins/CoreHome/stylesheets/coreHome.less
+++ b/plugins/CoreHome/stylesheets/coreHome.less
@@ -239,25 +239,28 @@ a.Piwik_Popover_Error_Back {
         font-size: 15px;
         overflow: hidden;
     }
-
     dt {
         clear: both;
         float: left;
-        width: 20px;
-        height: 20px;
-        text-align: center;
-        margin-top: 9px;
+        width: 60px;
+        text-align: right;
+        margin-top: 5px;
+        margin-bottom: 5px;
         margin-right: 20px;
-        font-weight: bolder;
-        border: 1px solid #000;
-        -webkit-border-radius: 3px;
-        -moz-border-radius: 3px;
-        border-radius: 3px;
-        box-sizing: border-box;
+        kbd {
+            display: inline-block;
+            font-weight: bolder;
+            border: 1px solid #000;
+            -webkit-border-radius: 3px;
+            -moz-border-radius: 3px;
+            border-radius: 3px;
+            box-sizing: border-box;
+            padding: 0 5px;
+        }
     }
 
     dd {
         float: left;
-        margin-top: 10px;
+        margin-top: 5px;
     }
 }
\ No newline at end of file