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

Make mobile tab row fill width and wrap only at intrinsic minimum

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-21 18:32:34 +02:00
parent 34f871e627
commit f0debe844d
2 changed files with 7 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/card-gruppe-mit-tastennavigation.html
-44
View File
@@ -116,46 +116,10 @@
if (tabGroup) {
const tabs = Array.from(tabGroup.querySelectorAll('[role="tab"]'));
const panels = Array.from(tabGroup.querySelectorAll('[role="tabpanel"]'));
const mobileBreakpoint = window.matchMedia('(max-width: 767px)');
const applyMobileTabWidthBounds = () => {
tabs.forEach((tab) => {
tab.style.removeProperty('width');
tab.style.removeProperty('flex');
tab.style.removeProperty('min-width');
tab.style.removeProperty('max-width');
tab.removeAttribute('data-tab-min-width');
tab.removeAttribute('data-tab-max-width');
});
if (!mobileBreakpoint.matches) {
return;
}
tabs.forEach((tab) => {
const currentWidth = Math.ceil(tab.getBoundingClientRect().width);
const maxWidth = Math.ceil(currentWidth * 1.4);
const preferredWidth = Math.ceil(currentWidth * 1.2);
tab.style.flex = '0 1 auto';
tab.style.minWidth = `${currentWidth}px`;
tab.style.maxWidth = `${maxWidth}px`;
tab.style.width = `${preferredWidth}px`;
tab.setAttribute('data-tab-min-width', `${currentWidth}px`);
tab.setAttribute('data-tab-max-width', `${maxWidth}px`);
});
};
const activateTab = (targetTab) => {
tabs.forEach((tab) => {
tab.setAttribute('aria-selected', String(tab === targetTab));
if (mobileBreakpoint.matches) {
const minWidth = Number((tab.getAttribute('data-tab-min-width') || '').replace('px', ''));
const maxWidth = Number((tab.getAttribute('data-tab-max-width') || '').replace('px', ''));
const preferredWidth = Math.ceil(minWidth + ((maxWidth - minWidth) * 0.5));
tab.style.width = `${preferredWidth}px`;
} else {
tab.style.removeProperty('width');
}
});
panels.forEach((panel) => {
@@ -181,14 +145,6 @@
activateTab(nextTab);
});
});
applyMobileTabWidthBounds();
const activeTab = tabs.find((tab) => tab.getAttribute('aria-selected') === 'true') || tabs[0];
if (activeTab) {
activateTab(activeTab);
}
mobileBreakpoint.addEventListener('change', applyMobileTabWidthBounds);
window.addEventListener('resize', applyMobileTabWidthBounds);
}
</script>