Display the options list better on mobile devices

[sturtison]

All extension options are listed in a table in https://docs.asciidoctor.org/browser-extension/options/#options

The table formatting squashes the middle option description text making it hard to read on mobile devices.

Changing the table formatting to span the option description text over the first two columns would make it more readable on mobile devices.

I could look at this in combination with #652 and #654

[Parth1353]

Are you talking about this?

[mojavelinux]

It looks like column ratios are needed on the table (e.g., cols=3* or cols=1;2;1) so that the table behaves itself. The automatic layout by the browser is doing a poor job (as it often does).

[ggrossetie]

Yikes, we definitely need to configure the column ratios 😬

[ggrossetie]

@mojavelinux do we have a role/style to configure a min-width on a table (and make it scrollable). Below 650px it becomes difficult to read and in my opinion it would be better to add an horizontal scrollbar.

[mojavelinux]

No, it's not currently possible to add a horizontal scrollbars to tables. In fact, the only way to accomplish it is to use JavaScript to wrap the tables in a scrollable container.

This is something we are discussing in the Antora default UI. See https://gitlab.com/antora/antora-ui-default/-/issues/207

We could add a solution to the Asciidoctor docs UI without having to push it up stream.

Here's the script I currently use for a client's site:

;(function () {
  'use strict'

  find(document.querySelector('article.doc'), 'table.tableblock').forEach(function (table) {
    var parent = table.parentNode
    var maxWidth = parent.getBoundingClientRect().width
    if (table.getBoundingClientRect().width <= maxWidth) return
    var container = Object.assign(document.createElement('div'), { className: 'tablecontainer overflow' })
    table.parentNode.insertBefore(container, table)
    container.appendChild(table)
  })

  function find (from, selector) {
    return [].slice.call(from.querySelectorAll(selector))
  }
})()

[ggrossetie]

Thanks for the tip!

I think it's good enough now:

If someone wants to improve it further, feel free to submit a pull request.