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

Use active-tab width switching within mobile min/max bounds

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-21 18:15:29 +02:00
parent e2eb0fd4aa
commit 28b94ec8a0
1 changed files with 15 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/card-gruppe-mit-tastennavigation.html
+15 -1
View File
@@ -124,6 +124,8 @@
tab.style.removeProperty('flex'); tab.style.removeProperty('flex');
tab.style.removeProperty('min-width'); tab.style.removeProperty('min-width');
tab.style.removeProperty('max-width'); tab.style.removeProperty('max-width');
tab.removeAttribute('data-tab-min-width');
tab.removeAttribute('data-tab-max-width');
}); });
if (!mobileBreakpoint.matches) { if (!mobileBreakpoint.matches) {
@@ -133,16 +135,24 @@
tabs.forEach((tab) => { tabs.forEach((tab) => {
const currentWidth = Math.ceil(tab.getBoundingClientRect().width); const currentWidth = Math.ceil(tab.getBoundingClientRect().width);
const maxWidth = Math.ceil(currentWidth * 1.4); const maxWidth = Math.ceil(currentWidth * 1.4);
tab.style.width = `clamp(${currentWidth}px, 33vw, ${maxWidth}px)`;
tab.style.flex = '0 1 auto'; tab.style.flex = '0 1 auto';
tab.style.minWidth = `${currentWidth}px`; tab.style.minWidth = `${currentWidth}px`;
tab.style.maxWidth = `${maxWidth}px`; tab.style.maxWidth = `${maxWidth}px`;
tab.setAttribute('data-tab-min-width', `${currentWidth}px`);
tab.setAttribute('data-tab-max-width', `${maxWidth}px`);
}); });
}; };
const activateTab = (targetTab) => { const activateTab = (targetTab) => {
tabs.forEach((tab) => { tabs.forEach((tab) => {
tab.setAttribute('aria-selected', String(tab === targetTab)); tab.setAttribute('aria-selected', String(tab === targetTab));
if (mobileBreakpoint.matches) {
const minWidth = tab.getAttribute('data-tab-min-width');
const maxWidth = tab.getAttribute('data-tab-max-width');
tab.style.width = tab === targetTab ? maxWidth : minWidth;
} else {
tab.style.removeProperty('width');
}
}); });
panels.forEach((panel) => { panels.forEach((panel) => {
@@ -170,6 +180,10 @@
}); });
applyMobileTabWidthBounds(); applyMobileTabWidthBounds();
const activeTab = tabs.find((tab) => tab.getAttribute('aria-selected') === 'true') || tabs[0];
if (activeTab) {
activateTab(activeTab);
}
mobileBreakpoint.addEventListener('change', applyMobileTabWidthBounds); mobileBreakpoint.addEventListener('change', applyMobileTabWidthBounds);
window.addEventListener('resize', applyMobileTabWidthBounds); window.addEventListener('resize', applyMobileTabWidthBounds);
} }