heartles
/
egirlskey
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))">
<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');

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

@ -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>