From 1696c50c8690382160c0986533a37d27d140791b Mon Sep 17 00:00:00 2001 From: rinsuki <428rinsuki+git@gmail.com> Date: Mon, 26 Mar 2018 17:26:21 +0900 Subject: [PATCH] =?UTF-8?q?media-list=E3=81=AEgrid=E3=81=AE=E5=87=A6?= =?UTF-8?q?=E7=90=86=E3=82=92JS=E3=81=8B=E3=82=89CSS=E3=81=AB=E7=A7=BB?= =?UTF-8?q?=E8=A1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/views/components/media-list.vue | 77 +++++++++---------- 1 file changed, 35 insertions(+), 42 deletions(-) diff --git a/src/web/app/common/views/components/media-list.vue b/src/web/app/common/views/components/media-list.vue index b0e668508..d0da584a4 100644 --- a/src/web/app/common/views/components/media-list.vue +++ b/src/web/app/common/views/components/media-list.vue @@ -1,6 +1,8 @@ @@ -9,46 +11,6 @@ import Vue from 'vue'; export default Vue.extend({ props: ['mediaList'], - mounted() { - const tags = this.$refs.media as Vue[]; - - if (this.mediaList.length == 1) { - (this.$el.style as any).gridTemplateRows = '1fr'; - - (tags[0].$el.style as any).gridColumn = '1 / 2'; - (tags[0].$el.style as any).gridRow = '1 / 2'; - } else if (this.mediaList.length == 2) { - (this.$el.style as any).gridTemplateColumns = '1fr 1fr'; - (this.$el.style as any).gridTemplateRows = '1fr'; - - (tags[0].$el.style as any).gridColumn = '1 / 2'; - (tags[0].$el.style as any).gridRow = '1 / 2'; - (tags[1].$el.style as any).gridColumn = '2 / 3'; - (tags[1].$el.style as any).gridRow = '1 / 2'; - } else if (this.mediaList.length == 3) { - (this.$el.style as any).gridTemplateColumns = '1fr 0.5fr'; - (this.$el.style as any).gridTemplateRows = '1fr 1fr'; - - (tags[0].$el.style as any).gridColumn = '1 / 2'; - (tags[0].$el.style as any).gridRow = '1 / 3'; - (tags[1].$el.style as any).gridColumn = '2 / 3'; - (tags[1].$el.style as any).gridRow = '1 / 2'; - (tags[2].$el.style as any).gridColumn = '2 / 3'; - (tags[2].$el.style as any).gridRow = '2 / 3'; - } else if (this.mediaList.length == 4) { - (this.$el.style as any).gridTemplateColumns = '1fr 1fr'; - (this.$el.style as any).gridTemplateRows = '1fr 1fr'; - - (tags[0].$el.style as any).gridColumn = '1 / 2'; - (tags[0].$el.style as any).gridRow = '1 / 2'; - (tags[1].$el.style as any).gridColumn = '2 / 3'; - (tags[1].$el.style as any).gridRow = '1 / 2'; - (tags[2].$el.style as any).gridColumn = '1 / 2'; - (tags[2].$el.style as any).gridRow = '2 / 3'; - (tags[3].$el.style as any).gridColumn = '2 / 3'; - (tags[3].$el.style as any).gridRow = '2 / 3'; - } - } }); @@ -60,4 +22,35 @@ export default Vue.extend({ @media (max-width 500px) height 192px + + &[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 + + :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 +