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) {
|
if (tabEl && tabHighlightEl) {
|
||||||
// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
|
// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
|
||||||
// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
|
// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
|
||||||
|
tabEl.addEventListener("transitionend", () => {
|
||||||
const parentRect = tabsEl.getBoundingClientRect();
|
const parentRect = tabsEl.getBoundingClientRect();
|
||||||
const rect = tabEl.getBoundingClientRect();
|
const rect = tabEl.getBoundingClientRect();
|
||||||
const left = (rect.left - parentRect.left + tabsEl?.scrollLeft);
|
const left = (rect.left - parentRect.left + tabsEl?.scrollLeft);
|
||||||
tabHighlightEl.style.width = rect.width + 'px';
|
tabHighlightEl.style.width = rect.width + 'px';
|
||||||
tabHighlightEl.style.left = left + '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;
|
display: inline-block;
|
||||||
min-width: 20%;
|
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 {
|
> .icon + .title {
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
|
> .title {
|
||||||
|
transition: font-size .2s, opacity .2s .15s;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> .highlight {
|
> .highlight {
|
||||||
@ -381,7 +394,8 @@ onUnmounted(() => {
|
|||||||
height: 3px;
|
height: 3px;
|
||||||
background: var(--accent);
|
background: var(--accent);
|
||||||
border-radius: 999px;
|
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;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user