From 025edf4a23340696ce22445178bfb5f8a28cbd06 Mon Sep 17 00:00:00 2001
From: Martyn Welch <martyn.welch@collabora.com>
Date: Mon, 5 Jul 2021 17:30:11 +0100
Subject: [PATCH] Add responsive tables as separate shortcode

The Apertis theme uses a shortcode called `DIVclass` to allow
semi-arbitrary CSS to be applied. Simplify this for document writers by
spliting the responsive table functionality (demoed on the bundle spec) as
a separate shortcode.

Signed-off-by: Martyn Welch <martyn.welch@collabora.com>
---
 README.md                                         | 15 +++++++++++++++
 content/architecture/bundle-spec.md               |  8 ++++++++
 .../layouts/shortcodes/responsive-table.html      |  3 +++
 3 files changed, 26 insertions(+)
 create mode 100644 themes/apertis/layouts/shortcodes/responsive-table.html

diff --git a/README.md b/README.md
index aa9a98b84..aec9ccf41 100644
--- a/README.md
+++ b/README.md
@@ -59,6 +59,21 @@ process will fail when the target page of the reference can not be found,
 causing the CI to fail and thus aids with reducing the risk broken links being
 provided on the website.
 
+## Adding responsive tables
+
+The Apertis theme provides a shortcode to wrapper tables to be more responsive when resizing, splitting the table down into blocks on small screen sizes. This can be enabled by wrapping the table in the `responsive-table` shortcode:
+
+```
+{{% responsive-table %}}
+
+| Item  | Status       |
+|-------|--------------|
+| `foo` | Badgers      |
+| `bar` | More badgers |
+
+{{% /responsive-table %}}
+```
+
 ## Formatting
 
 Please follow these guidelines to enable us to maintain some consistency across the documentation:
diff --git a/content/architecture/bundle-spec.md b/content/architecture/bundle-spec.md
index 1cc4dd724..15dfa5e0d 100644
--- a/content/architecture/bundle-spec.md
+++ b/content/architecture/bundle-spec.md
@@ -125,6 +125,8 @@ are interpreted according to the [AppStream upstream XML] specification.
 This table provides a summary of the relevant tags. All other tags are either
 not recommended for any type of bundle, or not allowed.
 
+{{% responsive-table %}}
+
 | Tag                           | Status                        |
 |-------------------------------|-------------------------------|
 | `id`                          | required, must be bundle ID   |
@@ -142,6 +144,8 @@ not recommended for any type of bundle, or not allowed.
 | `provides` → *any other*      | not allowed                   |
 | `custom` → `value`            | optional                      |
 
+{{% /responsive-table %}}
+
 If the app-bundle has  [Entry points]( {{< ref "#entry-points" >}} ), the file MUST be named
 either `${bundle_id}.appdata.xml` or `${bundle_id}.metainfo.xml`, replacing
 `${bundle_id}` with the  [Bundle ID]( {{< ref "#bundle-id" >}} ). In this case the `component` tag MUST
@@ -334,6 +338,8 @@ fields. All other fields are either not recommended for any type of entry
 point, or not allowed. A table cell containing a literal value indicates that
 the field is required and must have exactly that value.
 
+{{% responsive-table %}}
+
 | Field                          |  [Main entry point]( {{< ref "#main-entry-point" >}} ) | Other graphical programs | Agents          |
 |--------------------------------|-----------------------|--------------------------|--------------------|
 | `Categories`                   | required              | required                 | not recommended    |
@@ -355,6 +361,8 @@ the field is required and must have exactly that value.
 | `X-Apertis-ServiceExec`        | recommended           | optional                 | not allowed        |
 | `X-Apertis-ParentEntry`        | not recommended       | optional                 | not allowed        |
 
+{{% /responsive-table %}}
+
 ### General fields for all entry points
 
 `Type` MUST be set to `Application`.
diff --git a/themes/apertis/layouts/shortcodes/responsive-table.html b/themes/apertis/layouts/shortcodes/responsive-table.html
new file mode 100644
index 000000000..e397a2a2a
--- /dev/null
+++ b/themes/apertis/layouts/shortcodes/responsive-table.html
@@ -0,0 +1,3 @@
+<div class="data">
+{{ .Inner }}
+</div>
-- 
GitLab