From 11409b723e8aca66d3b32a08a3c295427ee735ab Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Tue, 29 May 2018 11:45:01 +0900 Subject: [PATCH] :art: --- .../common/views/components/media-list.vue | 85 +++++++++++-------- 1 file changed, 48 insertions(+), 37 deletions(-) diff --git a/src/client/app/common/views/components/media-list.vue b/src/client/app/common/views/components/media-list.vue index ff9d5e1022..384f6cd27c 100644 --- a/src/client/app/common/views/components/media-list.vue +++ b/src/client/app/common/views/components/media-list.vue @@ -1,9 +1,11 @@ <template> -<div class="mk-media-list" :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 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,41 +26,50 @@ export default Vue.extend({ <style lang="stylus" scoped> .mk-media-list - display grid - grid-gap 4px - height 256px + width 100% - @media (max-width 500px) - height 192px + &: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 + + &[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) - grid-row 1 / 3 - :nth-child(3) + grid-column 1 / 2 + grid-row 1 / 2 + :nth-child(2) grid-column 2 / 3 - grid-row 2/3 - &[data-count="4"] - grid-template-columns 1fr 1fr - grid-template-rows 1fr 1fr - - :nth-child(1) - grid-column 1 / 2 - 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 + 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>