Style up filter bubble menu

webapp/components/FilterMenu/FilterMenu.vue

@@ -1,11 +1,22 @@
 <template>
   <ds-card>
-    <ds-button
-      name="filter-by-followed-authors-only"
-      icon="plus"
-      :primary="onlyFollowed"
-      @click="toggleOnlyFollowed"
-    />
+    <ds-flex>
+      <ds-flex-item class="filter-menu-title">
+        <ds-heading size="h3">
+          {{ $t('filter-menu.title') }}
+        </ds-heading>
+      </ds-flex-item>
+      <ds-flex-item>
+        <div class="filter-menu-buttons">
+        <ds-button
+          name="filter-by-followed-authors-only"
+          icon="user-plus"
+          :primary="onlyFollowed"
+          @click="toggleOnlyFollowed"
+          />
+        </div>
+      </ds-flex-item>
+    </ds-flex>
   </ds-card>
 </template>
 
@@ -33,3 +44,14 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.filter-menu-title {
+  display: flex;
+  align-items: center;
+}
+
+.filter-menu-buttons {
+  float: right;
+}
+</style>

webapp/locales/de.json

@@ -1,10 +1,6 @@
 {
   "filter-menu": {
-    "options": {
-      "friends": "Nur Freunde",
-      "friends-of-a-friend": "Freunde von Freunden",
-      "all": "Alle"
-    }
+    "title": "Deine Filterblase"
   },
   "login": {
     "copy": "Wenn Du bereits ein Konto bei Human Connection hast, melde Dich bitte hier an.",

webapp/locales/en.json

@@ -1,10 +1,6 @@
 {
   "filter-menu": {
-    "options": {
-      "friends": "Only friends",
-      "friends-of-a-friend": "Friends of a friend",
-      "all": "All"
-    }
+    "title": "Your filter bubble"
   },
   "login": {
     "copy": "If you already have a human-connection account, login here.",

webapp/pages/index.vue

@@ -1,16 +1,16 @@
 <template>
   <div>
+    <ds-flex :width="{ base: '100%' }" gutter="base">
     <ds-flex-item>
       <filter-menu />
     </ds-flex-item>
-    <ds-flex v-if="Post && Post.length" :width="{ base: '100%' }" gutter="base">
-      <hc-post-card
-        v-for="(post, index) in uniq(Post)"
-        :key="post.id"
-        :post="post"
-        :width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
-        @deletePost="deletePost(index, post.id)"
-      />
+    <hc-post-card
+      v-for="(post, index) in uniq(Post)"
+      :key="post.id"
+      :post="post"
+      :width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
+      @deletePost="deletePost(index, post.id)"
+    />
     </ds-flex>
     <no-ssr>
       <ds-button