FoundKeyGang/FoundKey
FoundKeyGang/FoundKey
7
19
Fork 22
Code Issues 37 Pull requests 4 Releases Activity

media-listのgridの高さがsub-note-detailsのdetailsの中だと287pxになってしまっていたのを修正 (#5951)

Browse source 
* fix files grid height

* missing colon

* ✌️

* ✌️

* fix

* remove unused event listener
This commit is contained in:
syuilo 2020-02-20 01:24:45 +09:00 committed by GitHub
commit f456feb3ff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 33 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
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="gridInnerStyle">
<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,19 +32,44 @@ export default Vue.extend({
}, },
raw: { raw: {
default: false default: false
},
// specify the parent element
parentElement: {
type: Object
}
},
data() {
return {
gridInnerStyle: {}
} }
}, },
mounted() { mounted() {
//#region for Safari bug this.size();
if (this.$refs.grid) { window.addEventListener('resize', this.size);
this.$refs.grid.style.height = this.$refs.grid.clientHeight ? `${this.$refs.grid.clientHeight}px` },
: '287px'; beforeDestroy() {
} window.removeEventListener('resize', this.size);
//#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');
},
size() {
// for Safari bug
if (this.$refs.gridOuter) {
let height = 287;
const parent = this.$props.parentElement || this.$parent.$el;
if (this.$refs.gridOuter.clientHeight) {
height = this.$refs.gridOuter.clientHeight;
} else if (parent) {
height = parent.getBoundingClientRect().width * 9 / 16;
}
this.gridInnerStyle = { height: `${height}px` };
} else {
this.gridInnerStyle = {};
}
} }
} }
}); });