diff --git a/src/client/components/media-list.vue b/src/client/components/media-list.vue index 3a34ad813e..6479f9079a 100644 --- a/src/client/components/media-list.vue +++ b/src/client/components/media-list.vue @@ -4,7 +4,7 @@ <x-banner :media="media" :key="media.id"/> </template> <div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container" ref="gridOuter"> - <div :data-count="mediaList.filter(media => previewable(media)).length" :style="gridHeight !== null ? { height: `${gridHeight}px` } : {}"> + <div :data-count="mediaList.filter(media => previewable(media)).length" :style="gridInnerStyle"> <template v-for="media in mediaList"> <x-video :video="media" :key="media.id" v-if="media.type.startsWith('video')"/> <x-image :image="media" :key="media.id" v-else-if="media.type.startsWith('image')" :raw="raw"/> @@ -37,38 +37,39 @@ export default Vue.extend({ type: Number } }, - computed: { - gridHeight() { - if (this.$refs.gridOuter) { - if (this.$props.width) { - return this.$props.width * 9 / 16; - } else if (this.$refs.gridOuter.clientHeight) { - return this.$refs.gridOuter.clientHeight; - } - return 287; - } - - return null; + data() { + return { + gridInnerStyle: {} } }, - /*mounted() { - console.log(this.$props.width) - //#region for Safari bug - if (this.$refs.gridOuter) { - if (this.$props.width) { - this.$refs.gridInner.style.height = `${this.$props.width * 9 / 16}px` - } else if (this.$refs.gridOuter.clientHeight) { - this.$refs.gridInner.style.height = `${this.$refs.gridOuter.clientHeight}px` - } else { - this.$refs.gridInner.style.height = '287px'; - } + mounted() { + // for Safari bug + if (this.$refs.gridOuter.clientHeight) { + this.gridInnerStyle = { height: `${this.$refs.gridOuter.clientHeight}px` } } - //#endregion - },*/ + } methods: { previewable(file) { return file.type.startsWith('video') || file.type.startsWith('image'); } + }, + watch: { + width(width) { + // for Safari bug + if (this.$refs.gridOuter) { + let height = 287 + + if (width) { + height = width * 9 / 16; + } else if (this.$refs.gridOuter.clientHeight) { + height = this.$refs.gridOuter.clientHeight; + } + + this.gridInnerStyle = { height: `${height}px` } + } else { + this.gridInnerStyle = {} + } + } } }); </script> diff --git a/src/client/components/sub-note-content.vue b/src/client/components/sub-note-content.vue index 32752cf676..58c07aa15f 100644 --- a/src/client/components/sub-note-content.vue +++ b/src/client/components/sub-note-content.vue @@ -45,6 +45,7 @@ export default Vue.extend({ }; }, mounted() { + // for Safari bug this.width = this.$refs.i.getBoundingClientRect().width; } });