versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 08:28:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: 🐛 Fix AdaptiveDropdown not responding to touch on mobile

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-06-04 18:44:12 -10:00
parent 3c68c2e788
commit f91df20dc1
No known key found for this signature in database
3 changed files with 67 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
components/composer/modal.client.vue
View file

@ -46,7 +46,6 @@ useListen("composer:open", () => {
useListen("composer:close", () => {
open.value = false;
});
const log = console.log;
const tokenData = useTokenData();
const instance = useInstance();
</script>

40
components/dropdowns/AdaptiveDropdown.vue
View file

@ -5,16 +5,19 @@
<Menu.Trigger>
<slot name="button"></slot>
</Menu.Trigger>
<div @mousedown="open = false" @touchstart="open = false" v-if="open" class="fixed inset-0 z-10 bg-black/50">
<Teleport to="body">
<div @mousedown="open = false" @touchstart="open = false" v-if="open"
class="fixed inset-0 z-10 bg-black/50">
</div>
<Menu.Positioner :class="isSmallScreen && '!bottom-0 !top-[unset] fixed inset-x-0 w-full !translate-y-0'">
<transition enter-active-class="transition ease-in duration-100"
enter-from-class="transform opacity-0 translate-y-full sm:translate-y-0 scale-95"
enter-to-class="transform translate-y-0 opacity-100 scale-100"
leave-active-class="transition ease-out duration-75" leave-from-class="transform opacity-100 scale-100"
leave-to-class="transform opacity-0 scale-95">
leave-active-class="transition ease-out duration-75"
leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
<Menu.Content v-if="open"
:class="['z-20 mt-2 rounded overflow-hidden p-1 space-y-1 bg-dark-700 shadow-lg ring-1 ring-white/10 focus:outline-none min-w-56']">
:class="['z-20 mt-2 rounded overflow-hidden p-1 space-y-1 bg-dark-700 shadow-lg ring-1 ring-white/10 focus:outline-none min-w-56', id]">
<div v-if="isSmallScreen" class="w-full py-2">
<div class="rounded-full h-1 bg-gray-400 w-12 mx-auto"></div>
</div>
@ -22,6 +25,7 @@
</Menu.Content>
</transition>
</Menu.Positioner>
</Teleport>
</Menu.Root>
</template>
@ -31,4 +35,32 @@ const { width } = useWindowSize();
const isSmallScreen = computed(() => width.value < 768);
const open = ref(false);
const id = useId();
// HACK: Fix the menu children not reacting to touch events as click for some reason
const registerClickHandlers = () => {
const targetElement = document.querySelector(`.${id}`);
if (targetElement) {
for (const el of targetElement.children) {
el.addEventListener("pointerdown", (e) => {
e.stopPropagation();
e.preventDefault();
// Click all element children
for (const elChild of Array.from(el.children)) {
if (elChild instanceof HTMLElement) {
elChild.click();
}
}
});
}
}
};
// When opening, register click handlers
watch(open, async (o) => {
if (o) {
await nextTick();
registerClickHandlers();
}
});
</script>

3
components/sidebars/navigation.vue
View file

@ -106,7 +106,6 @@
</template>
<template #items>
<ClientOnly>
<Menu.Item value="" v-if="tokenData">
<ButtonsDropdownElement icon="tabler:logout" class="w-full"
@click="signOut().finally(() => loadingAuth = false)" :loading="loadingAuth">
@ -126,7 +125,6 @@
</ButtonsDropdownElement>
</NuxtLink>
</Menu.Item>
</ClientOnly>
</template>
</DropdownsAdaptiveDropdown>
<button @click="compose" v-if="tokenData"
@ -165,7 +163,6 @@ const timelines = ref([
requiresAuth: true,
},
]);
const log = console.log;
const visibleTimelines = computed(() =>
timelines.value.filter(