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

View file

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

View file

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<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">
<XHome v-if="tab === 'home'" :user="user" @unfoldFiles="() => { tab = 'files'; }"/>
<div v-else-if="tab === 'notes'" class="_spacer" style="--MI_SPACER-w: 800px;">