Merge branch 'fix-tables' into 'develop'

Better HTML Table handling

See merge request !357

src/app/assets/stylesheets/foundation-overrides.scss

@@ -94,12 +94,21 @@ hr {
 
 table {
   box-shadow: inset 0 0 0 -1px red;
+  font-size: 1.02rem;
 }
 
+table td, table th {
+  border: 1px dotted rgba(128, 128, 128, 0.1);
+}
+
+tbody th, tbody td {
+  padding: 0.25rem 0.4rem;
+}
 
 thead, tbody, tfoot {
   @include themify($themes) {
-    background-color: themed('backgroundColor');
+    background-color: themed('tableRowOddBackgroundColor');
+    border: themed('borderLight');
   }
 }
 
@@ -110,6 +119,10 @@ thead {
   }
 }
 
+thead th {
+  white-space: nowrap;
+}
+
 tbody tr:nth-child(even) {
   @include themify($themes) {
     background-color: themed('tableRowEvenBackgroundColor');

src/app/components/cards/MarkdownViewer.jsx

@@ -10,6 +10,7 @@ import tt from 'counterpart';
 import { generateMd as EmbeddedPlayerGenerateMd } from 'app/components/elements/EmbeddedPlayers';
 import RemarkableSpoiler from '@quochuync/remarkable-spoiler';
 import '@quochuync/remarkable-spoiler/styles.css';
+import RemarkableTable from "app/utils/RemarkableTable";
 
 class MarkdownViewer extends Component {
     static propTypes = {
@@ -80,6 +81,7 @@ class MarkdownViewer extends Component {
         });
 
         renderer.use(RemarkableSpoiler);
+        renderer.use(RemarkableTable);
 
         let renderedText = html ? text : renderer.render(text);
 

src/app/components/cards/PostFull.scss

@@ -284,3 +284,7 @@ input.share-box {
     font-size: .8em;
   }
 }
+
+.table-responsive {
+  overflow-x: auto;
+}

src/app/utils/RemarkableTable.js

+/** Removes all markdown leaving just plain text */
+const remarkableTable = (md) => {
+    md.renderer.rules.table_open = () => {
+        return '<div class="table-responsive"><table>\n';
+    };
+
+    md.renderer.rules.table_close = () => {
+        return '</table></div>\n';
+    };
+};
+
+export default remarkableTable;

src/app/utils/SanitizeConfig.js

@@ -127,6 +127,7 @@ export default ({
                 'redditWrapper',
                 'tweetWrapper',
                 'phishy',
+                'table-responsive',
             ];
             const validClass = classWhitelist.find((e) => attribs.class == e);
             if (validClass) attys.class = validClass;