Move keyboard shortcuts to modal. Add ? shortcut

2017-07-11 22:42:30 -07:00
parent 410f9a9133
commit 57b11fab32
9 changed files with 137 additions and 107 deletions
--- a/frontend/components/HtmlContent/HtmlContent.js
+++ b/frontend/components/HtmlContent/HtmlContent.js
@ -0,0 +1,84 @@
+// @flow
+import styled from 'styled-components';
+
+const HtmlContent = styled.div`
+  h1, h2, h3, h4, h5, h6 {
+    :global {
+      .anchor {
+        visibility: hidden;
+        color: ;
+      }
+    }
+
+    &:hover {
+      :global {
+        .anchor {
+          visibility: visible;
+        }
+      }
+    }
+  }
+
+  ul {
+    padding-left: 1.5em;
+
+    ul {
+      margin: 0;
+    }
+  }
+
+  blockquote {
+    font-style: italic;
+    border-left: 2px solid $lightGray;
+    padding-left: 0.8em;
+  }
+
+  table {
+    width: 100%;
+    overflow: auto;
+    display: block;
+    border-spacing: 0;
+    border-collapse: collapse;
+
+    thead, tbody {
+      width: 100%;
+    }
+
+    thead {
+      tr {
+        border-bottom: 2px solid $lightGray;
+      }
+    }
+
+    tbody {
+      tr {
+        border-bottom: 1px solid $lightGray;
+      }
+    }
+
+    tr {
+      background-color: #fff;
+
+      // &:nth-child(2n) {
+      //   background-color: #f8f8f8;
+      // }
+    }
+
+    th, td {
+      text-align: left;
+      border: 1px 0 solid $lightGray;
+      padding: 5px 20px 5px 0;
+
+      &:last-child {
+        padding-right: 0;
+        width: 100%;
+      }
+    }
+
+    th {
+      font-weight: bold;
+    }
+  }
+`;
+
+export default HtmlContent;