diff --git a/src/web/app/desktop/script.ts b/src/web/app/desktop/script.ts index e584de3dd2..6c40ae0a36 100644 --- a/src/web/app/desktop/script.ts +++ b/src/web/app/desktop/script.ts @@ -25,6 +25,7 @@ import MkSelectDrive from './views/pages/selectdrive.vue'; import MkDrive from './views/pages/drive.vue'; import MkHomeCustomize from './views/pages/home-customize.vue'; import MkMessagingRoom from './views/pages/messaging-room.vue'; +import MkPost from './views/pages/post.vue'; /** * init @@ -75,7 +76,8 @@ init(async (launch) => { { path: '/i/drive', component: MkDrive }, { path: '/i/drive/folder/:folder', component: MkDrive }, { path: '/selectdrive', component: MkSelectDrive }, - { path: '/:user', component: MkUser } + { path: '/:user', component: MkUser }, + { path: '/:user/:post', component: MkPost } ]); }, true); diff --git a/src/web/app/desktop/views/components/post-detail.vue b/src/web/app/desktop/views/components/post-detail.vue index 6eca035209..cac4671c54 100644 --- a/src/web/app/desktop/views/components/post-detail.vue +++ b/src/web/app/desktop/views/components/post-detail.vue @@ -38,7 +38,7 @@
- +
@@ -311,17 +311,8 @@ export default Vue.extend({ > .body padding 8px 0 - > .text - cursor default - display block - margin 0 - padding 0 - overflow-wrap break-word - font-size 1.5em - color #717171 - - > .mk-url-preview - margin-top 8px + > .mk-url-preview + margin-top 8px > footer font-size 1.2em @@ -351,3 +342,14 @@ export default Vue.extend({ border-top 1px solid #eef0f2 + + diff --git a/src/web/app/desktop/views/pages/post.vue b/src/web/app/desktop/views/pages/post.vue index 446fdbcbf9..c7b8729b72 100644 --- a/src/web/app/desktop/views/pages/post.vue +++ b/src/web/app/desktop/views/pages/post.vue @@ -13,26 +13,32 @@ import Vue from 'vue'; import Progress from '../../../common/scripts/loading'; export default Vue.extend({ - props: ['postId'], data() { return { fetching: true, post: null }; }, - mounted() { - Progress.start(); + watch: { + $route: 'fetch' + }, + created() { + this.fetch(); + }, + methods: { + fetch() { + Progress.start(); + this.fetching = true; - // TODO: extract the fetch step for vue-router's caching + (this as any).api('posts/show', { + post_id: this.$route.params.post + }).then(post => { + this.post = post; + this.fetching = false; - (this as any).api('posts/show', { - post_id: this.postId - }).then(post => { - this.post = post; - this.fetching = false; - - Progress.done(); - }); + Progress.done(); + }); + } } }); diff --git a/src/web/app/mobile/script.ts b/src/web/app/mobile/script.ts index 07912a178e..dce6640eac 100644 --- a/src/web/app/mobile/script.ts +++ b/src/web/app/mobile/script.ts @@ -22,6 +22,7 @@ import MkDrive from './views/pages/drive.vue'; import MkNotifications from './views/pages/notifications.vue'; import MkMessaging from './views/pages/messaging.vue'; import MkMessagingRoom from './views/pages/messaging-room.vue'; +import MkPost from './views/pages/post.vue'; /** * init @@ -57,6 +58,7 @@ init((launch) => { { path: '/i/drive/folder/:folder', component: MkDrive }, { path: '/i/drive/file/:file', component: MkDrive }, { path: '/selectdrive', component: MkSelectDrive }, - { path: '/:user', component: MkUser } + { path: '/:user', component: MkUser }, + { path: '/:user/:post', component: MkPost } ]); }, true); diff --git a/src/web/app/mobile/views/pages/post.vue b/src/web/app/mobile/views/pages/post.vue index 03e9972a44..c62a001f2d 100644 --- a/src/web/app/mobile/views/pages/post.vue +++ b/src/web/app/mobile/views/pages/post.vue @@ -16,27 +16,36 @@ import Vue from 'vue'; import Progress from '../../../common/scripts/loading'; export default Vue.extend({ - props: ['postId'], data() { return { fetching: true, post: null }; }, + watch: { + $route: 'fetch' + }, + created() { + this.fetch(); + }, mounted() { document.title = 'Misskey'; document.documentElement.style.background = '#313a42'; + }, + methods: { + fetch() { + Progress.start(); + this.fetching = true; - Progress.start(); + (this as any).api('posts/show', { + post_id: this.$route.params.post + }).then(post => { + this.post = post; + this.fetching = false; - (this as any).api('posts/show', { - post_id: this.postId - }).then(post => { - this.post = post; - this.fetching = false; - - Progress.done(); - }); + Progress.done(); + }); + } } }); diff --git a/src/web/app/mobile/views/pages/user.vue b/src/web/app/mobile/views/pages/user.vue index b76f0ac847..335b2bc1ef 100644 --- a/src/web/app/mobile/views/pages/user.vue +++ b/src/web/app/mobile/views/pages/user.vue @@ -82,12 +82,12 @@ export default Vue.extend({ return age(this.user.profile.birthday); } }, - created() { - this.fetch(); - }, watch: { $route: 'fetch' }, + created() { + this.fetch(); + }, mounted() { document.documentElement.style.background = '#313a42'; },