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 Prepare structural tabs support presentation of variablelist #606
• DOCTEAM-1255

[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"

[tomschr]

I've tried it and this is the output that I get:

The problem is that I can't switch the tabs. I've tried it on Chromium & Vivaldi. It stays on the "Geeko" tab.

[tomschr]

I think I could fixed the issue now. However, there is still one thing that needs to be investigated.

If you have only text inside your <term>, everything works as expected.

But as soon as you insert an inline element, the (upstream) stylesheets create a HTML <span> tag. This effectively makes it impossible to switch to this tab. I've tested it and it's with three tabs with an inline element on the third term. I can switch to the first two tabs, but not the third.

Although I could just retrieve the string value from all elements inside <term>, it might not be ideal. The author might want to convey a specific semantic in the term and if I use just the string, this information gets lost.

@GGayathri3 Could you look into this issue? As we still have terms that contain other inline elements we need to find a solution for this.

---

Update: Strangely it works for Chromium, but not Vivaldi.

[tomschr]

Tested it with these browsers:

Browser	Version	Works?
Chromium	126.0.6478.182	✔️
Firefox	115.13.0esr	✔️
Vivaldi	6.7.3329.35	✔️

[GGayathri3]

Hi Toms,
Your observation was valid yesterday. The nesting of HTML elements inside can impact the interactivity of the tabs.
Thank you for calling it out!
I'll make the necessary JS changes to handle the issue.