IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

remove grid logic from post component

Browse Source
This commit is contained in:
Alina Beck 2019-08-18 18:28:48 +01:00
parent 76be960c03
commit 0aa1b8046b
1 changed files with 63 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
webapp/components/PostCard/index.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<ds-grid-item ref="postCard" :rowSpan="rowSpan">
<ds-card <ds-card
:image="post.image | proxyApiUrl" :image="post.image | proxyApiUrl"
:class="{ 'post-card': true, 'disabled-content': post.disabled }" :class="{ 'post-card': true, 'disabled-content': post.disabled }"
@ -67,7 +66,6 @@
</no-ssr> </no-ssr>
</template> </template>
</ds-card> </ds-card>
</ds-grid-item>
</template> </template>
<script> <script>
@ -97,11 +95,6 @@ export default {
default: () => {}, default: () => {},
}, },
}, },
data() {
return {
rowSpan: 10,
}
},
computed: { computed: {
...mapGetters({ ...mapGetters({
user: 'auth/user', user: 'auth/user',
@ -132,26 +125,6 @@ export default {
this.$toast.error(err.message) this.$toast.error(err.message)
} }
}, },
calculateItemHeight() {
const grid = document.querySelector('.ds-grid')
const rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'))
const rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'))
grid.style.gridAutoRows = 'auto'
grid.style.alignItems = 'self-start'
const itemHeight = this.$refs.postCard.$el.clientHeight
this.rowSpan = Math.ceil((itemHeight + rowGap) / (rowHeight + rowGap))
grid.style.gridAutoRows = `${rowHeight}px`
grid.style.alignItems = 'stretch'
},
},
mounted() {
const image = this.$refs.postCard.$el.querySelector('img')
if (image) {
image.onload = this.calculateItemHeight
} else {
// use timeout to make sure layout is set up before executing
setTimeout(this.calculateItemHeight, 0)
}
}, },
} }
</script> </script>