monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

wip

Browse source
This commit is contained in:
syuilo 2018-02-15 15:14:28 +09:00
parent b9cb703f97
commit ff67563dc8
16 changed files with 57 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/web/app/desktop/views/components/images-image.vue
View file

@ -1,11 +1,14 @@
<template>
<a class="mk-images-image"
:href="image.url"
@mousemove="onMousemove"
@mouseleave="onMouseleave"
@click.prevent="onClick"
:style="style"
:title="image.name"></a>
<div>
<a class="mk-images-image"
:href="image.url"
@mousemove="onMousemove"
@mouseleave="onMouseleave"
@click.prevent="onClick"
:style="style"
:title="image.name"
></a>
</div>
</template>
<script lang="ts">
@ -50,7 +53,6 @@ export default Vue.extend({
<style lang="stylus" scoped>
.mk-images-image
display block
overflow hidden
border-radius 4px

60
src/web/app/desktop/views/components/images.vue
View file

@ -1,60 +0,0 @@
<template>
<div class="mk-images">
<mk-images-image v-for="image in images" ref="image" :image="image" :key="image.id"/>
</div>
</template>
<style lang="stylus" scoped>
.mk-images
display grid
grid-gap 4px
height 256px
</style>
<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>