feat: floating back button for xl

This commit is contained in:
patak 2023-01-05 13:35:08 +01:00
parent b4408422a8
commit f177ea1ea8
3 changed files with 23 additions and 14 deletions

View file

@ -14,7 +14,7 @@ defineProps<{
pt="[env(safe-area-inset-top,0)]"
border="b base" bg="[rgba(var(--c-bg-base-rgb),0.7)]"
>
<div :class="{ 'xl:hidden': !back }" flex justify-between px5 py2>
<div xl:hidden flex justify-between px5 py2>
<div flex gap-3 items-center overflow-hidden py2>
<NuxtLink
v-if="backOnSmallScreen || back" flex="~ gap1" items-center btn-text p-0

View file

@ -6,6 +6,7 @@ const { env } = buildInfo
<template>
<!-- Use external to force refresh page and jump to top of timeline -->
<div flex justify-between>
<NuxtLink
flex items-end gap-4
py2 px-5
@ -19,4 +20,12 @@ const { env } = buildInfo
{{ $t('app_name') }} <sup text-sm italic text-secondary mt-1>{{ env === 'release' ? 'alpha' : env }}</sup>
</div>
</NuxtLink>
<div hidden xl:flex items-center me-8 mt-2>
<NuxtLink
@click="$router.go(-1)"
>
<div i-ri:arrow-left-line class="rtl-flip" btn-text />
</NuxtLink>
</div>
</div>
</template>

View file

@ -61,7 +61,7 @@ onReactivated(() => {
<template>
<MainContent back>
<template v-if="!pending">
<div v-if="status" mt--1px border="b base" mb="50vh">
<div v-if="status" xl:mt-4 border="b base" mb="50vh">
<template v-for="comment of context?.ancestors" :key="comment.id">
<StatusCard
:status="comment" :actions="comment.visibility !== 'direct'" context="account"