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

[fix] added custom css to newsfeed layout if less than 3 posts are visible

Browse Source
This commit is contained in:
Markus 2023-05-15 14:51:23 +02:00
parent 013ec20e75
commit 95710fd587
1 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
webapp/pages/index.vue
View File

@ -80,7 +80,12 @@
</div> </div>
</div> </div>
<!-- content grid --> <!-- content grid -->
<masonry-grid :class="[!hashtag && !showDonations ? 'grid-margin-top' : '']"> <masonry-grid
:class="[
!hashtag && !showDonations ? 'grid-margin-top' : '',
!isMobile && posts.length <= 2 ? 'grid-column-helper' : '',
]"
>
<!-- news feed --> <!-- news feed -->
<template v-if="hasResults"> <template v-if="hasResults">
<masonry-grid-item <masonry-grid-item
@ -129,6 +134,7 @@ import UpdateQuery from '~/components/utils/UpdateQuery'
import FilterMenuComponent from '~/components/FilterMenu/FilterMenuComponent' import FilterMenuComponent from '~/components/FilterMenu/FilterMenuComponent'
import { SHOW_CONTENT_FILTER_MASONRY_GRID } from '~/constants/filter.js' import { SHOW_CONTENT_FILTER_MASONRY_GRID } from '~/constants/filter.js'
import { POST_ADD_BUTTON_POSITION_TOP } from '~/constants/posts.js' import { POST_ADD_BUTTON_POSITION_TOP } from '~/constants/posts.js'
import mobile from '~/mixins/mobile'
export default { export default {
components: { components: {
@ -141,7 +147,7 @@ export default {
FilterMenuComponent, FilterMenuComponent,
HeaderButton, HeaderButton,
}, },
mixins: [postListActions], mixins: [postListActions, mobile()],
data() { data() {
const { hashtag = null } = this.$route.query const { hashtag = null } = this.$route.query
return { return {
@ -352,6 +358,10 @@ export default {
.newsfeed-controls { .newsfeed-controls {
margin-top: 46px; margin-top: 46px;
} }
.main-container .grid-column-helper {
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 357px)) !important;
}
@media screen and (max-width: 656px) { @media screen and (max-width: 656px) {
.filterButtonMenu { .filterButtonMenu {
margin-top: -50px; margin-top: -50px;