Improve toot detail UI

This commit is contained in:
Sardo 2018-04-11 13:08:12 +08:00
parent e605f3aa07
commit af9ea04f7c
1 changed files with 13 additions and 7 deletions

View File

@ -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 {
background-color: #f2f6fc;
outline: 0;
.original-toot{
.toot{
background-color: #f2f6fc;
outline: 0;
}
}
</style>