feat: improve info in the usage page

Rule-34 · Feb 23, 2021 · b367853 · b367853
1 parent 82369c0
commit b367853
Showing 1 changed file with 18 additions and 8 deletions.
diff --git a/pages/usage.vue b/pages/usage.vue
@@ -1,26 +1,36 @@
 <template>
   <main class="space-y-4 space-y-4-fixer">
-    <!-- General Usage -->
+    <!-- Navigation -->
+
+    <ContentContainer :separator="true" title="Navigation" />
 
     <ContentContainer
-      :separator="true"
-      title="General usage"
-      text="Normal usage of the PWA is explained below"
+      title="Touch navigation"
+      text="Devices with touch support can swipe `right` to open the navigation menu, and `left` to open the search menu."
     />
 
     <ContentContainer
-      title="Touch navigation"
-      text="Devices with touch support can swipe right to open the navigation menu, and left to open the search menu."
+      title="Keyboard controls"
+      text="Keyboard's `right` and `left` arrows will navigate pages similar to clicking the control's buttons."
+      img="/img/usage_examples/keyboard-controls"
+    />
+
+    <!-- General Usage -->
+
+    <ContentContainer
+      :separator="true"
+      title="Search"
+      text="Normal usage of the PWA is explained below"
     />
 
     <ContentContainer
-      title="Search: Trash button"
+      title="Trash button"
       text="Deletes all added tags."
       img="/img/usage_examples/search-delete"
     />
 
     <ContentContainer
-      title="Search: Filter button"
+      title="Filter button"
       text="Toggling the filter will ban from appearing the next added tags."
       img="/img/usage_examples/search-filter"
     />