Hide inactive tab labels on mobile (#9609)
Co-authored-by: Freeplay <Freeplay@duck.com> Reviewed-on: https://codeberg.org/calckey/calckey/pulls/9609 Co-authored-by: Free <freeplay@duck.com> Co-committed-by: Free <freeplay@duck.com>
This commit is contained in:
parent
5c88cef03b
commit
474a02bfe0
@ -153,12 +153,14 @@ onMounted(() => {
|
||||
if (tabEl && tabHighlightEl) {
|
||||
// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
|
||||
// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
|
||||
tabEl.addEventListener("transitionend", () => {
|
||||
const parentRect = tabsEl.getBoundingClientRect();
|
||||
const rect = tabEl.getBoundingClientRect();
|
||||
const left = (rect.left - parentRect.left + tabsEl?.scrollLeft);
|
||||
tabHighlightEl.style.width = rect.width + 'px';
|
||||
tabHighlightEl.style.left = left + 'px';
|
||||
tabsEl.scrollTo({left: left - 80, behavior: "smooth"});
|
||||
tabsEl?.scrollTo({left: left - 80, behavior: "smooth"});
|
||||
})
|
||||
}
|
||||
});
|
||||
}, {
|
||||
@ -229,6 +231,14 @@ onUnmounted(() => {
|
||||
display: inline-block;
|
||||
min-width: 20%;
|
||||
}
|
||||
> .tab {
|
||||
&:not(.active) > .title {
|
||||
font-size: 0;
|
||||
opacity: 0;
|
||||
margin-inline: 0;
|
||||
transition: font-size .2s, opacity .1s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -373,6 +383,9 @@ onUnmounted(() => {
|
||||
> .icon + .title {
|
||||
margin-left: 8px;
|
||||
}
|
||||
> .title {
|
||||
transition: font-size .2s, opacity .2s .15s;
|
||||
}
|
||||
}
|
||||
|
||||
> .highlight {
|
||||
@ -381,7 +394,8 @@ onUnmounted(() => {
|
||||
height: 3px;
|
||||
background: var(--accent);
|
||||
border-radius: 999px;
|
||||
transition: all 0.2s ease;
|
||||
transition: width .2s, left .2s;
|
||||
transition-timing-function: cubic-bezier(0,0,0,1.2);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user