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", () => { useListen("composer:close", () => {
open.value = false; open.value = false;
}); });
const log = console.log;
const tokenData = useTokenData(); const tokenData = useTokenData();
const instance = useInstance(); const instance = useInstance();
</script> </script>

66
components/dropdowns/AdaptiveDropdown.vue
View file

@ -5,23 +5,27 @@
<Menu.Trigger> <Menu.Trigger>
<slot name="button"></slot> <slot name="button"></slot>
</Menu.Trigger> </Menu.Trigger>
<div @mousedown="open = false" @touchstart="open = false" v-if="open" class="fixed inset-0 z-10 bg-black/50">
</div> <Teleport to="body">
<Menu.Positioner :class="isSmallScreen && '!bottom-0 !top-[unset] fixed inset-x-0 w-full !translate-y-0'"> <div @mousedown="open = false" @touchstart="open = false" v-if="open"
<transition enter-active-class="transition ease-in duration-100" class="fixed inset-0 z-10 bg-black/50">
enter-from-class="transform opacity-0 translate-y-full sm:translate-y-0 scale-95" </div>
enter-to-class="transform translate-y-0 opacity-100 scale-100" <Menu.Positioner :class="isSmallScreen && '!bottom-0 !top-[unset] fixed inset-x-0 w-full !translate-y-0'">
leave-active-class="transition ease-out duration-75" leave-from-class="transform opacity-100 scale-100" <transition enter-active-class="transition ease-in duration-100"
leave-to-class="transform opacity-0 scale-95"> enter-from-class="transform opacity-0 translate-y-full sm:translate-y-0 scale-95"
<Menu.Content v-if="open" enter-to-class="transform translate-y-0 opacity-100 scale-100"
: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']"> leave-active-class="transition ease-out duration-75"
<div v-if="isSmallScreen" class="w-full py-2"> leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
<div class="rounded-full h-1 bg-gray-400 w-12 mx-auto"></div> <Menu.Content v-if="open"
</div> :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]">
<slot name="items"></slot> <div v-if="isSmallScreen" class="w-full py-2">
</Menu.Content> <div class="rounded-full h-1 bg-gray-400 w-12 mx-auto"></div>
</transition> </div>
</Menu.Positioner> <slot name="items"></slot>
</Menu.Content>
</transition>
</Menu.Positioner>
</Teleport>
</Menu.Root> </Menu.Root>
</template> </template>
@ -31,4 +35,32 @@ const { width } = useWindowSize();
const isSmallScreen = computed(() => width.value < 768); const isSmallScreen = computed(() => width.value < 768);
const open = ref(false); 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> </script>

39
components/sidebars/navigation.vue
View file

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