🎨
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">
|
||||||
|
<div :data-count="mediaList.length">
|
||||||
<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"/>
|
||||||
</template>
|
</template>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -24,12 +26,21 @@ export default Vue.extend({
|
|||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
.mk-media-list
|
.mk-media-list
|
||||||
|
width 100%
|
||||||
|
|
||||||
|
&:before
|
||||||
|
content ''
|
||||||
|
display block
|
||||||
|
padding-top 56.25% // 16:9
|
||||||
|
|
||||||
|
> div
|
||||||
|
position absolute
|
||||||
|
top 0
|
||||||
|
left 0
|
||||||
|
right 0
|
||||||
|
bottom 0
|
||||||
display grid
|
display grid
|
||||||
grid-gap 4px
|
grid-gap 4px
|
||||||
height 256px
|
|
||||||
|
|
||||||
@media (max-width 500px)
|
|
||||||
height 192px
|
|
||||||
|
|
||||||
&[data-count="1"]
|
&[data-count="1"]
|
||||||
grid-template-rows 1fr
|
grid-template-rows 1fr
|
||||||
|
Loading…
Reference in New Issue
Block a user