Sharkey/src/web/app/common/views/components/images.vue

64 lines
2 KiB
Vue
Raw Normal View History

2018-02-12 02:06:22 +02:00
<template>
<div class="mk-images">
<mk-images-image v-for="image in images" ref="image" :image="image" :key="image.id"/>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: ['images'],
mounted() {
const tags = this.$refs.image as Vue[];
if (this.images.length == 1) {
2018-02-13 02:27:57 +02:00
(this.$el.style as any).gridTemplateRows = '1fr';
2018-02-12 02:06:22 +02:00
2018-02-13 02:27:57 +02:00
(tags[0].$el.style as any).gridColumn = '1 / 2';
(tags[0].$el.style as any).gridRow = '1 / 2';
2018-02-12 02:06:22 +02:00
} else if (this.images.length == 2) {
2018-02-13 02:27:57 +02:00
(this.$el.style as any).gridTemplateColumns = '1fr 1fr';
(this.$el.style as any).gridTemplateRows = '1fr';
2018-02-12 02:06:22 +02:00
2018-02-13 02:27:57 +02:00
(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';
2018-02-12 02:06:22 +02:00
} else if (this.images.length == 3) {
2018-02-13 02:27:57 +02:00
(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';
2018-02-12 02:06:22 +02:00
} else if (this.images.length == 4) {
2018-02-13 02:27:57 +02:00
(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';
2018-02-12 02:06:22 +02:00
}
}
});
</script>
2018-02-15 08:14:28 +02:00
<style lang="stylus" scoped>
.mk-images
display grid
grid-gap 4px
height 256px
@media (max-width 500px)
height 192px
</style>