Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Convert variablelist into a HTML tab structure #611

Merged
merged 11 commits into from
Aug 21, 2024
Merged

Convert variablelist into a HTML tab structure #611

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
83f720c
Convert variablelist into a HTML tab structure
tomschr Feb 21, 2024
0e2fd5e
Added the function showTabContent to script-purejs.js
GGayathri3 Feb 21, 2024
5ad2db1
Update script.js with showTabContent function
GGayathri3 Feb 21, 2024
8d9c5dd
Update content-formal-informal.sass with Tab structure CSS
GGayathri3 Feb 21, 2024
2287a1a
SASS syntax corrections for tab-structure
GGayathri3 Feb 21, 2024
28cc7ae
Use class="tab-structure" instead of variablelist
tomschr Feb 21, 2024
d728a37
Recreate CSS from SASS
tomschr Aug 20, 2024
d17ebb0
Fix issues in tab list
tomschr Aug 20, 2024
17729c3
Update the showTabContent f/n in script-purejs.js
GGayathri3 Aug 21, 2024
e1125bb
Update the showTabContent f/n in script.js
GGayathri3 Aug 21, 2024
801c3af
Move onclick attribute form <li> -> <ul>
tomschr Aug 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions source-assets/styles2022/sass/custom/content-formal-informal.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -349,3 +349,35 @@ li > p

div.blockquote
margin: 17px 35px

// CSS for Tab structure
.tab-structure
display: flex
border: 1px solid #30ba78
flex-direction: column
margin-top: 32px
margin-bottom: 32px

.tabs
display: flex
overflow-x: auto
padding: 0
margin: 0

.tab
cursor: pointer
list-style: none
padding-top: 8px
padding-bottom: 8px
padding-left: 16px
padding-right: 16px

.tab.active-tab
border-bottom: 3px solid #30ba78
color: #0c322c
font-size: bold

.content-container
background-color: rgb(246, 248, 250)
padding: 8px
overflow-x: auto
704 changes: 368 additions & 336 deletions suse2022-ns/static/css/style-new.css
View file
Open in desktop

Large diffs are not rendered by default.

27 changes: 27 additions & 0 deletions suse2022-ns/static/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3023,6 +3023,33 @@ li > p {
div.blockquote {
margin: 17px 35px; }

.tab-structure {
display: flex;
border: 1px solid #30ba78;
flex-direction: column;
margin-top: 32px;
margin-bottom: 32px; }
.tab-structure .tabs {
display: flex;
overflow-x: auto;
padding: 0;
margin: 0; }
.tab-structure .tabs .tab {
cursor: pointer;
list-style: none;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 16px;
padding-right: 16px; }
.tab-structure .tabs .tab.active-tab {
border-bottom: 3px solid #30ba78;
color: #0c322c;
font-size: bold; }
.tab-structure .content-container {
background-color: #f6f8fa;
padding: 8px;
overflow-x: auto; }

.qandadiv {
margin: 0 0 40px 0; }

Expand Down
26 changes: 26 additions & 0 deletions suse2022-ns/static/js/script-purejs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -676,3 +676,29 @@ function addBugLinks() {
return true;
});
}

function showTabContent(event) {
var tab = event.target.closest('.tab')
if (tab) {
var tabs = tab.parentElement;

// Get the index of the clicked tab
var index = Array.from(tabs.children).indexOf(tab);

// Hide all tab contents
Array.from(tabs.nextElementSibling.children).forEach(content => {
content.style.display = 'none';
});

// Remove "active" class from all tabs
tabs.querySelectorAll('.tab').forEach(tab => {
tab.classList.remove('active-tab');
});

// Display the selected tab content
tabs.nextElementSibling.children[index].style.display = 'block';

// Add "active" class to the clicked tab
tab.classList.add('active-tab');
}
}
26 changes: 26 additions & 0 deletions suse2022-ns/static/js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -585,3 +585,29 @@ function addBugLinks() {
});

}

function showTabContent(event) {
var tab = event.target.closest('.tab')
if (tab) {
var tabs = tab.parentElement;

// Get the index of the clicked tab
var index = Array.from(tabs.children).indexOf(tab);

// Hide all tab contents
Array.from(tabs.nextElementSibling.children).forEach(content => {
content.style.display = 'none';
});

// Remove "active" class from all tabs
tabs.querySelectorAll('.tab').forEach(tab => {
tab.classList.remove('active-tab');
});

// Display the selected tab content
tabs.nextElementSibling.children[index].style.display = 'block';

// Add "active" class to the clicked tab
tab.classList.add('active-tab');
}
}
128 changes: 45 additions & 83 deletions suse2022-ns/xhtml/lists.xsl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
xmlns="http://www.w3.org/1999/xhtml"
exclude-result-prefixes="exsl d">

<xsl:template match="d:variablelist">
<xsl:template match="d:variablelist[@role='tabs' or processing-instruction('dbhtml')]">
<xsl:variable name="pi-presentation">
<xsl:call-template name="pi.dbhtml_list-presentation" />
</xsl:variable>
Expand All @@ -31,105 +31,67 @@
<xsl:value-of select="$pi-presentation" />
</xsl:when>
<xsl:when test="$variablelist.as.table != 0">
<xsl:value-of select="'table'" />
<xsl:text>table</xsl:text>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="'list'" />
<xsl:text>list</xsl:text>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>

<xsl:variable name="default.class">
<xsl:value-of select="local-name()" />
<xsl:if test="@spacing = 'compact'">
<xsl:text> compact</xsl:text>
</xsl:if>
<!-- Added to support tabs -->
<xsl:if test="@role = 'tabs' or $presentation = 'tabs'">
<xsl:text> tabs</xsl:text>
</xsl:if>
</xsl:variable>

<xsl:variable name="list-width">
<xsl:call-template name="pi.dbhtml_list-width" />
</xsl:variable>

<xsl:variable name="term-width">
<xsl:call-template name="pi.dbhtml_term-width" />
</xsl:variable>

<xsl:variable name="table-summary">
<xsl:call-template name="pi.dbhtml_table-summary" />
</xsl:variable>

<div>
<xsl:call-template name="common.html.attributes"/>
<xsl:call-template name="common.html.attributes">
<xsl:with-param name="class">tab-structure</xsl:with-param>
</xsl:call-template>
<xsl:call-template name="id.attribute"/>
<xsl:call-template name="anchor"/>
<xsl:if test="d:title|d:info/d:title">
<xsl:call-template name="formal.object.heading"/>
</xsl:if>

<xsl:choose>
<xsl:when test="$presentation = 'table'">
<!-- Preserve order of PIs and comments -->
<xsl:apply-templates
select="*[not(self::d:varlistentry or self::d:title or self::d:titleabbrev)]
| comment()[not(preceding-sibling::d:varlistentry)]
| processing-instruction()[not(preceding-sibling::d:varlistentry)]" />
<table border="{$table.border.off}">
<xsl:call-template name="generate.class.attribute">
<xsl:with-param name="class" select="$default.class" />
</xsl:call-template>
<xsl:if test="$list-width != ''">
<xsl:attribute name="width">
<xsl:value-of select="$list-width" />
</xsl:attribute>
</xsl:if>
<xsl:if test="$table-summary != ''">
<xsl:attribute name="summary">
<xsl:value-of select="$table-summary" />
</xsl:attribute>
</xsl:if>
<colgroup>
<col align="{$direction.align.start}" valign="top">
<xsl:if test="$term-width != ''">
<xsl:attribute name="width">
<xsl:value-of select="$term-width" />
</xsl:attribute>
</xsl:if>
</col>
<col />
</colgroup>
<tbody>
<xsl:apply-templates mode="varlist-table"
select="d:varlistentry | comment()[preceding-sibling::d:varlistentry]
| processing-instruction()[preceding-sibling::d:varlistentry]"
/>
</tbody>
</table>
</xsl:when>
<xsl:otherwise>
<!-- Preserve order of PIs and comments -->
<xsl:apply-templates
select="*[not(self::d:varlistentry or self::d:title or self::d:titleabbrev)]
| comment()[not(preceding-sibling::d:varlistentry)]
| processing-instruction()[not(preceding-sibling::d:varlistentry)]" />
<dl>
<xsl:call-template name="generate.class.attribute">
<xsl:with-param name="class" select="$default.class" />
</xsl:call-template>
<xsl:apply-templates
select="d:varlistentry | comment()[preceding-sibling::d:varlistentry]
| processing-instruction()[preceding-sibling::d:varlistentry]"
/>
</dl>
</xsl:otherwise>
</xsl:choose>
<ul class="tabs" onclick="showTabContent(event)">
<xsl:apply-templates select="d:varlistentry|comment()[preceding-sibling::d:varlistentry]
|processing-instruction()[preceding-sibling::d:varlistentry]"
mode="tab-titles" />
</ul>
<div class="content-container">
<xsl:apply-templates select="d:varlistentry|comment()[preceding-sibling::d:varlistentry]
|processing-instruction()[preceding-sibling::d:varlistentry]"
mode="tab-content" />
</div>
</div>
</xsl:template>

<xsl:template match="d:varlistentry" mode="tab-titles">
<li>
<xsl:attribute name="class">
<xsl:choose>
<xsl:when test="position() = 1">tab active-tab</xsl:when>
<xsl:otherwise>tab</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
<xsl:apply-templates select="d:term" mode="tab-term" />
</li>
</xsl:template>

<xsl:template match="d:varlistentry" mode="tab-content">
<div class="tab-content" id="tabContent{position()}">
<xsl:choose>
<xsl:when test="position() != 1" >
<xsl:attribute name="style">display: none;</xsl:attribute>
</xsl:when>
<xsl:otherwise/>
</xsl:choose>
<xsl:apply-templates select="d:listitem" />
</div>
</xsl:template>

<!-- We don't want the extra <span> element -->
<xsl:template match="d:term" mode="tab-term">
<xsl:apply-templates/>
</xsl:template>

<!-- =============================================================== -->
<xsl:template match="d:varlistentry">
<dt>
<xsl:call-template name="id.attribute">
Expand Down
Loading