ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

look at this new and shiny grid component

Browse Source
This commit is contained in:
Alina Beck 2019-08-15 21:06:26 +01:00
parent 93142cc76b
commit 8ad1ad3769
2 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<template> <template>
<div ref="postCard" class="grid-item" v-bind:style="{ gridRowEnd: 'span ' + rowSpan }"> <ds-grid-item ref="postCard" v-bind:style="{ gridRowEnd: 'span ' + 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 +67,7 @@
</no-ssr> </no-ssr>
</template> </template>
</ds-card> </ds-card>
</div> </ds-grid-item>
</template> </template>
<script> <script>
@ -144,7 +144,7 @@ export default {
}, },
}, },
mounted() { mounted() {
const image = this.$refs.postCard.querySelector('img') const image = this.$refs.postCard.$el.querySelector('img')
if (image) { if (image) {
image.onload = this.calculateItemHeight image.onload = this.calculateItemHeight
} else { } else {

12
webapp/pages/index.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div> <div>
<div class="masonry-grid"> <ds-grid>
<div class="grid-item grid-item--full-width"> <ds-grid-item :row-span="2" column-span="fullWidth">
<filter-menu :hashtag="hashtag" @clearSearch="clearSearch" /> <filter-menu :hashtag="hashtag" @clearSearch="clearSearch" />
</div> </ds-grid-item>
<div class="grid-item grid-item--full-width"> <ds-grid-item :row-span="2" column-span="fullWidth">
<div class="sorting-dropdown"> <div class="sorting-dropdown">
<ds-select <ds-select
v-model="selected" v-model="selected"
@ -14,7 +14,7 @@
@input="toggleOnlySorting" @input="toggleOnlySorting"
></ds-select> ></ds-select>
</div> </div>
</div> </ds-grid-item>
<hc-post-card <hc-post-card
v-for="post in posts" v-for="post in posts"
:key="post.id" :key="post.id"
@ -22,7 +22,7 @@
:width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }" :width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
@removePostFromList="deletePost(index, post.id)" @removePostFromList="deletePost(index, post.id)"
/> />
</div> </ds-grid>
<no-ssr> <no-ssr>
<ds-button <ds-button
v-tooltip="{ content: 'Create a new Post', placement: 'left', delay: { show: 500 } }" v-tooltip="{ content: 'Create a new Post', placement: 'left', delay: { show: 500 } }"