From 86f186b30f8d7e2c3ed78195d3df73ba34cef780 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 7 Feb 2023 12:00:16 +0100
Subject: [PATCH 1/5] change postion add content button, refactor mobile filter
 menu

---
 webapp/constants/posts.js |   1 +
 webapp/pages/index.vue    | 221 ++++++++++++++++++++++++++------------
 2 files changed, 151 insertions(+), 71 deletions(-)

diff --git a/webapp/constants/posts.js b/webapp/constants/posts.js
index 7890578c8..93f387c88 100644
--- a/webapp/constants/posts.js
+++ b/webapp/constants/posts.js
@@ -1,2 +1,3 @@
 export const first = 12
 export const offset = 0
+export const POST_ADD_BUTTON_POSITION_TOP = true
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index b0f8c8679..277e42a05 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -1,64 +1,86 @@
 <template>
   <div>
+     <!-- create post -->
+     <div :class="POST_ADD_BUTTON_POSITION_TOP ? 'box-add-button-top' : ''">
+     <client-only>
+      <nuxt-link :to="{ name: 'post-create' }"  :class="{ 'hide-filter': hideByScroll }">
+        <base-button
+          v-tooltip="{
+            content: $t('contribution.newPost'),
+            placement: 'left',
+          }"
+          :class="POST_ADD_BUTTON_POSITION_TOP ? 'post-add-button-top' : 'post-add-button'"
+          icon="plus"
+          filled
+          circle
+        />
+      </nuxt-link>
+    </client-only>
+  </div>
     <masonry-grid>
-      <ds-grid-item v-if="hashtag" :row-span="2" column-span="fullWidth">
-        <hashtags-filter :hashtag="hashtag" @clearSearch="clearSearch" />
-      </ds-grid-item>
-      <!--Filter Button-->
-      <ds-grid-item
+            <!--Filter Button-->
+            <ds-grid-item
         v-if="categoriesActive && SHOW_CONTENT_FILTER_MASONRY_GRID"
         :row-span="1"
         column-span="fullWidth"
-        class="filterButtonMenu"
-        :class="{ 'hide-filter': hideFilter }"
+        class="top-info-bar"
       >
-        <base-button
-          class="my-filter-button"
-          v-if="!postsFilter['categories_some'] && !postsFilter['author']"
-          right
-          @click="showFilter = !showFilter"
-          filled
-        >
-          {{ $t('contribution.filterMasonryGrid.noFilter') }}
-          &nbsp;
-          <base-icon class="my-filter-button" :name="filterButtonIcon"></base-icon>
-        </base-button>
-        <span v-if="postsFilter['categories_some']">
-          <base-button class="my-filter-button" right @click="showFilter = !showFilter" filled>
-            {{ $t('contribution.filterMasonryGrid.myTopics') }}
-          </base-button>
-          <base-button
-            class="filter-remove"
-            @click="resetCategories"
-            icon="close"
-            :title="$t('filter-menu.deleteFilter')"
-            style="margin-left: -8px"
-            filled
-          />
-        </span>
-        <span v-if="postsFilter['author']">
-          <base-button class="my-filter-button" right @click="showFilter = !showFilter" filled>
-            {{ $t('contribution.filterMasonryGrid.myFriends') }}
-          </base-button>
-          <base-button
-            class="filter-remove"
-            @click="resetByFollowed"
-            icon="close"
-            :title="$t('filter-menu.deleteFilter')"
-            style="margin-left: -8px"
-            filled
-          />
-        </span>
+        <div class="filterButtonBox">
+          <div class="filterButtonMenu" :class="{ 'hide-filter': hideByScroll }">
+            <base-button
+              class="my-filter-button"
+              v-if="!postsFilter['categories_some'] && !postsFilter['author']"
+              right
+              @click="showFilter = !showFilter"
+              filled
+            >
+              {{ $t('contribution.filterMasonryGrid.noFilter') }}
+              &nbsp;
+              <base-icon class="my-filter-button" :name="filterButtonIcon"></base-icon>
+            </base-button>
+            <span v-if="postsFilter['categories_some']">
+              <base-button class="my-filter-button" right @click="showFilter = !showFilter" filled>
+                {{ $t('contribution.filterMasonryGrid.myTopics') }}
+              </base-button>
+              <base-button
+                class="filter-remove"
+                @click="resetCategories"
+                icon="close"
+                :title="$t('filter-menu.deleteFilter')"
+                style="margin-left: -8px"
+                filled
+              />
+            </span>
+            <span v-if="postsFilter['author']">
+              <base-button class="my-filter-button" right @click="showFilter = !showFilter" filled>
+                {{ $t('contribution.filterMasonryGrid.myFriends') }}
+              </base-button>
+              <base-button
+                class="filter-remove"
+                @click="resetByFollowed"
+                icon="close"
+                :title="$t('filter-menu.deleteFilter')"
+                style="margin-left: -8px"
+                filled
+              />
+            </span>
 
-        <div id="my-filter" v-if="showFilter">
-          <filter-menu-component :showMobileMenu="showMobileMenu" />
+            <div id="my-filter" v-if="showFilter">
+              <filter-menu-component :showMobileMenu="showMobileMenu" />
+            </div>
+          </div>
         </div>
       </ds-grid-item>
       <ds-space :margin-bottom="{ base: 'small', md: 'base', lg: 'large' }" />
+      <ds-grid-item v-if="hashtag" :row-span="2" column-span="fullWidth">
+        <hashtags-filter :hashtag="hashtag" @clearSearch="clearSearch" />
+      </ds-grid-item>
+      <ds-space :margin-bottom="{ base: 'small', md: 'base', lg: 'large' }" />
       <!-- donation info -->
       <ds-grid-item v-if="showDonations" class="top-info-bar" :row-span="1" column-span="fullWidth">
         <donation-info :goal="goal" :progress="progress" />
       </ds-grid-item>
+      <ds-space :margin-bottom="{ base: 'small', md: 'base', lg: 'large' }" />
       <!-- news feed -->
       <template v-if="hasResults">
         <masonry-grid-item
@@ -82,21 +104,7 @@
         </ds-grid-item>
       </template>
     </masonry-grid>
-    <!-- create post -->
-    <client-only>
-      <nuxt-link :to="{ name: 'post-create' }">
-        <base-button
-          v-tooltip="{
-            content: $t('contribution.newPost'),
-            placement: 'left',
-          }"
-          class="post-add-button"
-          icon="plus"
-          filled
-          circle
-        />
-      </nuxt-link>
-    </client-only>
+   
     <!-- infinite loading -->
     <client-only>
       <infinite-loading v-if="hasMore" @infinite="showMoreContributions" />
@@ -118,6 +126,7 @@ import { filterPosts } from '~/graphql/PostQuery.js'
 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'
 
 export default {
   components: {
@@ -136,7 +145,7 @@ export default {
   data() {
     const { hashtag = null } = this.$route.query
     return {
-      hideFilter: false,
+      hideByScroll: false,
       revScrollpos: 0,
       showFilter: false,
       showDonations: true,
@@ -150,6 +159,7 @@ export default {
       hashtag,
       categoriesActive: this.$env.CATEGORIES_ACTIVE,
       SHOW_CONTENT_FILTER_MASONRY_GRID,
+      POST_ADD_BUTTON_POSITION_TOP,
     }
   },
   computed: {
@@ -204,14 +214,17 @@ export default {
     handleScroll() {
       const currentScrollPos = window.pageYOffset
       if (this.prevScrollpos > currentScrollPos) {
-        this.hideFilter = false
+        this.hideByScroll = false
       } else {
-        this.hideFilter = true
+        if(!this.showFilter) {
+          this.hideByScroll = true
+        }
       }
       this.prevScrollpos = currentScrollPos
     },
     beforeDestroy() {
       document.removeEventListener('click', this.showFilterMenu)
+      window.removeEventListener('scroll', this.handleScroll)
     },
     clearSearch() {
       this.$router.push({ path: '/' })
@@ -283,13 +296,6 @@ export default {
 </script>
 
 <style lang="scss">
-#my-filter {
-  background-color: white;
-  box-shadow: rgb(189 189 189) 1px 9px 15px 1px;
-  max-height: 480px;
-  overflow: auto;
-}
-
 .masonry-grid {
   display: grid;
   grid-gap: 10px;
@@ -309,6 +315,10 @@ export default {
   display: none;
 }
 
+.box-add-button-top {
+  float: right;
+}
+
 .base-button.--circle.post-add-button {
   height: 54px;
   width: 54px;
@@ -321,6 +331,16 @@ export default {
   box-shadow: $box-shadow-x-large;
 }
 
+.base-button.--circle.post-add-button-top {
+  height: 54px;
+  width: 54px;
+  font-size: 26px;
+  z-index: 100;
+  position: fixed;
+  top: 80px;
+  box-shadow: $box-shadow-x-large;
+}
+
 .top-info-bar {
   display: flex;
   align-items: center;
@@ -333,4 +353,63 @@ export default {
   border-radius: 7px;
   background-color: #f5f4f6;
 }
+#my-filter {
+  background-color: white;
+  box-shadow: rgb(189 189 189) 1px 9px 15px 1px;
+  max-height: 950px;
+  overflow: auto;
+  padding-bottom: 0px;
+}
+@media screen and (min-height: 401px) {
+  #my-filter {
+  max-height: 330px;
+  }
+}
+@media screen and (min-height: 501px) {
+  #my-filter {
+  max-height: 440px;
+  }
+}
+@media screen and (min-height: 601px) {
+  #my-filter {
+  max-height: 550px;
+  }
+}
+@media screen and (min-height: 701px) {
+  #my-filter {
+  max-height: 640px;
+  }
+}
+@media screen and (min-height: 801px) {
+  #my-filter {
+  max-height: 750px;
+  }
+}
+@media screen and (min-height: 950px) {
+  #my-filter {
+  max-height: 830px;
+  }
+}
+@media screen and (min-height: 1025px) {
+  #my-filter {
+  max-height: 870px;
+  }
+}
+@media screen and (min-width: 800px) and (min-height: 500px){
+  #my-filter {
+  padding-bottom: 80px;
+  }
+
+}
+@media screen and (max-width: 1200px) {
+  .box-add-button-top {
+  padding-right: 40px;
+}
+.base-button.--circle.post-add-button-top {
+  height: 44px;
+  width: 44px;
+  font-size: 23px;
+  z-index: 10;
+}
+}
 </style>

From 0a4e236befa105f0c0bf2f089f8c3cb37cf44e0b Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 7 Feb 2023 12:11:38 +0100
Subject: [PATCH 2/5] fix lint

---
 webapp/pages/index.vue | 77 +++++++++++++++++++++---------------------
 1 file changed, 38 insertions(+), 39 deletions(-)

diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 277e42a05..28c9f0793 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -1,25 +1,25 @@
 <template>
   <div>
-     <!-- create post -->
-     <div :class="POST_ADD_BUTTON_POSITION_TOP ? 'box-add-button-top' : ''">
-     <client-only>
-      <nuxt-link :to="{ name: 'post-create' }"  :class="{ 'hide-filter': hideByScroll }">
-        <base-button
-          v-tooltip="{
-            content: $t('contribution.newPost'),
-            placement: 'left',
-          }"
-          :class="POST_ADD_BUTTON_POSITION_TOP ? 'post-add-button-top' : 'post-add-button'"
-          icon="plus"
-          filled
-          circle
-        />
-      </nuxt-link>
-    </client-only>
-  </div>
+    <!-- create post -->
+    <div :class="POST_ADD_BUTTON_POSITION_TOP ? 'box-add-button-top' : ''">
+      <client-only>
+        <nuxt-link :to="{ name: 'post-create' }" :class="{ 'hide-filter': hideByScroll }">
+          <base-button
+            v-tooltip="{
+              content: $t('contribution.newPost'),
+              placement: 'left',
+            }"
+            :class="POST_ADD_BUTTON_POSITION_TOP ? 'post-add-button-top' : 'post-add-button'"
+            icon="plus"
+            filled
+            circle
+          />
+        </nuxt-link>
+      </client-only>
+    </div>
     <masonry-grid>
-            <!--Filter Button-->
-            <ds-grid-item
+      <!--Filter Button-->
+      <ds-grid-item
         v-if="categoriesActive && SHOW_CONTENT_FILTER_MASONRY_GRID"
         :row-span="1"
         column-span="fullWidth"
@@ -104,7 +104,7 @@
         </ds-grid-item>
       </template>
     </masonry-grid>
-   
+
     <!-- infinite loading -->
     <client-only>
       <infinite-loading v-if="hasMore" @infinite="showMoreContributions" />
@@ -216,7 +216,7 @@ export default {
       if (this.prevScrollpos > currentScrollPos) {
         this.hideByScroll = false
       } else {
-        if(!this.showFilter) {
+        if (!this.showFilter) {
           this.hideByScroll = true
         }
       }
@@ -362,54 +362,53 @@ export default {
 }
 @media screen and (min-height: 401px) {
   #my-filter {
-  max-height: 330px;
+    max-height: 330px;
   }
 }
 @media screen and (min-height: 501px) {
   #my-filter {
-  max-height: 440px;
+    max-height: 440px;
   }
 }
 @media screen and (min-height: 601px) {
   #my-filter {
-  max-height: 550px;
+    max-height: 550px;
   }
 }
 @media screen and (min-height: 701px) {
   #my-filter {
-  max-height: 640px;
+    max-height: 640px;
   }
 }
 @media screen and (min-height: 801px) {
   #my-filter {
-  max-height: 750px;
+    max-height: 750px;
   }
 }
 @media screen and (min-height: 950px) {
   #my-filter {
-  max-height: 830px;
+    max-height: 830px;
   }
 }
 @media screen and (min-height: 1025px) {
   #my-filter {
-  max-height: 870px;
+    max-height: 870px;
   }
 }
-@media screen and (min-width: 800px) and (min-height: 500px){
+@media screen and (min-width: 800px) and (min-height: 500px) {
   #my-filter {
-  padding-bottom: 80px;
+    padding-bottom: 80px;
   }
-
 }
 @media screen and (max-width: 1200px) {
   .box-add-button-top {
-  padding-right: 40px;
-}
-.base-button.--circle.post-add-button-top {
-  height: 44px;
-  width: 44px;
-  font-size: 23px;
-  z-index: 10;
-}
+    padding-right: 40px;
+  }
+  .base-button.--circle.post-add-button-top {
+    height: 44px;
+    width: 44px;
+    font-size: 23px;
+    z-index: 10;
+  }
 }
 </style>

From e8ce152f065591858ef75cc370cff5ffba43836c Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 7 Feb 2023 14:38:16 +0100
Subject: [PATCH 3/5] fix test, remove unused code

---
 webapp/components/FilterMenu/CategoriesFilter.vue    |  3 ---
 webapp/components/FilterMenu/FilterMenu.vue          |  3 +--
 webapp/components/FilterMenu/FilterMenuComponent.vue |  5 +----
 webapp/components/HeaderMenu/HeaderMenu.vue          |  2 +-
 webapp/layouts/default.vue                           |  2 +-
 webapp/pages/index.vue                               | 10 ++++------
 6 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/webapp/components/FilterMenu/CategoriesFilter.vue b/webapp/components/FilterMenu/CategoriesFilter.vue
index 5db8d1fdd..b18091bec 100644
--- a/webapp/components/FilterMenu/CategoriesFilter.vue
+++ b/webapp/components/FilterMenu/CategoriesFilter.vue
@@ -47,9 +47,6 @@ export default {
     LabeledButton,
   },
   mixins: [SortCategories],
-  props: {
-    showMobileMenu: { type: Boolean, default: false },
-  },
   data() {
     return {
       categories: [],
diff --git a/webapp/components/FilterMenu/FilterMenu.vue b/webapp/components/FilterMenu/FilterMenu.vue
index 2d4d836d5..ef4614764 100644
--- a/webapp/components/FilterMenu/FilterMenu.vue
+++ b/webapp/components/FilterMenu/FilterMenu.vue
@@ -11,7 +11,7 @@
       <base-icon class="dropdown-arrow" name="angle-down" />
     </base-button>
     <template slot="popover">
-      <filter-menu-component :showMobileMenu="showMobileMenu" />
+      <filter-menu-component />
     </template>
   </dropdown>
 </template>
@@ -29,7 +29,6 @@ export default {
   props: {
     placement: { type: String },
     offset: { type: [String, Number] },
-    showMobileMenu: { type: Boolean, default: false },
   },
   computed: {
     ...mapGetters({
diff --git a/webapp/components/FilterMenu/FilterMenuComponent.vue b/webapp/components/FilterMenu/FilterMenuComponent.vue
index 3f22aaed8..0eb27cd2d 100644
--- a/webapp/components/FilterMenu/FilterMenuComponent.vue
+++ b/webapp/components/FilterMenu/FilterMenuComponent.vue
@@ -3,7 +3,7 @@
     <div class="filter-menu-options">
       <h2 class="title">{{ $t('filter-menu.filter-by') }}</h2>
       <following-filter />
-      <categories-filter v-if="categoriesActive" :showMobileMenu="showMobileMenu" />
+      <categories-filter v-if="categoriesActive" />
     </div>
     <div class="filter-menu-options">
       <h2 class="title">{{ $t('filter-menu.order-by') }}</h2>
@@ -28,9 +28,6 @@ export default {
       categoriesActive: this.$env.CATEGORIES_ACTIVE,
     }
   },
-  props: {
-    showMobileMenu: { type: Boolean, default: false },
-  },
 }
 </script>
 
diff --git a/webapp/components/HeaderMenu/HeaderMenu.vue b/webapp/components/HeaderMenu/HeaderMenu.vue
index f1883b0cc..1a7548782 100644
--- a/webapp/components/HeaderMenu/HeaderMenu.vue
+++ b/webapp/components/HeaderMenu/HeaderMenu.vue
@@ -149,7 +149,7 @@
             style="flex-grow: 0; flex-basis: auto; padding: 20px 0"
           >
             <client-only>
-              <filter-menu v-show="showFilterMenuDropdown" :showMobileMenu="showMobileMenu" />
+              <filter-menu v-if="showFilterMenuDropdown && SHOW_CONTENT_FILTER_HEADER_MENU" />
             </client-only>
           </ds-flex-item>
         </ds-flex>
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 48043e3b9..524a530d1 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -5,7 +5,7 @@
     </div>
     <ds-container>
       <div class="main-container">
-        <nuxt :showMobileMenu="showMobileMenu" />
+        <nuxt />
       </div>
     </ds-container>
     <page-footer v-if="!isMobile" />
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 28c9f0793..ca5ad7bd6 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -23,7 +23,7 @@
         v-if="categoriesActive && SHOW_CONTENT_FILTER_MASONRY_GRID"
         :row-span="1"
         column-span="fullWidth"
-        class="top-info-bar"
+        class="top-filter-menu"
       >
         <div class="filterButtonBox">
           <div class="filterButtonMenu" :class="{ 'hide-filter': hideByScroll }">
@@ -66,7 +66,7 @@
             </span>
 
             <div id="my-filter" v-if="showFilter">
-              <filter-menu-component :showMobileMenu="showMobileMenu" />
+              <filter-menu-component />
             </div>
           </div>
         </div>
@@ -139,9 +139,6 @@ export default {
     FilterMenuComponent,
   },
   mixins: [postListActions],
-  props: {
-    showMobileMenu: { type: Boolean, default: false },
-  },
   data() {
     const { hashtag = null } = this.$route.query
     return {
@@ -341,7 +338,8 @@ export default {
   box-shadow: $box-shadow-x-large;
 }
 
-.top-info-bar {
+.top-info-bar,
+.top-filter-menu {
   display: flex;
   align-items: center;
 }

From df22c7289e32ff5c08500d691cffded4061cd834 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 7 Feb 2023 16:40:33 +0100
Subject: [PATCH 4/5] add change showFilter by mouseleave on my-filter

---
 webapp/components/FilterMenu/CategoriesFilter.vue    | 7 ++++++-
 webapp/components/FilterMenu/FilterMenuComponent.vue | 2 +-
 webapp/components/HeaderMenu/HeaderMenu.vue          | 4 +++-
 webapp/pages/index.vue                               | 6 ++++--
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/webapp/components/FilterMenu/CategoriesFilter.vue b/webapp/components/FilterMenu/CategoriesFilter.vue
index b18091bec..bcbfc7d1c 100644
--- a/webapp/components/FilterMenu/CategoriesFilter.vue
+++ b/webapp/components/FilterMenu/CategoriesFilter.vue
@@ -6,7 +6,7 @@
           :filled="!filteredCategoryIds.length"
           :label="$t('filter-menu.all')"
           icon="check"
-          @click="resetCategories"
+          @click="setResetCategories"
         />
       </li>
       <li class="item item-save-topics">
@@ -62,6 +62,10 @@ export default {
       resetCategories: 'posts/RESET_CATEGORIES',
       toggleCategory: 'posts/TOGGLE_CATEGORY',
     }),
+    setResetCategories() {
+      this.resetCategories()
+      this.$emit('showFilterMenu')
+    },
     saveCategories() {
       this.$apollo
         .mutate({
@@ -69,6 +73,7 @@ export default {
           variables: { activeCategories: this.filteredCategoryIds },
         })
         .then(() => {
+          this.$emit('showFilterMenu')
           this.$toast.success(this.$t('filter-menu.save.success'))
         })
         .catch(() => {
diff --git a/webapp/components/FilterMenu/FilterMenuComponent.vue b/webapp/components/FilterMenu/FilterMenuComponent.vue
index 0eb27cd2d..7a582a7c4 100644
--- a/webapp/components/FilterMenu/FilterMenuComponent.vue
+++ b/webapp/components/FilterMenu/FilterMenuComponent.vue
@@ -3,7 +3,7 @@
     <div class="filter-menu-options">
       <h2 class="title">{{ $t('filter-menu.filter-by') }}</h2>
       <following-filter />
-      <categories-filter v-if="categoriesActive" />
+      <categories-filter v-if="categoriesActive" @showFilterMenu="$emit('showFilterMenu')" />
     </div>
     <div class="filter-menu-options">
       <h2 class="title">{{ $t('filter-menu.order-by') }}</h2>
diff --git a/webapp/components/HeaderMenu/HeaderMenu.vue b/webapp/components/HeaderMenu/HeaderMenu.vue
index 1a7548782..f96a287e4 100644
--- a/webapp/components/HeaderMenu/HeaderMenu.vue
+++ b/webapp/components/HeaderMenu/HeaderMenu.vue
@@ -179,7 +179,9 @@
             style="text-align: center"
           >
             <client-only>
-              <group-button />
+              <div @click="toggleMobileMenuView">
+                <group-button />
+              </div>
             </client-only>
           </ds-flex-item>
           <!-- map button -->
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index ca5ad7bd6..fde0a2a78 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -66,7 +66,9 @@
             </span>
 
             <div id="my-filter" v-if="showFilter">
-              <filter-menu-component />
+              <div @mouseleave="showFilter = false">
+                <filter-menu-component @showFilterMenu="showFilterMenu" />
+              </div>
             </div>
           </div>
         </div>
@@ -203,7 +205,7 @@ export default {
       toggleCategory: 'posts/TOGGLE_CATEGORY',
     }),
     showFilterMenu(e) {
-      if (!e.target.closest('#my-filter') && !e.target.closest('.my-filter-button')) {
+      if (!e || (!e.target.closest('#my-filter') && !e.target.closest('.my-filter-button'))) {
         if (!this.showFilter) return
         this.showFilter = false
       }

From 27a543ca96fe65a6042a2cd3e2851620ea27fa11 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 8 Feb 2023 12:57:10 +0100
Subject: [PATCH 5/5] add class post-add-button-bottom

---
 webapp/pages/index.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index fde0a2a78..37c07eeab 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -9,7 +9,8 @@
               content: $t('contribution.newPost'),
               placement: 'left',
             }"
-            :class="POST_ADD_BUTTON_POSITION_TOP ? 'post-add-button-top' : 'post-add-button'"
+            class="post-add-button"
+            :class="POST_ADD_BUTTON_POSITION_TOP ? 'post-add-button-top' : 'post-add-button-bottom'"
             icon="plus"
             filled
             circle
@@ -318,7 +319,7 @@ export default {
   float: right;
 }
 
-.base-button.--circle.post-add-button {
+.base-button.--circle.post-add-button-bottom {
   height: 54px;
   width: 54px;
   font-size: 26px;