From c7094d82b867be4c18ce76f559f2066765a1dd3e Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Fri, 12 Jul 2019 10:37:27 -0300
Subject: [PATCH] Fix styling, follow @Tirokk suggestions

---
 webapp/components/FilterPosts/FilterPosts.vue |  8 ---
 .../FilterPosts/FilterPostsMenuItems.vue      | 57 +++++++++++++------
 2 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/webapp/components/FilterPosts/FilterPosts.vue b/webapp/components/FilterPosts/FilterPosts.vue
index 95ed3b8f5..2e957cd56 100644
--- a/webapp/components/FilterPosts/FilterPosts.vue
+++ b/webapp/components/FilterPosts/FilterPosts.vue
@@ -59,11 +59,3 @@ export default {
   },
 }
 </script>
-<style lang="scss">
-#filter-posts-header {
-  display: block;
-}
-.categories-list {
-  text-align: center;
-}
-</style>
diff --git a/webapp/components/FilterPosts/FilterPostsMenuItems.vue b/webapp/components/FilterPosts/FilterPostsMenuItems.vue
index c8d0d37cf..601d3dcca 100644
--- a/webapp/components/FilterPosts/FilterPostsMenuItems.vue
+++ b/webapp/components/FilterPosts/FilterPostsMenuItems.vue
@@ -1,14 +1,17 @@
 <template>
   <ds-container>
     <ds-space />
+    <ds-flex id="filter-posts-header">
+      <ds-heading tag="h4">{{ $t('filter-posts.header') }}</ds-heading>
+      <ds-space margin-bottom="large" />
+    </ds-flex>
     <ds-flex>
       <ds-flex-item
-        :width="{ base: '100%', sm: '100%', md: '100%', lg: '13%' }"
-        class="categories-list"
+        :width="{ base: '100%', sm: '100%', md: '100%', lg: '5%' }"
+        class="categories-menu-item"
       >
         <ds-space margin-bottom="x-small" />
-        <ds-flex id="filter-posts-header">
-          <ds-heading tag="h4">{{ $t('filter-posts.header') }}</ds-heading>
+        <ds-flex>
           <ds-flex-item width="10%" />
           <ds-flex-item width="100%">
             <ds-button
@@ -17,7 +20,7 @@
               :primary="allCategories"
             />
             <ds-flex-item>
-              <label>{{ $t('filter-posts.all') }}</label>
+              <label class="category-labels">{{ $t('filter-posts.all') }}</label>
             </ds-flex-item>
             <ds-space />
           </ds-flex-item>
@@ -25,13 +28,13 @@
       </ds-flex-item>
       <ds-flex-item :width="{ base: '0%', sm: '0%', md: '0%', lg: '7%' }" />
       <ds-flex-item
-        :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }"
+        :width="{ base: '50%', sm: '50%', md: '50%', lg: '11%' }"
         v-for="index in chunk.length"
         :key="index"
       >
-        <ds-flex v-for="category in chunk[index - 1]" :key="category.id" class="categories-list">
-          <ds-flex>
-            <ds-flex-item width="100%">
+        <ds-flex v-for="category in chunk[index - 1]" :key="category.id" class="categories-menu">
+          <ds-flex class="categories-menu">
+            <ds-flex-item width="100%" class="categories-menu-item">
               <ds-button
                 :icon="category.icon"
                 :primary="isActive(category.id)"
@@ -40,8 +43,8 @@
               <ds-space margin-bottom="small" />
             </ds-flex-item>
             <ds-flex>
-              <ds-flex-item>
-                <label>{{ category.name }}</label>
+              <ds-flex-item class="categories-menu-item">
+                <label class="category-labels">{{ category.name }}</label>
               </ds-flex-item>
               <ds-space margin-bottom="xx-large" />
             </ds-flex>
@@ -71,16 +74,36 @@ export default {
       return false
     },
     toggleCategory(id) {
-      const index = this.selectedCategoryIds.indexOf(id)
-      if (index > -1) {
-        this.selectedCategoryIds.splice(index, 1)
+      if (!id) {
+        this.selectedCategoryIds = []
+        this.allCategories = true
       } else {
-        this.selectedCategoryIds.push(id)
+        const index = this.selectedCategoryIds.indexOf(id)
+        if (index > -1) {
+          this.selectedCategoryIds.splice(index, 1)
+        } else {
+          this.selectedCategoryIds.push(id)
+        }
+        this.allCategories = false
       }
-      if (!id) this.selectedCategoryIds = []
-      this.selectedCategoryIds.length ? (this.allCategories = false) : (this.allCategories = true)
       this.$emit('filterPosts', this.selectedCategoryIds)
     },
   },
 }
 </script>
+<style lang="scss">
+#filter-posts-header {
+  display: block;
+  text-align: center;
+}
+.categories-menu-item {
+  text-align: center;
+}
+.categories-menu {
+  justify-content: center;
+}
+
+.category-labels {
+  font-size: $font-size-small;
+}
+</style>