feat(vote-single): add more prominent information about shortcuts

Closes #52.
hatnote · Oct 9, 2017 · 4ae1fe1 · 4ae1fe1
1 parent 547d1f1
commit 4ae1fe1
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/client/src/components/vote/vote-single/vote-single.html b/client/src/components/vote/vote-single/vote-single.html
@@ -60,11 +60,15 @@ <h3 class="md-title">Vote</h3>
       </mont-votebox>
       <span class="muted"
           ng-if="$ctrl.round.vote_method === 'yesno'">
-        You can also use keyboard to vote. Use arrow up/down keys.
+        You can also use keyboard to vote.<br />
+        <span class="key">🡩</span><span class="key">🡫</span> – Accept / Decline<br />
+        <span class="key">🡪</span> – Skip (vote later)
       </span>
       <span class="muted"
           ng-if="$ctrl.round.vote_method === 'rating'">
-        You can also use keyboard to vote. Use keys 1 to 5.
+        You can also use keyboard to vote.<br />
+        <span class="key">1</span>-<span class="key">5</span> – One to Five Stars<br />
+        <span class="key">🡪</span> – Skip (vote later)
       </span>
     </div>
 

diff --git a/client/src/styles/_general.scss b/client/src/styles/_general.scss
@@ -80,3 +80,14 @@ fieldset {
 .text-normal {
   text-transform: none !important;
 }
+
+.key {
+  display: inline-block;
+  width: 19px;
+  height: 19px;
+  text-align: center;
+  margin: 0 2px 2px 2px;
+  font-size: 14px;
+  border-radius: 4px;
+  border: 1px solid #aaa;
+}