mirror of
https://github.com/misskey-dev/misskey.git
synced 2024-12-25 22:22:51 +09:00
Add workaround for Safari bug
This commit is contained in:
parent
b375bbc75c
commit
fb28b238cf
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="mk-media-list">
|
<div class="mk-media-list">
|
||||||
<div :data-count="mediaList.length">
|
<div :data-count="mediaList.length" ref="grid">
|
||||||
<template v-for="media in mediaList">
|
<template v-for="media in mediaList">
|
||||||
<mk-media-video :video="media" :key="media.id" v-if="media.type.startsWith('video')" :inline-playable="mediaList.length === 1"/>
|
<mk-media-video :video="media" :key="media.id" v-if="media.type.startsWith('video')" :inline-playable="mediaList.length === 1"/>
|
||||||
<mk-media-image :image="media" :key="media.id" v-else :raw="raw"/>
|
<mk-media-image :image="media" :key="media.id" v-else :raw="raw"/>
|
||||||
@ -20,6 +20,10 @@ export default Vue.extend({
|
|||||||
raw: {
|
raw: {
|
||||||
default: false
|
default: false
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// for Safari bug
|
||||||
|
this.$refs.grid.style.height = `${this.$refs.grid.clientHeight}px`;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
@ -36,9 +40,9 @@ export default Vue.extend({
|
|||||||
> div
|
> div
|
||||||
position absolute
|
position absolute
|
||||||
top 0
|
top 0
|
||||||
left 0
|
|
||||||
bottom 0
|
|
||||||
right 0
|
right 0
|
||||||
|
bottom 0
|
||||||
|
left 0
|
||||||
display grid
|
display grid
|
||||||
grid-gap 4px
|
grid-gap 4px
|
||||||
|
|
||||||
@ -54,7 +58,7 @@ export default Vue.extend({
|
|||||||
grid-row 1 / 3
|
grid-row 1 / 3
|
||||||
:nth-child(3)
|
:nth-child(3)
|
||||||
grid-column 2 / 3
|
grid-column 2 / 3
|
||||||
grid-row 2/3
|
grid-row 2 / 3
|
||||||
&[data-count="4"]
|
&[data-count="4"]
|
||||||
grid-template-columns 1fr 1fr
|
grid-template-columns 1fr 1fr
|
||||||
grid-template-rows 1fr 1fr
|
grid-template-rows 1fr 1fr
|
||||||
|
Loading…
Reference in New Issue
Block a user