teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat: scroll to status (#127)

Browse source 
Co-authored-by: Daniel Roe <daniel@roe.dev>
This commit is contained in:
patak 2022-11-26 16:38:55 +01:00 committed by GitHub
parent e51ca06f97
commit 5c60497421
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/status/StatusCard.vue
View file

@ -38,7 +38,7 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
</script> </script>
<template> <template>
<div ref="el" flex flex-col gap-2 px-4 transition-100 :class="{ 'hover:bg-active': hover }" tabindex="0" focus:outline-none focus-visible:ring="2 primary" @click="onclick" @keydown.enter="onclick"> <div :id="`status-${status.id}`" ref="el" flex flex-col gap-2 px-4 transition-100 :class="{ 'hover:bg-active': hover }" tabindex="0" focus:outline-none focus-visible:ring="2 primary" @click="onclick" @keydown.enter="onclick">
<div v-if="rebloggedBy" pl8> <div v-if="rebloggedBy" pl8>
<div flex="~ wrap" gap-1 items-center text-gray:75 text-sm> <div flex="~ wrap" gap-1 items-center text-gray:75 text-sm>
<div i-ri:repeat-fill mr-1 /> <div i-ri:repeat-fill mr-1 />

2
components/status/StatusDetails.vue
View file

@ -17,7 +17,7 @@ const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === sta
</script> </script>
<template> <template>
<div flex flex-col gap-2 py3 px-4> <div flex flex-col gap-2 py3 px-4 :id="`status-${status.id}`">
<AccountInfo :account="status.account" /> <AccountInfo :account="status.account" />
<StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" /> <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" />
<StatusSpoiler :enabled="status.sensitive"> <StatusSpoiler :enabled="status.sensitive">

7
pages/@[account]/[status].vue
View file

@ -7,6 +7,13 @@ const main = ref<Component | null>(null)
const status = window.history.state?.status ?? await fetchStatus(id) const status = window.history.state?.status ?? await fetchStatus(id)
const { data: context } = useAsyncData(`context:${id}`, () => masto.statuses.fetchContext(id)) const { data: context } = useAsyncData(`context:${id}`, () => masto.statuses.fetchContext(id))
const unsubscribe = watch(context, async (context) => {
if (context) {
const statusElement = document.querySelector(`#status-${id}`)
statusElement?.scrollIntoView()
unsubscribe()
}
}, { flush: 'post' })
</script> </script>
<template> <template>