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 <zregv...@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
+
