ui minor fixes for shortcut.js

openstreetmap · Feb 9, 2017 · fc39e96 · fc39e96
1 parent 1ef338a
commit fc39e96
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/css/app.css b/css/app.css
@@ -2832,6 +2832,12 @@ img.tile-removing {
     border-radius: 4px;
 }
 
+.modal-shortcuts .shortcut-tab {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+
 .modal-shortcuts .tab:hover {
     background-color: #ccc;
 }
@@ -2840,19 +2846,25 @@ img.tile-removing {
     color: #7092FF;
 }
 
+.modal-shortcuts .shortcut-row {
+    display: flex;
+    flex-direction: row;
+}
+
 .modal-shortcuts .kbd-row {
-    display: inline-block;
     padding-right: 10px;
     color: #767676;
     text-align: right;
     white-space: nowrap;
-    padding-bottom: 3px;
+    padding-bottom: 5px;
+    width: 50%;
 
 } 
 .modal-shortcuts .shortcut-desc {
-    display: inline-block;
-    padding-bottom: 3px;
+    padding-bottom: 5px;
+    width: 50%;
 }
+
 .modal-shortcuts kbd {
     display: inline-block;
     text-align: right;    

diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js
@@ -102,18 +102,18 @@ export function uiShortcuts() {
 
             var shortcutsRow = row
                 .append('div')
-                .attr('class', 'kbd-row col6');
+                .attr('class', 'kbd-row');
 
             shortcutsRow
                 .selectAll('kbd')
                 .data(function (d) { return d.shortcut; })
                 .enter()
                 .append('kbd')
-                .text(function (d) { return d; });
+                .text(function (d) { return uiCmd(d); });
 
             row
                 .append('div')
-                .attr('class', 'shortcut-desc ')
+                .attr('class', 'shortcut-desc')
                 .text(function (d) { return t(d.key); });
 
             shortcuts = shortcuts
@@ -122,7 +122,7 @@ export function uiShortcuts() {
             // Update
             wrapper.selectAll('.shortcut-tab')
                 .style('display', function (d, i) {
-                    return i === activeTab ? 'block' : 'none';
+                    return i === activeTab ? 'flex' : 'none';
                 });
         }