diff --git a/src/client/components/media-list.vue b/src/client/components/media-list.vue index 6479f9079..27f10a307 100644 --- a/src/client/components/media-list.vue +++ b/src/client/components/media-list.vue @@ -33,8 +33,9 @@ export default Vue.extend({ raw: { default: false }, - width: { - type: Number + // specify the parent element + parentElement: { + type: Object } }, data() { @@ -43,31 +44,32 @@ export default Vue.extend({ } }, mounted() { - // for Safari bug - if (this.$refs.gridOuter.clientHeight) { - this.gridInnerStyle = { height: `${this.$refs.gridOuter.clientHeight}px` } - } - } + this.size(); + window.addEventListener('resize', this.size); + this.$on('resize', this.size); + }, + beforeDestroy() { + window.removeEventListener('resize', this.size); + }, methods: { previewable(file) { return file.type.startsWith('video') || file.type.startsWith('image'); - } - }, - watch: { - width(width) { + }, + size() { // for Safari bug if (this.$refs.gridOuter) { - let height = 287 + let height = 287; + const parent = this.$props.parentElement || this.$parent.$el; - if (width) { - height = width * 9 / 16; - } else if (this.$refs.gridOuter.clientHeight) { + if (this.$refs.gridOuter.clientHeight) { height = this.$refs.gridOuter.clientHeight; + } else if (parent) { + height = parent.getBoundingClientRect().width * 9 / 16; } - this.gridInnerStyle = { height: `${height}px` } + this.gridInnerStyle = { height: `${height}px` }; } else { - this.gridInnerStyle = {} + this.gridInnerStyle = {}; } } } diff --git a/src/client/components/sub-note-content.vue b/src/client/components/sub-note-content.vue index 58c07aa15..fdb311c62 100644 --- a/src/client/components/sub-note-content.vue +++ b/src/client/components/sub-note-content.vue @@ -9,7 +9,7 @@
({{ $t('withNFiles', { n: note.files.length }) }}) - +
{{ $t('poll') }} @@ -39,7 +39,7 @@ export default Vue.extend({ }, data() { return { - width: 0, + i: this.$refs.i, faReply };