diff --git a/src/web/app/common/views/components/reaction-picker.vue b/src/web/app/common/views/components/reaction-picker.vue index b17558ba9e..0446d7b18e 100644 --- a/src/web/app/common/views/components/reaction-picker.vue +++ b/src/web/app/common/views/components/reaction-picker.vue @@ -32,36 +32,38 @@ export default Vue.extend({ }; }, mounted() { - const popover = this.$refs.popover as any; + this.$nextTick(() => { + const popover = this.$refs.popover as any; - const rect = this.source.getBoundingClientRect(); - const width = popover.offsetWidth; - const height = popover.offsetHeight; + const rect = this.source.getBoundingClientRect(); + const width = popover.offsetWidth; + const height = popover.offsetHeight; - if (this.compact) { - const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2); - const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2); - popover.style.left = (x - (width / 2)) + 'px'; - popover.style.top = (y - (height / 2)) + 'px'; - } else { - const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2); - const y = rect.top + window.pageYOffset + this.source.offsetHeight; - popover.style.left = (x - (width / 2)) + 'px'; - popover.style.top = y + 'px'; - } + if (this.compact) { + const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2); + const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2); + popover.style.left = (x - (width / 2)) + 'px'; + popover.style.top = (y - (height / 2)) + 'px'; + } else { + const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2); + const y = rect.top + window.pageYOffset + this.source.offsetHeight; + popover.style.left = (x - (width / 2)) + 'px'; + popover.style.top = y + 'px'; + } - anime({ - targets: this.$refs.backdrop, - opacity: 1, - duration: 100, - easing: 'linear' - }); + anime({ + targets: this.$refs.backdrop, + opacity: 1, + duration: 100, + easing: 'linear' + }); - anime({ - targets: this.$refs.popover, - opacity: 1, - scale: [0.5, 1], - duration: 500 + anime({ + targets: this.$refs.popover, + opacity: 1, + scale: [0.5, 1], + duration: 500 + }); }); }, methods: { @@ -104,7 +106,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> - $border-color = rgba(27, 31, 35, 0.15) +$border-color = rgba(27, 31, 35, 0.15) .mk-reaction-picker position initial diff --git a/src/web/app/desktop/views/components/posts-post.vue b/src/web/app/desktop/views/components/posts-post.vue index cc2d7534a8..2633a63f28 100644 --- a/src/web/app/desktop/views/components/posts-post.vue +++ b/src/web/app/desktop/views/components/posts-post.vue @@ -1,5 +1,5 @@ <template> -<div class="mk-posts-post" tabindex="-1" :title="title" @keydown="onKeyDown" @dblclick="onDblClick"> +<div class="mk-posts-post" tabindex="-1" :title="title" @keydown="onKeydown" @dblclick="onDblClick"> <div class="reply-to" v-if="p.reply"> <mk-posts-post-sub post="p.reply"/> </div> @@ -32,7 +32,7 @@ <div class="text" ref="text"> <p class="channel" v-if="p.channel"><a :href="`${_CH_URL_}/${p.channel.id}`" target="_blank">{{ p.channel.title }}</a>:</p> <a class="reply" v-if="p.reply">%fa:reply%</a> - <mk-post-html :ast="p.ast" :i="$root.$data.os.i"/> + <mk-post-html v-if="p.ast" :ast="p.ast" :i="$root.$data.os.i"/> <a class="quote" v-if="p.repost">RP:</a> <mk-url-preview v-for="url in urls" :url="url" :key="url"/> </div>