natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

fix files grid height

This commit is contained in:
tamaina 2020-02-15 19:33:12 +09:00
parent ec222378c4
commit a4f197f608
2 changed files with 37 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/client/components/media-list.vue
View File

@ -3,8 +3,8 @@
<template v-for="media in mediaList.filter(media => !previewable(media))"> <template v-for="media in mediaList.filter(media => !previewable(media))">
<x-banner :media="media" :key="media.id"/> <x-banner :media="media" :key="media.id"/>
</template> </template>
<div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container"> <div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container" ref="gridOuter">
<div :data-count="mediaList.filter(media => previewable(media)).length" ref="grid"> <div :data-count="mediaList.filter(media => previewable(media)).length" :style="gridHeight !== null ? { height: `${gridHeight}px` } : {}">
<template v-for="media in mediaList"> <template v-for="media in mediaList">
<x-video :video="media" :key="media.id" v-if="media.type.startsWith('video')"/> <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"/> <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: { raw: {
default: false 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 //#region for Safari bug
if (this.$refs.grid) { if (this.$refs.gridOuter) {
this.$refs.grid.style.height = this.$refs.grid.clientHeight ? `${this.$refs.grid.clientHeight}px` if (this.$props.width) {
: '287px'; 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 //#endregion
}, },*/
methods: { methods: {
previewable(file) { previewable(file) {
return file.type.startsWith('video') || file.type.startsWith('image'); return file.type.startsWith('video') || file.type.startsWith('image');

9
src/client/components/sub-note-content.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="wrmlmaau"> <div class="wrmlmaau" ref="i">
<div class="body"> <div class="body">
<span v-if="note.isHidden" style="opacity: 0.5">({{ $t('private') }})</span> <span v-if="note.isHidden" style="opacity: 0.5">({{ $t('private') }})</span>
<span v-if="note.deletedAt" style="opacity: 0.5">({{ $t('deleted') }})</span> <span v-if="note.deletedAt" style="opacity: 0.5">({{ $t('deleted') }})</span>
@ -9,7 +9,7 @@
</div> </div>
<details v-if="note.files.length > 0"> <details v-if="note.files.length > 0">
<summary>({{ $t('withNFiles', { n: note.files.length }) }})</summary> <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>
<details v-if="note.poll"> <details v-if="note.poll">
<summary>{{ $t('poll') }}</summary> <summary>{{ $t('poll') }}</summary>
@ -39,8 +39,13 @@ export default Vue.extend({
}, },
data() { data() {
return { return {
width: 0,
faReply faReply
}; };
},
mounted() {
this.width = this.$refs.i.getBoundingClientRect().width
} }
}); });
</script> </script>