From 35d1d6b463c4a91ab06838896f5531f759696da2 Mon Sep 17 00:00:00 2001
From: Maxime Quandalle <maxime@quandalle.com>
Date: Fri, 28 Aug 2015 00:32:08 +0200
Subject: Display keyboard shortcuts on a modal

Fixes #241
---
 client/components/main/keyboardShortcuts.styl     | 25 +++++++++++++++++++++++
 client/components/main/keyboardShortcuts.tpl.jade |  9 +++++++-
 client/components/main/layouts.styl               |  5 ++++-
 3 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 client/components/main/keyboardShortcuts.styl

(limited to 'client/components/main')

diff --git a/client/components/main/keyboardShortcuts.styl b/client/components/main/keyboardShortcuts.styl
new file mode 100644
index 00000000..42e0637b
--- /dev/null
+++ b/client/components/main/keyboardShortcuts.styl
@@ -0,0 +1,25 @@
+.shortcuts-list
+  .shortcuts-list-item
+    border-bottom: 1px solid darken(white, 25%)
+    padding: 10px 5px
+
+    &:last-child
+      border-bottom: none
+
+    .shortcuts-list-item-keys
+      margin-top: 5px
+      float: right
+
+      kbd
+        padding: 5px 8px
+        margin: 5px
+        font-size: 18px
+        font-weight: bold
+        background: white
+        border-radius: 3px
+        border: 1px solid darken(white, 10%)
+        box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.15)
+
+    .shortcuts-list-item-action
+      font-size: 1.4em
+      margin: 5px
diff --git a/client/components/main/keyboardShortcuts.tpl.jade b/client/components/main/keyboardShortcuts.tpl.jade
index 321c2b0a..d10068ed 100644
--- a/client/components/main/keyboardShortcuts.tpl.jade
+++ b/client/components/main/keyboardShortcuts.tpl.jade
@@ -1,4 +1,11 @@
-.wrapper
+.wrapper.shortcuts-list
   h2
     i.fa.fa-keyboard-o
     | Keyboard shortcuts
+
+  each mapping
+    .shortcuts-list-item
+      .shortcuts-list-item-keys
+        each keys
+          kbd= this
+      .shortcuts-list-item-action= action
diff --git a/client/components/main/layouts.styl b/client/components/main/layouts.styl
index 9a831a40..e9367b11 100644
--- a/client/components/main/layouts.styl
+++ b/client/components/main/layouts.styl
@@ -39,7 +39,7 @@ body
   overflow-y: auto
 
   .modal-content
-    width: 660px
+    width: 500px
     min-height: 160px
     margin: 42px auto
     padding: 12px
@@ -47,6 +47,9 @@ body
     background: darken(white, 13%)
     z-index: 110
 
+    h2
+      margin-bottom: 25px
+
     .modal-close-btn
       display: block
       float: right
-- 
cgit v1.2.3-1-g7c22