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

Apply mobile width bounds to inactive tabs with preferred width

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-21 18:28:47 +02:00
parent 28b94ec8a0
commit c7517c65b4
1 changed files with 4 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/card-gruppe-mit-tastennavigation.html
+4 -1
View File
@@ -135,11 +135,13 @@
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);
const preferredWidth = Math.ceil(currentWidth * 1.2);
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-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,7 +151,8 @@
if (mobileBreakpoint.matches) { if (mobileBreakpoint.matches) {
const minWidth = tab.getAttribute('data-tab-min-width'); const minWidth = tab.getAttribute('data-tab-min-width');
const maxWidth = tab.getAttribute('data-tab-max-width'); const maxWidth = tab.getAttribute('data-tab-max-width');
tab.style.width = tab === targetTab ? maxWidth : minWidth; const preferredWidth = tab.getAttribute('data-tab-preferred-width');
tab.style.width = tab === targetTab ? maxWidth : `clamp(${minWidth}, ${preferredWidth}, ${maxWidth})`;
} else { } else {
tab.style.removeProperty('width'); tab.style.removeProperty('width');
} }