From 9042f9a813e8c909e695ffbe20f81c08eef03b7a Mon Sep 17 00:00:00 2001
From: cwm <chriswmartin@protonmail.com>
Date: Wed, 20 Dec 2017 09:50:29 -0600
Subject: add keyboard shortcuts to getting started (fixes #275)

---
 .../flavours/glitch/styles/components/index.scss    | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

(limited to 'app/javascript/flavours/glitch/styles')

diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index 8f98863d8..06521d708 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -2297,6 +2297,27 @@
   }
 }
 
+.keyboard-shortcuts {
+  padding: 8px 0 0;
+  overflow: hidden;
+
+  thead {
+    position: absolute;
+    left: -9999px;
+  }
+
+  td {
+    padding: 0 10px 8px;
+  }
+
+  code {
+    display: inline-block;
+    padding: 3px 5px;
+    background-color: lighten($ui-base-color, 8%);
+    border: 1px solid darken($ui-base-color, 4%);
+  }
+}
+
 .setting-text {
   color: $ui-primary-color;
   background: transparent;
-- 
cgit 


From d736739e8ff79044be6f605cd28c89ead710aec6 Mon Sep 17 00:00:00 2001
From: cwm <chriswmartin@protonmail.com>
Date: Thu, 21 Dec 2017 13:04:40 -0600
Subject: <kbd> instead of <code> in KeyboardShortcuts component (tootsuite pr
 #6049)

---
 .../glitch/features/keyboard_shortcuts/index.js    | 30 +++++++++++-----------
 .../flavours/glitch/styles/components/index.scss   |  2 +-
 2 files changed, 16 insertions(+), 16 deletions(-)

(limited to 'app/javascript/flavours/glitch/styles')

diff --git a/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js b/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js
index 0a1273764..8aed471f2 100644
--- a/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js
+++ b/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js
@@ -33,63 +33,63 @@ export default class KeyboardShortcuts extends ImmutablePureComponent {
             </thead>
             <tbody>
               <tr>
-                <td><code>r</code></td>
+                <td><kbd>r</kbd></td>
                 <td><FormattedMessage id='keyboard_shortcuts.reply' defaultMessage='to reply' /></td>
               </tr>
               <tr>
-                <td><code>m</code></td>
+                <td><kbd>m</kbd></td>
                 <td><FormattedMessage id='keyboard_shortcuts.mention' defaultMessage='to mention author' /></td>
               </tr>
               <tr>
-                <td><code>f</code></td>
+                <td><kbd>f</kbd></td>
                 <td><FormattedMessage id='keyboard_shortcuts.favourite' defaultMessage='to favourite' /></td>
               </tr>
               <tr>
-                <td><code>b</code></td>
+                <td><kbd>b</kbd></td>
                 <td><FormattedMessage id='keyboard_shortcuts.boost' defaultMessage='to boost' /></td>
               </tr>
               <tr>
-                <td><code>enter</code></td>
+                <td><kbd>enter</kbd></td>
                 <td><FormattedMessage id='keyboard_shortcuts.enter' defaultMessage='to open status' /></td>
               </tr>
               <tr>
-                <td><code>up</code></td>
+                <td><kbd>up</kbd></td>
                 <td><FormattedMessage id='keyboard_shortcuts.up' defaultMessage='to move up in the list' /></td>
               </tr>
               <tr>
-                <td><code>down</code></td>
+                <td><kbd>down</kbd></td>
                 <td><FormattedMessage id='keyboard_shortcuts.down' defaultMessage='to move down in the list' /></td>
               </tr>
               <tr>
-                <td><code>1</code>-<code>9</code></td>
+                <td><kbd>1</kbd>-<kbd>9</kbd></td>
                 <td><FormattedMessage id='keyboard_shortcuts.column' defaultMessage='to focus a status in one of the columns' /></td>
               </tr>
               <tr>
-                <td><code>n</code></td>
+                <td><kbd>n</kbd></td>
                 <td><FormattedMessage id='keyboard_shortcuts.compose' defaultMessage='to focus the compose textarea' /></td>
               </tr>
               <tr>
-                <td><code>alt</code>+<code>n</code></td>
+                <td><kbd>alt</kbd>+<kbd>n</kbd></td>
                 <td><FormattedMessage id='keyboard_shortcuts.toot' defaultMessage='to start a brand new toot' /></td>
               </tr>
               <tr>
-                <td><code>backspace</code></td>
+                <td><kbd>backspace</kbd></td>
                 <td><FormattedMessage id='keyboard_shortcuts.back' defaultMessage='to navigate back' /></td>
               </tr>
               <tr>
-                <td><code>s</code></td>
+                <td><kbd>s</kbd></td>
                 <td><FormattedMessage id='keyboard_shortcuts.search' defaultMessage='to focus search' /></td>
               </tr>
               <tr>
-                <td><code>esc</code></td>
+                <td><kbd>esc</kbd></td>
                 <td><FormattedMessage id='keyboard_shortcuts.unfocus' defaultMessage='to un-focus compose textarea/search' /></td>
               </tr>
               <tr>
-                <td><code>x</code></td>
+                <td><kbd>x</kbd></td>
                 <td><FormattedMessage id='keyboard_shortcuts.expand' defaultMessage='to expand a status with a content warning' /></td>
               </tr>
               <tr>
-                <td><code>?</code></td>
+                <td><kbd>?</kbd></td>
                 <td><FormattedMessage id='keyboard_shortcuts.legend' defaultMessage='to display this legend' /></td>
               </tr>
             </tbody>
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index 06521d708..35f308b2d 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -2310,7 +2310,7 @@
     padding: 0 10px 8px;
   }
 
-  code {
+  kbd {
     display: inline-block;
     padding: 3px 5px;
     background-color: lighten($ui-base-color, 8%);
-- 
cgit