From a4f197f608fba7fdab8611af7d25415f04309f77 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 15 Feb 2020 19:33:12 +0900
Subject: [PATCH 1/6] fix files grid height
---
src/client/components/media-list.vue | 37 ++++++++++++++++++----
src/client/components/sub-note-content.vue | 9 ++++--
2 files changed, 37 insertions(+), 9 deletions(-)
diff --git a/src/client/components/media-list.vue b/src/client/components/media-list.vue
index 08722ff91a..3a34ad813e 100644
--- a/src/client/components/media-list.vue
+++ b/src/client/components/media-list.vue
@@ -3,8 +3,8 @@
<template v-for="media in mediaList.filter(media => !previewable(media))">
<x-banner :media="media" :key="media.id"/>
</template>
- <div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container">
- <div :data-count="mediaList.filter(media => previewable(media)).length" ref="grid">
+ <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` } : {}">
<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"/>
@@ -32,16 +32,39 @@ export default Vue.extend({
},
raw: {
default: false
+ },
+ width: {
+ type: Number
}
},
- mounted() {
+ 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;
+ }
+ },
+ /*mounted() {
+ console.log(this.$props.width)
//#region for Safari bug
- if (this.$refs.grid) {
- this.$refs.grid.style.height = this.$refs.grid.clientHeight ? `${this.$refs.grid.clientHeight}px`
- : '287px';
+ 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';
+ }
}
//#endregion
- },
+ },*/
methods: {
previewable(file) {
return file.type.startsWith('video') || file.type.startsWith('image');
diff --git a/src/client/components/sub-note-content.vue b/src/client/components/sub-note-content.vue
index e60c197442..63f56c7681 100644
--- a/src/client/components/sub-note-content.vue
+++ b/src/client/components/sub-note-content.vue
@@ -1,5 +1,5 @@
<template>
-<div class="wrmlmaau">
+<div class="wrmlmaau" ref="i">
<div class="body">
<span v-if="note.isHidden" style="opacity: 0.5">({{ $t('private') }})</span>
<span v-if="note.deletedAt" style="opacity: 0.5">({{ $t('deleted') }})</span>
@@ -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"/>
+ <x-media-list :media-list="note.files" :width="width"/>
</details>
<details v-if="note.poll">
<summary>{{ $t('poll') }}</summary>
@@ -39,8 +39,13 @@ export default Vue.extend({
},
data() {
return {
+ width: 0,
+
faReply
};
+ },
+ mounted() {
+ this.width = this.$refs.i.getBoundingClientRect().width
}
});
</script>
From a0833ca691dce24fa96a47cbab541bfa28ae0dc9 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 15 Feb 2020 19:34:30 +0900
Subject: [PATCH 2/6] missing colon
---
src/client/components/sub-note-content.vue | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/client/components/sub-note-content.vue b/src/client/components/sub-note-content.vue
index 63f56c7681..32752cf676 100644
--- a/src/client/components/sub-note-content.vue
+++ b/src/client/components/sub-note-content.vue
@@ -45,7 +45,7 @@ export default Vue.extend({
};
},
mounted() {
- this.width = this.$refs.i.getBoundingClientRect().width
+ this.width = this.$refs.i.getBoundingClientRect().width;
}
});
</script>
From 9cb3882efa389c7d5beeca74914ab7e31cd1a51d Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 15 Feb 2020 20:18:37 +0900
Subject: [PATCH 3/6] :v:
---
src/client/components/media-list.vue | 53 +++++++++++-----------
src/client/components/sub-note-content.vue | 1 +
2 files changed, 28 insertions(+), 26 deletions(-)
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;
}
});
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 4/6] :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
};
From f799375635664dad2dfb9c6c5d4682d18f82f305 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 15 Feb 2020 21:31:56 +0900
Subject: [PATCH 5/6] fix
---
src/client/components/sub-note-content.vue | 8 +-------
1 file changed, 1 insertion(+), 7 deletions(-)
diff --git a/src/client/components/sub-note-content.vue b/src/client/components/sub-note-content.vue
index fdb311c626..e60c197442 100644
--- a/src/client/components/sub-note-content.vue
+++ b/src/client/components/sub-note-content.vue
@@ -1,5 +1,5 @@
<template>
-<div class="wrmlmaau" ref="i">
+<div class="wrmlmaau">
<div class="body">
<span v-if="note.isHidden" style="opacity: 0.5">({{ $t('private') }})</span>
<span v-if="note.deletedAt" style="opacity: 0.5">({{ $t('deleted') }})</span>
@@ -39,14 +39,8 @@ export default Vue.extend({
},
data() {
return {
- i: this.$refs.i,
-
faReply
};
- },
- mounted() {
- // for Safari bug
- this.width = this.$refs.i.getBoundingClientRect().width;
}
});
</script>
From cb3900921f397e821d02390c2148fa5ce57d4742 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 19 Feb 2020 07:49:53 +0900
Subject: [PATCH 6/6] remove unused event listener
---
src/client/components/media-list.vue | 1 -
1 file changed, 1 deletion(-)
diff --git a/src/client/components/media-list.vue b/src/client/components/media-list.vue
index 27f10a307f..6ce7df276f 100644
--- a/src/client/components/media-list.vue
+++ b/src/client/components/media-list.vue
@@ -46,7 +46,6 @@ export default Vue.extend({
mounted() {
this.size();
window.addEventListener('resize', this.size);
- this.$on('resize', this.size);
},
beforeDestroy() {
window.removeEventListener('resize', this.size);