Merge pull request #6154 from Ocelot-Social-Community/newsfeed-layout-fixes

fix(webapp): fix newsfeed layout

webapp/components/DonationInfo/DonationInfo.vue

@@ -47,5 +47,6 @@ export default {
   display: flex;
   flex: 1;
   margin-bottom: $space-x-small;
+  margin-top: 16px;
 }
 </style>

webapp/components/PostTeaser/PostTeaser.vue

@@ -194,6 +194,7 @@ export default {
   display: block;
   height: 100%;
   color: $text-color-base;
+  padding-top: 16px;
 }
 
 .post-user-row {

webapp/pages/index.vue

@@ -18,14 +18,8 @@
         </nuxt-link>
       </client-only>
     </div>
-    <masonry-grid>
-      <!--Filter Button-->
-      <ds-grid-item
-        v-if="categoriesActive && SHOW_CONTENT_FILTER_MASONRY_GRID"
-        :row-span="1"
-        column-span="fullWidth"
-        class="top-filter-menu"
-      >
+    <div>
+      <div v-if="categoriesActive && SHOW_CONTENT_FILTER_MASONRY_GRID" class="top-filter-menu">
         <div class="filterButtonBox">
           <div class="filterButtonMenu" :class="{ 'hide-filter': hideByScroll }">
             <base-button
@@ -74,17 +68,24 @@
             </div>
           </div>
         </div>
-      </ds-grid-item>
-      <!-- Placeholder/Space Row -->
-      <ds-grid-item :row-span="1" column-span="fullWidth" />
-      <!-- hashtag filter -->
-      <ds-grid-item v-if="hashtag" :row-span="2" column-span="fullWidth">
+      </div>
+    </div>
+
+    <div v-if="hashtag || showDonations" class="newsfeed-controls">
+      <div v-if="hashtag">
         <hashtags-filter :hashtag="hashtag" @clearSearch="clearSearch" />
-      </ds-grid-item>
-      <!-- donation info -->
-      <ds-grid-item v-if="showDonations" class="top-info-bar" :row-span="1" column-span="fullWidth">
+      </div>
+      <div v-if="showDonations" class="top-info-bar">
         <donation-info :goal="goal" :progress="progress" />
-      </ds-grid-item>
+      </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
@@ -133,6 +134,7 @@ import UpdateQuery from '~/components/utils/UpdateQuery'
 import FilterMenuComponent from '~/components/FilterMenu/FilterMenuComponent'
 import { SHOW_CONTENT_FILTER_MASONRY_GRID } from '~/constants/filter.js'
 import { POST_ADD_BUTTON_POSITION_TOP } from '~/constants/posts.js'
+import mobile from '~/mixins/mobile'
 
 export default {
   components: {
@@ -145,7 +147,7 @@ export default {
     FilterMenuComponent,
     HeaderButton,
   },
-  mixins: [postListActions],
+  mixins: [postListActions, mobile()],
   data() {
     const { hashtag = null } = this.$route.query
     return {
@@ -336,6 +338,10 @@ export default {
   box-shadow: $box-shadow-x-large;
 }
 
+.top-filter-menu {
+  margin-top: 16px;
+}
+
 .top-info-bar,
 .top-filter-menu {
   display: flex;
@@ -345,10 +351,17 @@ export default {
   width: 95%;
   position: fixed;
   z-index: $z-index-sticky;
-  margin-top: -35px;
-  padding: 20px 10px 20px 10px;
+  margin-top: -45px;
+  padding: 30px 0px 20px 0px;
   background-color: #f5f4f6;
 }
+.newsfeed-controls {
+  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) {
   .filterButtonMenu {
     margin-top: -50px;
@@ -363,6 +376,9 @@ export default {
   padding-bottom: 0px;
   z-index: $z-index-page-submenu;
 }
+.grid-margin-top {
+  margin-top: 26px;
+}
 @media screen and (min-height: 401px) {
   #my-filter {
     max-height: 330px;
@@ -412,8 +428,14 @@ export default {
     width: 44px;
     font-size: 23px;
   }
-  .ds-grid {
-    padding-top: 1em;
+}
+@media screen and (max-width: 650px) {
+  //    .top-filter-menu{
+  //     margin-top: 24px;
+  //   }
+
+  .newsfeed-controls {
+    margin-top: 32px;
   }
 }
 </style>