From 65704bbf01c8707f9340649dc2a7c6a8c836bf3f Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 15 Feb 2020 21:20:01 +0900
Subject: [PATCH] :v:
---
src/client/components/media-list.vue | 36 ++++++++++++----------
src/client/components/sub-note-content.vue | 4 +--
2 files changed, 21 insertions(+), 19 deletions(-)
diff --git a/src/client/components/media-list.vue b/src/client/components/media-list.vue
index 6479f9079a..27f10a307f 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 58c07aa15f..fdb311c626 100644
--- a/src/client/components/sub-note-content.vue
+++ b/src/client/components/sub-note-content.vue
@@ -9,7 +9,7 @@
</div>
<details v-if="note.files.length > 0">
<summary>({{ $t('withNFiles', { n: note.files.length }) }})</summary>
- <x-media-list :media-list="note.files" :width="width"/>
+ <x-media-list :media-list="note.files"/>
</details>
<details v-if="note.poll">
<summary>{{ $t('poll') }}</summary>
@@ -39,7 +39,7 @@ export default Vue.extend({
},
data() {
return {
- width: 0,
+ i: this.$refs.i,
faReply
};