diff options
Diffstat (limited to 'src/web/app/common/views/components/images.vue')
| -rw-r--r-- | src/web/app/common/views/components/images.vue | 63 |
1 files changed, 0 insertions, 63 deletions
diff --git a/src/web/app/common/views/components/images.vue b/src/web/app/common/views/components/images.vue deleted file mode 100644 index dc802a0180..0000000000 --- a/src/web/app/common/views/components/images.vue +++ /dev/null @@ -1,63 +0,0 @@ -<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) { - (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.images.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.images.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.images.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> - -<style lang="stylus" scoped> -.mk-images - display grid - grid-gap 4px - height 256px - - @media (max-width 500px) - height 192px -</style> |