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