Merge branch 'master' into unused-packages-ocelot

backend/package.json

@@ -98,7 +98,7 @@
     "subscriptions-transport-ws": "^0.9.19",
     "trunc-html": "~1.1.2",
     "uuid": "~8.3.2",
-    "validator": "^13.0.0",
+    "validator": "^13.9.0",
     "wait-on": "~4.0.1",
     "xregexp": "^4.3.0"
   },

backend/yarn.lock

@@ -10723,10 +10723,10 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
-validator@^13.0.0:
-  version "13.0.0"
-  resolved "https://registry.yarnpkg.com/validator/-/validator-13.0.0.tgz#0fb6c6bb5218ea23d368a8347e6d0f5a70e3bcab"
-  integrity sha512-anYx5fURbgF04lQV18nEQWZ/3wHGnxiKdG4aL8J+jEDsm98n/sU/bey+tYk6tnGJzm7ioh5FoqrAiQ6m03IgaA==
+validator@^13.9.0:
+  version "13.9.0"
+  resolved "https://registry.yarnpkg.com/validator/-/validator-13.9.0.tgz#33e7b85b604f3bbce9bb1a05d5c3e22e1c2ff855"
+  integrity sha512-B+dGG8U3fdtM0/aNK4/X8CXq/EcxU2WPrPEkJGslb47qyHsxmbggTWK0yEA4qnYVNF+nxNlN88o14hIcPmSIEA==
 
 vary@^1, vary@~1.1.2:
   version "1.1.2"

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/Editor/nodes/Mention.js

@@ -17,7 +17,7 @@ export default class Mention extends TipTapMention {
             'data-mention-id': node.attrs.id,
             target: '_blank',
           },
-          `${this.options.matcher.char}${node.attrs.label}`,
+          `${this.options.matcher.char}${node.attrs.label} `,
         ]
       },
       parseDOM: [

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>