heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

Merge pull request #1299 from rinsuki/features/media-list-grid-js-to-css

Browse source 
media-listのgridの処理をJSからCSSに移行
This commit is contained in:
syuilo 2018-03-26 17:28:20 +09:00 committed by GitHub
commit e6af2ebe0c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 35 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
src/web/app/common/views/components/media-list.vue
View file

@ -1,6 +1,8 @@
<template> <template>
<div class="mk-media-list"> <div class="mk-media-list" :data-count="mediaList.length">
<mk-media-image v-for="media in mediaList" ref="media" :image="media" :key="media.id"/> <template v-for="media in mediaList">
<mk-media-image :image="media" :key="media.id"/>
</template>
</div> </div>
</template> </template>
@ -9,46 +11,6 @@ import Vue from 'vue';
export default Vue.extend({ export default Vue.extend({
props: ['mediaList'], 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';
}
}
}); });
</script> </script>
@ -60,4 +22,35 @@ export default Vue.extend({
@media (max-width 500px) @media (max-width 500px)
height 192px 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
</style> </style>