From b7eb299acb2828bcd738e3fabdd200dd4e0c732b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Tue, 4 Jun 2019 16:57:57 +0200
Subject: [PATCH] Style up filter bubble menu

---
 webapp/components/FilterMenu/FilterMenu.vue | 34 +++++++++++++++++----
 webapp/locales/de.json                      |  6 +---
 webapp/locales/en.json                      |  6 +---
 webapp/pages/index.vue                      | 16 +++++-----
 4 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/webapp/components/FilterMenu/FilterMenu.vue b/webapp/components/FilterMenu/FilterMenu.vue
index 2c4bf18d4..1e91af4a9 100644
--- a/webapp/components/FilterMenu/FilterMenu.vue
+++ b/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>
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 1e1f7786b..a790e6461 100644
--- a/webapp/locales/de.json
+++ b/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.",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 4b75d5aa7..289928f92 100644
--- a/webapp/locales/en.json
+++ b/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.",
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index cc22a10b5..bbf169dfa 100644
--- a/webapp/pages/index.vue
+++ b/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