feat: add Keyboard Cheatsheet (#2088)

data/locale.yml

@@ -14,6 +14,14 @@ nav:
   search: Search
   userland: Userland
 
+keyboard_modal:
+  focus_search: Focus the search bar
+  focus_and_clear: Focus the search bar and cleans it
+  scroll_down: Select the next search result
+  scroll_up: Select the previous search result
+  open: Open the selected search result
+  open_new_tab: Open the selected search result in a new tab
+
 docs:
   title: Electron Documentation
   description: See all of the <a href="/docs/all">docs on one page</a> or check out the <a href="/docs/faq">FAQ</a>.

public/bower_components/basecoat/README.md

@@ -1,6 +1,6 @@
 # Basecoat sites
 
-A set of SCSS partials that work with the existing [Primer](https://github.com/primer/primer) toolkit to create resuable code and design patterns for GitHub's marketing sites.
+A set of SCSS partials that work with the existing [Primer](https://github.com/primer/primer) toolkit to create reusable code and design patterns for GitHub's marketing sites.
 
 ## Getting Started
 

public/styles/_base.scss

@@ -114,3 +114,22 @@ img[data-src] {
     height: 100%;
   }
 }
+
+kbd {
+  -moz-border-radius:3px;
+  -moz-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
+  -webkit-border-radius:3px;
+  -webkit-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
+  background-color:#f7f7f7;
+  border:1px solid #ccc;
+  border-radius:3px;
+  box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
+  color:#333;
+  display:inline-block;
+  font-family: Arial,Helvetica,sans-serif;
+  font-size:11px;
+  line-height:1.4;
+  margin:0 .1em;
+  padding:.1em .6em;
+  text-shadow:0 1px 0 #fff;
+}

public/styles/_home.scss

@@ -115,6 +115,7 @@ $app-list-icon-size: 48px;
   position: relative;
 }
 
+// TODO(HashimotoYT): RFC: Design review.
 .listed-app-logo-placeholder {
   position: absolute;
   top: 5px;
@@ -124,7 +125,7 @@ $app-list-icon-size: 48px;
   border-radius: 50%;
   margin: 0;
   padding: 0;
-  z-index: 100;
+  z-index: 1;
 }
 
 .listed-app-logo {
@@ -133,7 +134,7 @@ $app-list-icon-size: 48px;
     left: 0;
     max-width: 48px;
     height: 48px;
-    z-index: 101;
+    z-index: 2;
 }
 
 .listed-app-name {

public/styles/_kb-shortcut-dialog.scss

@@ -0,0 +1,75 @@
+/* modal background */
+.kb-shortcut {
+	display: none; /* Hidden by default */
+	position: fixed; /* Stay in place */
+  z-index: 5;
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%;
+	overflow: auto; /* Enable scroll if needed */
+	background-color: rgba(0, 0, 0, 0.4); /* Fallback color */
+}
+
+/* modal box */
+.kb-shortcut-content {
+  background-color: #fefefe;
+  margin: 150px auto; /* 15% from the top and centered */
+  border: 1px solid #888;
+  min-width: 800px;
+  width: 450px;
+}
+
+/* Modal Header */
+.kb-shortcut-header {
+  padding: 2px 16px;
+  // background-color: #5cb85c;
+  // color: white;
+
+	// color: $jumbo-color;
+  // background-color: lighten($jumbo-bg-color, 2%);
+  // border-bottom-color: darken($jumbo-bg-color, 8%);
+
+  /* modal close */
+  .close {
+    // I'm not sure why margin-top,bottom: auto; doesn't work :shrug:
+    margin-top: 20px;
+    margin-bottom: 20px;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover {
+    color: $main-link-color;
+    cursor: pointer;
+  }
+
+	color: $main-color-subtle;
+  background-color: #74b1be7a;
+}
+
+/* Modal Body */
+.kb-shortcut-body {
+  padding: 20px;
+
+  table {
+    width: 100%;
+  }
+}
+
+/* Modal Footer */
+.kb-shortcut-footer {
+  padding: 2px 16px;
+  background-color: #5cb85c;
+  color: white;
+}
+
+.kb-shortcut th, .kb-shortcut td {
+  padding: 5px;
+  text-align: left;
+}
+
+.kb-shortcut h2 {
+	margin: 0.5em 0;
+}

public/styles/index.scss

@@ -80,4 +80,5 @@
 @import "languages";
 @import "search";
 @import "versions";
+@import "kb-shortcut-dialog";
 @import "ui/landing/fiddle";

scripts/index.js

@@ -19,4 +19,5 @@ document.addEventListener('DOMContentLoaded', () => {
   require('./expanding-versions')()
   require('./install-toggle')()
   require('./language-selector')()
+  require('./kb-shortcut-dialog')()
 })

scripts/kb-shortcut-dialog.js

@@ -0,0 +1,38 @@
+module.exports = function installKbShortcutDialog () {
+  // Get the modal
+  const modal = document.getElementById('kb-shortcut-dialog')
+
+  // Get the <span> element that closes the modal
+  const span = modal.getElementsByClassName('close')[0]
+
+  // When the user types ?, open the modal
+  window.addEventListener('keydown', event => {
+    if (event.key === '?') {
+      if (event.target === null || event.target.tagName !== 'INPUT') {
+        modal.style.display = 'block'
+        event.stopImmediatePropagation()
+        event.preventDefault()
+      }
+    }
+
+    if (modal.style.display === 'block') {
+      if (event.keyCode === 27) {
+        modal.style.display = 'none'
+        event.stopImmediatePropagation()
+        event.preventDefault()
+      }
+    }
+  }, true)
+
+  // When the user clicks anywhere outside of the modal, close it
+  window.addEventListener('click', (ev) => {
+    if (ev.target === modal) {
+      modal.style.display = 'none'
+    }
+  }, true)
+
+  // When the user clicks on <span> (x), close the modal
+  span.addEventListener('click', () => {
+    modal.style.display = 'none'
+  }, true)
+}

views/layouts/main.html

@@ -13,6 +13,7 @@
     <div id="refinement-list"></div>
     {{> footer}}
     {{> anchor_links}}
+    {{> kb_shortcut_dialog}}
     <script>
     if ('serviceWorker' in navigator) {
       navigator.serviceWorker.getRegistrations().then(function(registrations) {

views/partials/kb_shortcut_dialog.html

@@ -0,0 +1,45 @@
+<div id="kb-shortcut-dialog" class="kb-shortcut docs-container-lg">
+  <div class="kb-shortcut-content">
+    <div class="kb-shortcut-header">
+      <span class="octicon octicon-x close"></span>
+      <h2>Keyboard Shortcuts</h2>
+    </div>
+    <div class="kb-shortcut-body">
+      <table class="table-ruled">
+        <thead>
+          <tr>
+            <th>Key</th>
+            <th>Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td><kbd>/</kbd></td>
+            <td>{{localized.keyboard_modal.focus_search}}</td>
+          </tr>
+          <tr>
+            <td><kbd>Esc</kbd></td>
+            <td>{{localized.keyboard_modal.focus_and_clear}}</td>
+          </tr>
+          <tr>
+            <td><kbd>↓</kbd></td>
+            <td>{{localized.keyboard_modal.scroll_down}}</td>
+          </tr>
+          <tr>
+            <td><kbd>↑</kbd></td>
+            <td>{{localized.keyboard_modal.scroll_up}}</td>
+          </tr>
+          <tr>
+            <td><kbd>Enter</kbd></td>
+            <td>{{localized.keyboard_modal.open}}</td>
+          </tr>
+          <tr>
+            <td class="no-wrap darwin-only"><kbd>cmd</kbd><kbd>Enter</kbd></td>
+            <td class="no-wrap win32-only linux-only"><kbd>Ctrl</kbd>+<kbd>Enter</kbd></td>
+            <td>{{localized.keyboard_modal.open_new_tab}}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>