From caabd069d6b66ee5fa3c61a856ffed4824feaae4 Mon Sep 17 00:00:00 2001
From: Nazar Kanaev <nkanaev@live.com>
Date: Tue, 2 Mar 2021 13:19:19 +0000
Subject: [PATCH] keybinding help styling

---
 src/assets/index.html          | 110 ++++++++++++++++-----------------
 src/assets/stylesheets/app.css |   8 +++
 2 files changed, 62 insertions(+), 56 deletions(-)

diff --git a/src/assets/index.html b/src/assets/index.html
index 047d5a2..8203d3d 100644
--- a/src/assets/index.html
+++ b/src/assets/index.html
@@ -386,62 +386,60 @@
             </div>
             <div v-else-if="settings=='shortcuts'">
                 <p class="cursor-default"><b>Keyboard shortuts (case-sensitive)</b></p>
-<div>
-  <b-table-simple striped bordered responsive>
-    <b-thead>
-      <b-tr>
-        <b-th>Key</b-th>
-        <b-th>Action</b-th>
-      </b-tr>
-    </b-thead>
-    <b-tbody>
-      <b-tr>
-        <b-td>r</b-td>
-        <b-td>toggle item as read / unread</b-td>
-      </b-tr>
-      <b-tr>
-          <b-td>R</b-td>
-          <b-td>mark all items as read</b-td>
-      </b-tr>
-      <b-tr>
-          <b-td>s</b-td>
-          <b-td>star / unstar item</b-td>
-      </b-tr>
-      <b-tr>
-          <b-td>?</b-td>
-          <b-td>focus the search bar</b-td>
-      </b-tr>
-      <b-tr>
-          <b-td>A</b-td>
-          <b-td>view All items</b-td>
-      </b-tr>
-      <b-tr>
-          <b-td>U</b-td>
-          <b-td>view Unread items</b-td>
-      </b-tr>
-      <b-tr>
-          <b-td>S</b-td>
-          <b-td>view Starred items</b-td>
-      </b-tr>
-      <b-tr>
-          <b-td>j</b-td>
-          <b-td>go to next feed item</b-td>
-      </b-tr>
-      <b-tr>
-          <b-td>k</b-td>
-          <b-td>go to previous feed item</b-td>
-      </b-tr>
-      <b-tr>
-          <b-td>l</b-td>
-          <b-td>go to next feed</b-td>
-      </b-tr>
-      <b-tr>
-          <b-td>h</b-td>
-          <b-td>go to previous feed</b-td>
-      </b-tr>
-    </b-tbody>
-  </b-table-simple>
-</div>
+
+                <table class="table table-borderless table-sm table-compact m-0">
+                    <tr><td colspan=2>Show:</td></tr>
+                    <tr>
+                        <td><kbd>1</kbd></td>
+                        <td>unread feeds</td>
+                    </tr>
+                    <tr>
+                        <td><kbd>2</kbd></td>
+                        <td>starred feeds</td>
+                    </tr>
+                    <tr>
+                        <td><kbd>3</kbd></td>
+                        <td>all feeds</td>
+                    </tr>
+
+                    <tr><td colspan=2>Navigate:</td></tr>
+                    <tr>
+                        <td><kbd>j</kbd></td>
+                        <td>next article</td>
+                    </tr>
+                    <tr>
+                        <td><kbd>k</kbd></td>
+                        <td>previous article</td>
+                    </tr>
+                    <tr>
+                        <td><kbd>l</kbd></td>
+                        <td>next feed </td>
+                    </tr>
+                    <tr>
+                        <td><kbd>h</kbd></td>
+                        <td>previos feed</td>
+                    </tr>
+
+                    <tr><td colspan=2>Mark</td></tr>
+                    <tr>
+                        <td><kbd>R</kbd></td>
+                        <td>all articles as read</td>
+                    </tr>
+                    <tr>
+                        <td><kbd>r</kbd></td>
+                        <td>an article as read/unread</td>
+                    </tr>
+                    <tr>
+                        <td><kbd>s</kbd></td>
+                        <td>an article as starred/unstarred</td>
+                    </tr>
+
+                    <tr><td colspan=2>Misc</td></tr>
+                    <tr>
+                        <td><kbd>/</kbd></td>
+                        <td>focus the search bar</td>
+                    </tr>
+                </table>
             </div>
         </div>
     </div>
diff --git a/src/assets/stylesheets/app.css b/src/assets/stylesheets/app.css
index 04ea7d5..73914ae 100644
--- a/src/assets/stylesheets/app.css
+++ b/src/assets/stylesheets/app.css
@@ -108,6 +108,14 @@ select.form-control:not([multiple]):not([size]) {
   outline: none;
 }
 
+.table-compact tr td:first-child {
+  padding-left: 0;
+}
+
+.table-compact tr td:last-child {
+  padding-right: 0;
+}
+
 /* custom elements */
 
 .icon {