ui: improve post details view

zio/stable
Anthony Fu 2022-11-27 08:35:19 +08:00
parent 1f747a6f5f
commit ca016cc6a3
2 changed files with 34 additions and 16 deletions

View File

@ -37,8 +37,6 @@ defineProps<{
</div> </div>
<slot name="header" /> <slot name="header" />
</div> </div>
<div> <slot />
<slot />
</div>
</div> </div>
</template> </template>

View File

@ -1,31 +1,49 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Component } from 'vue' import type { ComponentPublicInstance } from 'vue'
const route = useRoute() const route = useRoute()
const id = $computed(() => route.params.status as string) const id = $computed(() => route.params.status as string)
const main = ref<Component | null>(null) const main = ref<ComponentPublicInstance | null>(null)
let bottomSpace = $ref(0)
const status = window.history.state?.status ?? await fetchStatus(id) const status = window.history.state?.status ?? await fetchStatus(id)
const { data: context } = useAsyncData(`context:${id}`, () => useMasto().statuses.fetchContext(id)) const { data: context, pending } = useAsyncData(`context:${id}`, () => useMasto().statuses.fetchContext(id))
const unsubscribe = watch(context, async (context) => {
if (context) { function scrollTo() {
const statusElement = document.querySelector(`#status-${id}`) const statusElement = unrefElement(main)
statusElement?.scrollIntoView() if (!statusElement)
unsubscribe() return
}
}, { flush: 'post' }) const statusRect = statusElement.getBoundingClientRect()
bottomSpace = window.innerHeight - statusRect.height
statusElement.scrollIntoView(true)
}
onMounted(scrollTo)
if (pending) {
watchOnce(pending, async () => {
await nextTick()
scrollTo()
})
}
</script> </script>
<template> <template>
<MainContent back> <MainContent back>
<template v-if="status"> <div v-if="status" min-h-100vh>
<template v-if="context"> <template v-if="context">
<template v-for="comment of context?.ancestors" :key="comment.id"> <template v-for="comment of context?.ancestors" :key="comment.id">
<StatusCard :status="comment" border="t base" py3 /> <StatusCard :status="comment" border="t base" py3 />
</template> </template>
</template> </template>
<StatusDetails ref="main" :status="status" border="t base" /> <StatusDetails
ref="main"
:status="status"
border="t base"
style="scroll-margin-top: 60px"
/>
<PublishWidget <PublishWidget
v-if="currentUser" v-if="currentUser"
border="t base" border="t base"
@ -39,7 +57,9 @@ const unsubscribe = watch(context, async (context) => {
<StatusCard :status="comment" border="t base" py3 /> <StatusCard :status="comment" border="t base" py3 />
</template> </template>
</template> </template>
</template>
<div border="t base" :style="{ height: `${bottomSpace}px` }" />
</div>
<CommonNotFound v-else> <CommonNotFound v-else>
Status not found Status not found