mirror of
https://github.com/misskey-dev/misskey
synced 2024-12-14 22:59:43 +09:00
🎨
This commit is contained in:
parent
4c54d68fad
commit
11409b723e
@ -1,9 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="mk-media-list" :data-count="mediaList.length">
|
<div class="mk-media-list">
|
||||||
<template v-for="media in mediaList">
|
<div :data-count="mediaList.length">
|
||||||
<mk-media-video :video="media" :key="media.id" v-if="media.type.startsWith('video')" :inline-playable="mediaList.length === 1"/>
|
<template v-for="media in mediaList">
|
||||||
<mk-media-image :image="media" :key="media.id" v-else :raw="raw"/>
|
<mk-media-video :video="media" :key="media.id" v-if="media.type.startsWith('video')" :inline-playable="mediaList.length === 1"/>
|
||||||
</template>
|
<mk-media-image :image="media" :key="media.id" v-else :raw="raw"/>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -24,41 +26,50 @@ export default Vue.extend({
|
|||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
.mk-media-list
|
.mk-media-list
|
||||||
display grid
|
width 100%
|
||||||
grid-gap 4px
|
|
||||||
height 256px
|
|
||||||
|
|
||||||
@media (max-width 500px)
|
&:before
|
||||||
height 192px
|
content ''
|
||||||
|
display block
|
||||||
|
padding-top 56.25% // 16:9
|
||||||
|
|
||||||
|
> div
|
||||||
|
position absolute
|
||||||
|
top 0
|
||||||
|
left 0
|
||||||
|
right 0
|
||||||
|
bottom 0
|
||||||
|
display grid
|
||||||
|
grid-gap 4px
|
||||||
|
|
||||||
|
&[data-count="1"]
|
||||||
|
grid-template-rows 1fr
|
||||||
|
&[data-count="2"]
|
||||||
|
grid-template-columns 1fr 1fr
|
||||||
|
grid-template-rows 1fr
|
||||||
|
&[data-count="3"]
|
||||||
|
grid-template-columns 1fr 0.5fr
|
||||||
|
grid-template-rows 1fr 1fr
|
||||||
|
:nth-child(1)
|
||||||
|
grid-row 1 / 3
|
||||||
|
:nth-child(3)
|
||||||
|
grid-column 2 / 3
|
||||||
|
grid-row 2/3
|
||||||
|
&[data-count="4"]
|
||||||
|
grid-template-columns 1fr 1fr
|
||||||
|
grid-template-rows 1fr 1fr
|
||||||
|
|
||||||
&[data-count="1"]
|
|
||||||
grid-template-rows 1fr
|
|
||||||
&[data-count="2"]
|
|
||||||
grid-template-columns 1fr 1fr
|
|
||||||
grid-template-rows 1fr
|
|
||||||
&[data-count="3"]
|
|
||||||
grid-template-columns 1fr 0.5fr
|
|
||||||
grid-template-rows 1fr 1fr
|
|
||||||
:nth-child(1)
|
:nth-child(1)
|
||||||
grid-row 1 / 3
|
grid-column 1 / 2
|
||||||
:nth-child(3)
|
grid-row 1 / 2
|
||||||
|
:nth-child(2)
|
||||||
grid-column 2 / 3
|
grid-column 2 / 3
|
||||||
grid-row 2/3
|
grid-row 1 / 2
|
||||||
&[data-count="4"]
|
:nth-child(3)
|
||||||
grid-template-columns 1fr 1fr
|
grid-column 1 / 2
|
||||||
grid-template-rows 1fr 1fr
|
grid-row 2 / 3
|
||||||
|
:nth-child(4)
|
||||||
:nth-child(1)
|
grid-column 2 / 3
|
||||||
grid-column 1 / 2
|
grid-row 2 / 3
|
||||||
grid-row 1 / 2
|
|
||||||
:nth-child(2)
|
|
||||||
grid-column 2 / 3
|
|
||||||
grid-row 1 / 2
|
|
||||||
:nth-child(3)
|
|
||||||
grid-column 1 / 2
|
|
||||||
grid-row 2 / 3
|
|
||||||
:nth-child(4)
|
|
||||||
grid-column 2 / 3
|
|
||||||
grid-row 2 / 3
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
Loading…
Reference in New Issue
Block a user