From 98080b597df527a150881a48a19bd3b87c0bbfd4 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Fri, 5 Jul 2019 14:34:54 -0300
Subject: [PATCH] Style categories dropdown items

- it's a vertical list, dealing with difficulties to make it horizontal
---
 webapp/components/FilterPosts/FilterPosts.vue | 65 ++++++++++---------
 1 file changed, 36 insertions(+), 29 deletions(-)

diff --git a/webapp/components/FilterPosts/FilterPosts.vue b/webapp/components/FilterPosts/FilterPosts.vue
index 842e3f15e..cac6e44c4 100644
--- a/webapp/components/FilterPosts/FilterPosts.vue
+++ b/webapp/components/FilterPosts/FilterPosts.vue
@@ -1,34 +1,27 @@
 <template>
-  <dropdown class="avatar-menu">
-    <dropdown ref="menu" :placement="placement" :offset="offset">
-      <a
-        slot="default"
-        slot-scope="{ toggleMenu }"
-        class="locale-menu"
-        href="#"
-        @click.prevent="toggleMenu()"
+  <dropdown ref="menu" :placement="placement" :offset="offset">
+    <a slot="default" slot-scope="{ toggleMenu }" href="#" @click.prevent="toggleMenu()">
+      <ds-icon style="margin: 5px 0px 0px 10px;" name="filter" size="large" />
+      <ds-icon style="margin-left: 2px" size="xx-small" name="angle-down" />
+    </a>
+    <ds-menu slot="popover" slot-scope="{ toggleMenu }" :routes="routes">
+      <ds-menu-item
+        slot="menuitem"
+        slot-scope="item"
+        :route="item.route"
+        @click.stop.prevent="filterPosts(item.route.name, toggleMenu)"
+        class="categories-menu"
       >
-        <ds-icon style="margin: 5px 0px 0px 10px;" name="filter" size="large" />
-        <ds-icon style="margin-left: 2px" size="xx-small" name="angle-down" />
-      </a>
-      <ds-menu
-        slot="popover"
-        slot-scope="{ toggleMenu }"
-        class="locale-menu-popover"
-        :routes="routes"
-      >
-        <ds-menu-item
-          slot="menuitem"
-          slot-scope="item"
-          class="locale-menu-item"
-          :route="item.route"
-          @click.stop.prevent="filterPosts(item.route.name, toggleMenu)"
-        >
-          <ds-icon :name="item.route.icon" />
-          {{ item.route.name }}
-        </ds-menu-item>
-      </ds-menu>
-    </dropdown>
+        <ds-flex class="categories-list">
+          <ds-flex-item width="20%">
+            <ds-button :icon="item.route.icon" primary />
+          </ds-flex-item>
+          <ds-flex-item width="80%">
+            <ds-flex>{{ item.route.name }}</ds-flex>
+          </ds-flex-item>
+        </ds-flex>
+      </ds-menu-item>
+    </ds-menu>
   </dropdown>
 </template>
 <script>
@@ -85,3 +78,17 @@ export default {
   },
 }
 </script>
+<style lang="scss">
+.categories-menu {
+  width: 300px;
+}
+.category-menu-item {
+  text-align: center;
+  padding-bottom: 20px;
+}
+
+.categories-list {
+  display: flex;
+  align-items: baseline;
+}
+</style>