gitea_admin/Styleguide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix mobile tab row balancing in keyboard-nav pattern

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-25 09:14:51 +02:00
parent 9c6fd2d62f
commit e61ec9a492
2 changed files with 98 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/card-gruppe-mit-tastennavigation.html
+91
View File
@@ -17,6 +17,10 @@
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="true" aria-controls="content-block-card-1" id="content-block-tab-1" data-component-part="tab-button">Taste 1</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="content-block-card-2" id="content-block-tab-2" data-component-part="tab-button">Taste 2</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="content-block-card-3" id="content-block-tab-3" data-component-part="tab-button">Taste 3</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="content-block-card-4" id="content-block-tab-4" data-component-part="tab-button">Taste 4</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="content-block-card-5" id="content-block-tab-5" data-component-part="tab-button">Taste 5</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="content-block-card-6" id="content-block-tab-6" data-component-part="tab-button">Taste 6</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="content-block-card-7" id="content-block-tab-7" data-component-part="tab-button">Taste 7</button>
</div>
<div class="sg-content-block-card-group__panels">
@@ -106,6 +110,58 @@
</article>
</div>
</div>
<div class="sg-content-block-card-group__panel" id="content-block-card-4" role="tabpanel" aria-labelledby="content-block-tab-4" hidden>
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Taste 4">
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 4.1">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
<div class="sg-strong">Card 4.1</div>
</div>
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
<p class="sg-body">Inhalt für Taste 4.</p>
</div>
</article>
</div>
</div>
<div class="sg-content-block-card-group__panel" id="content-block-card-5" role="tabpanel" aria-labelledby="content-block-tab-5" hidden>
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Taste 5">
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 5.1">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
<div class="sg-strong">Card 5.1</div>
</div>
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
<p class="sg-body">Inhalt für Taste 5.</p>
</div>
</article>
</div>
</div>
<div class="sg-content-block-card-group__panel" id="content-block-card-6" role="tabpanel" aria-labelledby="content-block-tab-6" hidden>
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Taste 6">
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 6.1">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
<div class="sg-strong">Card 6.1</div>
</div>
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
<p class="sg-body">Inhalt für Taste 6.</p>
</div>
</article>
</div>
</div>
<div class="sg-content-block-card-group__panel" id="content-block-card-7" role="tabpanel" aria-labelledby="content-block-tab-7" hidden>
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Taste 7">
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 7.1">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
<div class="sg-strong">Card 7.1</div>
</div>
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
<p class="sg-body">Inhalt für Taste 7.</p>
</div>
</article>
</div>
</div>
</div>
</div>
</section>
@@ -116,6 +172,38 @@
if (tabGroup) {
const tabs = Array.from(tabGroup.querySelectorAll('[role="tab"]'));
const panels = Array.from(tabGroup.querySelectorAll('[role="tabpanel"]'));
const tabList = tabGroup.querySelector('[role="tablist"]');
const applyMobileBalancedTabRows = () => {
if (!tabList) {
return;
}
tabs.forEach((tab) => {
tab.style.removeProperty('--sg-tab-mobile-row-slots');
});
if (window.matchMedia('(min-width: 768px)').matches || tabs.length <= 3) {
return;
}
const maxItemsPerRow = 3;
const rowCount = Math.ceil(tabs.length / maxItemsPerRow);
const baseRowSize = Math.floor(tabs.length / rowCount);
const rowRemainder = tabs.length % rowCount;
let tabStartIndex = 0;
for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
const rowSize = baseRowSize + (rowIndex < rowRemainder ? 1 : 0);
for (let itemOffset = 0; itemOffset < rowSize; itemOffset += 1) {
const tab = tabs[tabStartIndex + itemOffset];
if (tab) {
tab.style.setProperty('--sg-tab-mobile-row-slots', String(rowSize));
}
}
tabStartIndex += rowSize;
}
};
const activateTab = (targetTab) => {
tabs.forEach((tab) => {
@@ -145,6 +233,9 @@
activateTab(nextTab);
});
});
applyMobileBalancedTabRows();
window.addEventListener('resize', applyMobileBalancedTabRows);
}
</script>
styles/32-patterns-card-group-keyboard-nav.css
+7 -2
View File
@@ -37,8 +37,13 @@
@media (max-width: 767px) {
.sg-content-block-card-group__tabs[role="tablist"] > [role="tab"] {
flex: 1 1 0;
flex: 0 0 calc(
(
100%
- (var(--spacing-small) * (var(--sg-tab-mobile-row-slots, 1) - 1))
)
/ var(--sg-tab-mobile-row-slots, 1)
);
min-width: max-content;
}
}