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> <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>