[camel-website] branch master updated: chore: fix table responsiveness

[zr...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

zregvart pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/camel-website.git


The following commit(s) were added to refs/heads/master by this push:
     new 8e86376  chore: fix table responsiveness
8e86376 is described below

commit 8e86376a2acfbaf575d071156e5c2067fda9fd0b
Author: Zoran Regvart <zr...@apache.org>
AuthorDate: Wed Aug 7 17:03:33 2019 +0200

    chore: fix table responsiveness
    
    This adds a Asciidoctor.js extension to post process the resulting HTML
    to add a `<div>` wrapper around the `<table>` elements. The purpose of
    this wrapper is to allow left-right scrolling of the table when the
    table can't fit into the page width.
    When the table can't fit into the page with the mobile clients usually
    zoom-out to fit the full with and make the text much smaller and really
    difficult to see.
    This also refines the hyphenation, so that it's disabled only for the
    first column (the column containing the component/endpoint option) and
    enables it for other columns.
---
 antora-ui-camel/src/css/doc.css | 8 ++++++--
 extensions/table.js             | 9 +++++++++
 site.yml                        | 5 +++++
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/antora-ui-camel/src/css/doc.css b/antora-ui-camel/src/css/doc.css
index 1b452e8..3afcfb8 100644
--- a/antora-ui-camel/src/css/doc.css
+++ b/antora-ui-camel/src/css/doc.css
@@ -93,13 +93,17 @@
   margin: 0;
 }
 
+.doc .table-wrapper {
+  overflow-x: scroll;
+}
+
 .doc .tableblock p {
   font-size: inherit;
 }
 
-.doc p,
-.doc :not(td) > .content,
 .doc :not(td) > p,
+.doc :not(td) > .content,
+.doc .tableblock td:not(:first-child) > p,
 .doc .tableblock thead {
   hyphens: auto;
 }
diff --git a/extensions/table.js b/extensions/table.js
new file mode 100644
index 0000000..16d794f
--- /dev/null
+++ b/extensions/table.js
@@ -0,0 +1,9 @@
+function responsiveTables() {
+  this.process((doc, output) => {
+    return output.replace(/<table/g, '<div class="table-wrapper"><table').replace(/<\/table>/g, '</table></div>')
+  })
+}
+
+module.exports.register = (registry, context) => {
+  registry.postprocessor(responsiveTables)
+}
diff --git a/site.yml b/site.yml
index b8aeab8..16657b1 100644
--- a/site.yml
+++ b/site.yml
@@ -27,3 +27,8 @@ urls:
 
 output:
   dir: ./documentation
+
+asciidoc:
+  extensions:
+    - ./extensions/table.js
+