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

added margin to newsfeed grid if no donation or hastag bar is visible

Browse Source
This commit is contained in:
Markus 2023-03-20 14:17:15 +01:00
parent 9454b7b541
commit 335ffcda14
1 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
webapp/pages/index.vue
View File

@ -17,12 +17,9 @@
/> />
</nuxt-link> </nuxt-link>
</client-only> </client-only>
</div> </div>
<div> <div>
<div <div v-if="categoriesActive && SHOW_CONTENT_FILTER_MASONRY_GRID" class="top-filter-menu">
v-if="categoriesActive && SHOW_CONTENT_FILTER_MASONRY_GRID"
class="top-filter-menu"
>
<div class="filterButtonBox"> <div class="filterButtonBox">
<div class="filterButtonMenu" :class="{ 'hide-filter': hideByScroll }"> <div class="filterButtonMenu" :class="{ 'hide-filter': hideByScroll }">
<base-button <base-button
@ -74,7 +71,7 @@
</div> </div>
</div> </div>
<div v-if="hashtag || showDonations" class="newsfeed-controls"> <div v-if="hashtag || showDonations" class="newsfeed-controls">
<div v-if="hashtag"> <div v-if="hashtag">
<hashtags-filter :hashtag="hashtag" @clearSearch="clearSearch" /> <hashtags-filter :hashtag="hashtag" @clearSearch="clearSearch" />
</div> </div>
@ -83,7 +80,7 @@
</div> </div>
</div> </div>
<!-- content grid --> <!-- content grid -->
<masonry-grid> <masonry-grid :class="[!hashtag && !showDonations ? 'grid-margin-top' : '']">
<!-- news feed --> <!-- news feed -->
<template v-if="hasResults"> <template v-if="hasResults">
<masonry-grid-item <masonry-grid-item
@ -335,7 +332,7 @@ export default {
box-shadow: $box-shadow-x-large; box-shadow: $box-shadow-x-large;
} }
.top-filter-menu{ .top-filter-menu {
margin-top: 16px; margin-top: 16px;
} }
@ -352,7 +349,7 @@ export default {
padding: 30px 0px 20px 0px; padding: 30px 0px 20px 0px;
background-color: #f5f4f6; background-color: #f5f4f6;
} }
.newsfeed-controls{ .newsfeed-controls {
margin-top: 46px; margin-top: 46px;
} }
@media screen and (max-width: 656px) { @media screen and (max-width: 656px) {
@ -367,6 +364,9 @@ export default {
overflow: auto; overflow: auto;
padding-bottom: 0px; padding-bottom: 0px;
} }
.grid-margin-top {
margin-top: 26px;
}
@media screen and (min-height: 401px) { @media screen and (min-height: 401px) {
#my-filter { #my-filter {
max-height: 330px; max-height: 330px;
@ -422,12 +422,16 @@ export default {
} }
} }
@media screen and (max-width: 650px) { @media screen and (max-width: 650px) {
// .top-filter-menu{ // .top-filter-menu{
// margin-top: 24px; // margin-top: 24px;
// } // }
.newsfeed-controls{ .newsfeed-controls {
margin-top: 32px; margin-top: 32px;
} }
.grid-margin-top {
margin-top: 6px;
}
} }
</style> </style>