fix background tomfoolery for mobile users

This commit is contained in:
Marie 2025-05-07 08:22:35 +02:00
parent 1795ac50b5
commit e77b6cf24d
No known key found for this signature in database
GPG key ID: 7ADF6C9CD9A28555
3 changed files with 6 additions and 3 deletions

View file

@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
@touchend.passive="touchEnd" @touchend.passive="touchEnd"
> >
<Transition <Transition
:class="[$style.transitionChildren, { [$style.swiping]: isSwipingForClass }]" :class="[{ [$style.swiping]: isSwipingForClass, [$style.transitionChildren]: isUserHome }]"
:enterActiveClass="$style.swipeAnimation_enterActive" :enterActiveClass="$style.swipeAnimation_enterActive"
:leaveActiveClass="$style.swipeAnimation_leaveActive" :leaveActiveClass="$style.swipeAnimation_leaveActive"
:enterFromClass="transitionName === 'swipeAnimationLeft' ? $style.swipeAnimationLeft_enterFrom : $style.swipeAnimationRight_enterFrom" :enterFromClass="transitionName === 'swipeAnimationLeft' ? $style.swipeAnimationLeft_enterFrom : $style.swipeAnimationRight_enterFrom"
@ -37,6 +37,7 @@ const tabModel = defineModel<string>('tab');
const props = defineProps<{ const props = defineProps<{
tabs: Tab[]; tabs: Tab[];
page?: string;
}>(); }>();
const emit = defineEmits<{ const emit = defineEmits<{
@ -69,6 +70,7 @@ const currentTabIndex = computed(() => props.tabs.findIndex(tab => tab.key === t
const pullDistance = ref(0); const pullDistance = ref(0);
const isSwipingForClass = ref(false); const isSwipingForClass = ref(false);
let swipeAborted = false; let swipeAborted = false;
const isUserHome = !(props.page === 'user' && tabModel.value === 'home');
function touchStart(event: TouchEvent) { function touchStart(event: TouchEvent) {
if (!prefer.r.enableHorizontalSwipe.value) return; if (!prefer.r.enableHorizontalSwipe.value) return;

View file

@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" v-bind="pageHeaderProps"/></template> <template #header><MkPageHeader v-model:tab="tab" v-bind="pageHeaderProps"/></template>
<div :class="$style.body"> <div :class="$style.body">
<MkSwiper v-if="swipable && (props.tabs?.length ?? 1) > 1" v-model:tab="tab" :class="$style.swiper" :tabs="props.tabs"> <MkSwiper v-if="swipable && (props.tabs?.length ?? 1) > 1" v-model:tab="tab" :class="$style.swiper" :tabs="props.tabs" :page="props.page">
<slot></slot> <slot></slot>
</MkSwiper> </MkSwiper>
<slot v-else></slot> <slot v-else></slot>
@ -29,6 +29,7 @@ import { useRouter } from '@/router.js';
const props = withDefaults(defineProps<PageHeaderProps & { const props = withDefaults(defineProps<PageHeaderProps & {
reversed?: boolean; reversed?: boolean;
swipable?: boolean; swipable?: boolean;
page?: string;
}>(), { }>(), {
reversed: false, reversed: false,
swipable: true, swipable: true,

View file

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<PageWithHeader v-model:tab="tab" :displayBackButton="true" :tabs="headerTabs" :actions="headerActions" :swipable="isTouchUsing"> <PageWithHeader v-model:tab="tab" :displayBackButton="true" :tabs="headerTabs" :actions="headerActions" :swipable="isTouchUsing" :page="'user'">
<div v-if="user"> <div v-if="user">
<XHome v-if="tab === 'home'" :user="user" @unfoldFiles="() => { tab = 'files'; }"/> <XHome v-if="tab === 'home'" :user="user" @unfoldFiles="() => { tab = 'files'; }"/>
<div v-else-if="tab === 'notes'" class="_spacer" style="--MI_SPACER-w: 800px;"> <div v-else-if="tab === 'notes'" class="_spacer" style="--MI_SPACER-w: 800px;">