nullobsi/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Packages Projects Releases Wiki Activity

✌️

Browse source
This commit is contained in:
tamaina 2020-02-15 20:18:37 +09:00
parent a0833ca691
commit 9cb3882efa
2 changed files with 28 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
src/client/components/media-list.vue
View file

@ -4,7 +4,7 @@
<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" ref="gridOuter"> <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"> <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"/>
@ -37,38 +37,39 @@ export default Vue.extend({
type: Number type: Number
} }
}, },
computed: { data() {
gridHeight() { return {
if (this.$refs.gridOuter) { gridInnerStyle: {}
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() { mounted() {
console.log(this.$props.width) // for Safari bug
//#region for Safari bug if (this.$refs.gridOuter.clientHeight) {
if (this.$refs.gridOuter) { this.gridInnerStyle = { height: `${this.$refs.gridOuter.clientHeight}px` }
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: { methods: {
previewable(file) { previewable(file) {
return file.type.startsWith('video') || file.type.startsWith('image'); 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> </script>

1
src/client/components/sub-note-content.vue
View file

@ -45,6 +45,7 @@ export default Vue.extend({
}; };
}, },
mounted() { mounted() {
// for Safari bug
this.width = this.$refs.i.getBoundingClientRect().width; this.width = this.$refs.i.getBoundingClientRect().width;
} }
}); });