chore: rename/refactor filter, make responsive

- Make the emotions filter similar in style to CategoriesFilter

webapp/components/FilterMenu/EmotionsFilter.vue

@@ -1,6 +1,12 @@
 <template>
   <section class="emotion-filter">
     <h4 class="title">{{ $t('filter-menu.emotions') }}</h4>
+    <labeled-button
+      :filled="!filteredByEmotions.length"
+      icon="check"
+      :label="$t('filter-menu.all')"
+      @click="resetEmotions"
+    />
     <div class="divider" />
     <emotion-button
       v-for="emotion in emotionsArray"
@@ -13,10 +19,12 @@
 </template>
 <script>
 import { mapGetters, mapMutations } from 'vuex'
+import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
 import EmotionButton from '~/components/EmotionButton/EmotionButton'
 
 export default {
   components: {
+    LabeledButton,
     EmotionButton,
   },
   data() {
@@ -32,6 +40,7 @@ export default {
   },
   methods: {
     ...mapMutations({
+      resetEmotions: 'posts/RESET_EMOTIONS',
       toogleFilteredByEmotions: 'posts/TOGGLE_EMOTION',
     }),
     iconPath(emotion) {
@@ -48,6 +57,7 @@ export default {
   display: flex;
   flex-wrap: wrap;
   margin-top: $space-base;
+  width: 66%;
 
   > .title {
     width: 100%;
@@ -56,19 +66,30 @@ export default {
 
   > .divider {
     border-left: $border-size-base solid $border-color-soft;
-    margin: 0px $space-base 0px 76px;
+    margin: 0px $space-base;
   }
-}
 
-@media only screen and (max-width: 630px) {
+  @media only screen and (max-width: 630px) {
-  .emotion-filter {
+    width: 100%;
+
     > .title {
       text-align: center;
     }
 
+    .labeled-button {
+      width: 100%;
+      margin: $space-x-small 0;
+    }
+
     > .divider {
+      width: 100%;
+      margin: $space-small;
       border-top: $border-size-base solid $border-color-soft;
     }
+
+    > .emotion-button {
+      margin-top: $space-x-small;
+    }
   }
 }
 </style>

webapp/components/FilterMenu/FilterMenu.vue

@@ -11,11 +11,11 @@
       <base-icon class="dropdown-arrow" name="angle-down" />
     </base-button>
     <template slot="popover">
-      <ds-container>
+      <ds-container class="filter-menu">
         <h4 class="title">{{ $t('filter-menu.filter-by') }}</h4>
         <following-filter />
         <categories-filter />
-        <general-filter />
+        <emotions-filter />
         <language-filter />
       </ds-container>
     </template>
@@ -26,7 +26,7 @@ import Dropdown from '~/components/Dropdown'
 import { mapGetters } from 'vuex'
 import FollowingFilter from './FollowingFilter'
 import CategoriesFilter from './CategoriesFilter'
-import GeneralFilter from './GeneralFilter'
+import EmotionsFilter from './EmotionsFilter'
 import LanguageFilter from './LanguageFilter'
 
 export default {
@@ -34,7 +34,7 @@ export default {
     Dropdown,
     FollowingFilter,
     CategoriesFilter,
-    GeneralFilter,
+    EmotionsFilter,
     LanguageFilter,
   },
   props: {
@@ -48,3 +48,12 @@ export default {
   },
 }
 </script>
+<style lang="scss">
+@media only screen and (max-width: 960px) {
+  .filter-menu {
+    > .title {
+      text-align: center;
+    }
+  }
+}
+</style>

webapp/components/FilterMenu/FollowingFilter.vue

@@ -1,18 +1,18 @@
 <template>
-<section class="following-filter">
+  <section class="following-filter">
-  <labeled-button
+    <labeled-button
-    data-test="filter-by-followed"
+      data-test="filter-by-followed"
-    :filled="filteredByUsersFollowed"
+      :filled="filteredByUsersFollowed"
-    icon="user-plus"
+      icon="user-plus"
-    :label="$t('filter-menu.following')"
+      :label="$t('filter-menu.following')"
-    @click="toggleFilteredByFollowed(currentUser.id)"
+      @click="toggleFilteredByFollowed(currentUser.id)"
-    v-tooltip="{
+      v-tooltip="{
-      content: this.$t('contribution.filterFollow'),
+        content: this.$t('contribution.filterFollow'),
-      placement: 'left',
+        placement: 'left',
-      delay: { show: 500 },
+        delay: { show: 500 },
-    }"
+      }"
-  />
+    />
-</section>
+  </section>
 </template>
 
 <script>
@@ -46,5 +46,11 @@ export default {
     margin-top: $space-small;
     width: 5%;
   }
+
+  @media only screen and (max-width: 960px) {
+    .labeled-button {
+      width: 100%;
+    }
+  }
 }
 </style>

webapp/locales/de.json

@@ -339,11 +339,9 @@
   "filter-menu": {
     "all": "Alle",
     "categories": "Themenkategorien",
-    "following": {
-      "header": "Filtern nach...",
-      "label": "Benutzern, denen ich folge"
-    },
     "emotions": "Emotionen",
+    "filter-by": "Filtern nach...",
+    "following": "Benutzern, denen ich folge",
     "languages": "Sprachen"
   },
   "followButton": {

webapp/store/posts.js

@@ -48,6 +48,11 @@ export const mutations = {
     delete filter.categories_some
     state.filter = filter
   },
+  RESET_EMOTIONS(state) {
+    const filter = clone(state.filter)
+    delete filter.emotions_some
+    state.filter = filter
+  },
   RESET_LANGUAGES(state) {
     const filter = clone(state.filter)
     delete filter.language_in