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

Set uniform mobile tab widths within min/max bounds for all tabs

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-21 18:30:11 +02:00
parent c7517c65b4
commit 34f871e627
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/card-gruppe-mit-tastennavigation.html
+5 -5
View File
@@ -139,9 +139,9 @@
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.style.width = `${preferredWidth}px`;
tab.setAttribute('data-tab-min-width', `${currentWidth}px`); tab.setAttribute('data-tab-min-width', `${currentWidth}px`);
tab.setAttribute('data-tab-max-width', `${maxWidth}px`); tab.setAttribute('data-tab-max-width', `${maxWidth}px`);
tab.setAttribute('data-tab-preferred-width', `${preferredWidth}px`);
}); });
}; };
@@ -149,10 +149,10 @@
tabs.forEach((tab) => { tabs.forEach((tab) => {
tab.setAttribute('aria-selected', String(tab === targetTab)); tab.setAttribute('aria-selected', String(tab === targetTab));
if (mobileBreakpoint.matches) { if (mobileBreakpoint.matches) {
const minWidth = tab.getAttribute('data-tab-min-width'); const minWidth = Number((tab.getAttribute('data-tab-min-width') || '').replace('px', ''));
const maxWidth = tab.getAttribute('data-tab-max-width'); const maxWidth = Number((tab.getAttribute('data-tab-max-width') || '').replace('px', ''));
const preferredWidth = tab.getAttribute('data-tab-preferred-width'); const preferredWidth = Math.ceil(minWidth + ((maxWidth - minWidth) * 0.5));
tab.style.width = tab === targetTab ? maxWidth : `clamp(${minWidth}, ${preferredWidth}, ${maxWidth})`; tab.style.width = `${preferredWidth}px`;
} else { } else {
tab.style.removeProperty('width'); tab.style.removeProperty('width');
} }