Convert variablelist into a HTML tab structure

[tomschr]

Changes

Assume you have the following <variablelist>:

<variablelist role="tabs">
    <varlistentry>
      <term>Geeko</term>
      <listitem>
        <para>The SUSE mascot</para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>Wilber</term>
      <listitem>
        <para>The GIMP mascot</para>
      </listitem>
    </varlistentry>
</variablelist>

The change in the template converts it into this HTML structure:

<div class="variablelist">
  <ul class="tabs">
    <li onclick="showTabContent(event)" class="tab active-tab"><span
        class="term">Geeko</span></li>
    <li onclick="showTabContent(event)" class="tab"><span
        class="term">Wilber</span></li>
  </ul>
  <div class="content-container">
    <div class="tab-container">
      <p>The SUSE mascot</p>
    </div>
    <div class="tab-container" style="display: none;">
      <p>The GIMP mascot</p>
    </div>
  </div>
</div>

TODOs

• [ ] Add CSS (source-assets/styles2022/sass/custom/content-formal-informal.sass)
• [ ] Add JavaScript code (suse2022-ns/static/js/script.js)

Related items

Related to #606

[GGayathri3]

Hi Toms, in the resulting HTML please replace the class name 'variablelist' with the class name 'tab-structure'. Resulting HTML for your reference:

<div class="tab-structure">
        <ul class="tabs">
            <li class="tab active-tab" onclick="showTabContent(event)">Geeko</li>
            <li class="tab" onclick="showTabContent(event)">Geeko 2</li>
            <li class="tab" onclick="showTabContent(event)">Geeko 3</li>
        </ul>
        <div class="content-container">
            <div id="tabContent1" class="tab-content">
                <p>The SUSE mascot 1</p>
            </div>
            <div id="tabContent2" class="tab-content" style="display: none;">
                <p>The SUSE mascot 2</p>
            </div>
            <div id="tabContent3" class="tab-content" style="display: none;">
                <p>The SUSE mascot 3</p>
            </div>
        </div>
    </div>

[tomschr]

replace the class name 'variablelist' with the class name 'tab-structure'.

That's now added in commit 2287a1a.

---

Apart from this change, I came across that the Bulma framework (which we use) support tabs already (https://bulma.io/documentation/components/tabs/)...

The question is, should we revisit this idea and do it the "Bulma way"? If possible, we shouldn't reinvent the wheel. However, that maybe comes with a price:

• Bulma is a very modular framework. At the moment, we use a fraction of its features only. To support tabs from Bulma, we need to enable it (import modules, see diff below).
• Probably we need to change the stylesheet to adhere to the structure.
• Enabling tab support, it would end with a bigger size of the CSS file.

On the other side, we could gain something as well:

• We don't have to reinvent the wheel.
• Consistent with the Bulma framework.
• With small adaptions on the stylesheets, we can change the layout.
• Works out of the box for different output media (smartphones, tables, ...)

I was hesitant to commit it, so I post the diff of the change here:

diff --git i/source-assets/styles2022/sass/style.sass w/source-assets/styles2022/sass/style.sass
index 59fea29..69cda95 100644
--- i/source-assets/styles2022/sass/style.sass
+++ w/source-assets/styles2022/sass/style.sass
@@ -134,9 +134,15 @@ $i_page_width_wide: $i_superwide

 // Upstream imports (must be first!)

-//@import "bulma-0.9.3/bulma/bulma.sass"
+// @import "bulma-0.9.3/bulma/bulma.sass"
+@import "bulma-0.9.3/bulma/sass/utilities/controls"
+@import "bulma-0.9.3/bulma/sass/utilities/extends"
+
 @import "bulma-0.9.3/bulma/sass/base/minireset.sass"
 @import "bulma-0.9.3/bulma/sass/elements/container.sass"
+@import "bulma-0.9.3/bulma/sass/components/tabs.sass"