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

fix item height calculation

Browse Source
This commit is contained in:
Alina Beck 2019-08-15 21:44:22 +01:00
parent da8491a559
commit b05599de83
2 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<template>
<ds-grid-item ref="postCard" v-bind:style="{ gridRowEnd: 'span ' + rowSpan }">
<ds-grid-item ref="postCard" :rowSpan="rowSpan">
<ds-card
:image="post.image | proxyApiUrl"
:class="{ 'post-card': true, 'disabled-content': post.disabled }"
@ -133,14 +133,15 @@ export default {
}
},
calculateItemHeight() {
const grid = document.querySelector('.masonry-grid')
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.clientHeight
const itemHeight = this.$refs.postCard.$el.clientHeight
this.rowSpan = Math.ceil((itemHeight + rowGap) / (rowHeight + rowGap))
grid.removeAttribute('style')
grid.style.gridAutoRows = `${rowHeight}px`
grid.style.alignItems = 'stretch'
},
},
mounted() {

2
webapp/pages/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<ds-grid>
<ds-grid :min-column-width="300">
<ds-grid-item v-show="hashtag" :row-span="2" column-span="fullWidth">
<filter-menu :hashtag="hashtag" @clearSearch="clearSearch" />
</ds-grid-item>