mirror of
https://activitypub.software/TransFem-org/Sharkey.git
synced 2024-12-15 13:25:44 +01:00
🎨
This commit is contained in:
parent
4c54d68fad
commit
11409b723e
1 changed files with 48 additions and 37 deletions
|
@ -1,9 +1,11 @@
|
|||
<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">
|
||||
<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"/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -24,12 +26,21 @@ export default Vue.extend({
|
|||
|
||||
<style lang="stylus" scoped>
|
||||
.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
|
||||
grid-gap 4px
|
||||
height 256px
|
||||
|
||||
@media (max-width 500px)
|
||||
height 192px
|
||||
|
||||
&[data-count="1"]
|
||||
grid-template-rows 1fr
|
||||
|
|
Loading…
Reference in a new issue