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

Simplify newsfeed grid

Browse Source
This commit is contained in:
Maximilian Harz 2025-05-21 19:32:41 +02:00
parent 11f9c15c20
commit d0e540a5d6
2 changed files with 22 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webapp/components/PostTeaser/PostTeaser.vue
View File

@ -176,7 +176,7 @@ export default {
const height = Math.min(width / image.aspectRatio, 2000)
const imageElement = this.$el.querySelector('.hero-image')
if (imageElement) {
imageElement.style.height = `${height}px`
// imageElement.style.height = `${height}px`
}
},
computed: {

54
webapp/pages/index.vue
View File

@ -97,39 +97,19 @@
</div>
</div>
<!-- content grid -->
<masonry-grid
:class="[
!hashtag && !showDonations ? 'grid-margin-top' : '',
!isMobile && posts.length <= 2 ? 'grid-column-helper' : '',
]"
>
<!-- news feed -->
<template v-if="hasResults">
<masonry-grid-item
v-for="post in posts"
:key="post.id"
:imageAspectRatio="post.image && post.image.aspectRatio"
>
<post-teaser
:post="post"
:postsFilter="postsFilter['categories_some']"
@removePostFromList="posts = removePostFromList(post, posts)"
@pinPost="pinPost(post, refetchPostList)"
@unpinPost="unpinPost(post, refetchPostList)"
@toggleObservePost="
(postId, value) => toggleObservePost(postId, value, refetchPostList)
"
/>
</masonry-grid-item>
</template>
<template v-else>
<ds-grid-item :row-span="2" column-span="fullWidth">
<hc-empty icon="docs" />
<ds-text align="center">{{ $t('index.no-results') }}</ds-text>
<ds-text align="center">{{ $t('index.change-filter-settings') }}</ds-text>
</ds-grid-item>
</template>
</masonry-grid>
<div class="supergrid">
<post-teaser
v-for="post in posts"
:key="post.id"
:post="post"
:postsFilter="postsFilter['categories_some']"
@removePostFromList="posts = removePostFromList(post, posts)"
@pinPost="pinPost(post, refetchPostList)"
@unpinPost="unpinPost(post, refetchPostList)"
@toggleObservePost="(postId, value) => toggleObservePost(postId, value, refetchPostList)"
class="super-post-teaser"
/>
</div>
<!-- infinite loading -->
<client-only>
@ -467,4 +447,12 @@ export default {
margin-top: 32px;
}
}
.supergrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 16px;
margin-top: 16px;
container: supergrid;
}
</style>