Improve toot detail UI
This commit is contained in:
parent
e605f3aa07
commit
af9ea04f7c
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<div class="toot-detail">
|
||||
<div class="toot-ancestors" v-for="(message, index) in ancestors" v-bind:key="index">
|
||||
<div class="toot-detail" ref="detail">
|
||||
<div class="toot-ancestors" v-for="(message, index) in ancestors" v-bind:key="'ancestors-' + index">
|
||||
<toot :message="message"></toot>
|
||||
</div>
|
||||
<div class="original-toot">
|
||||
<div class="original-toot" ref="original">
|
||||
<toot :message="message"></toot>
|
||||
</div>
|
||||
<div class="toot-descendants" v-for="(message, index) in descendants" v-bind:key="index">
|
||||
<div class="toot-descendants" v-for="(message, index) in descendants" v-bind:key="'descendants' + index">
|
||||
<toot :message="message"></toot>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -32,6 +32,10 @@ export default {
|
|||
methods: {
|
||||
load () {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/TootDetail/fetchToot', this.message)
|
||||
.then(() => {
|
||||
const toot = this.$refs.original
|
||||
toot.scrollIntoView()
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
message: 'Could not fetch toot detail',
|
||||
|
@ -44,8 +48,10 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.original-toot .toot {
|
||||
.original-toot{
|
||||
.toot{
|
||||
background-color: #f2f6fc;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue