From ec2613699f21817457c2a8fd3f4e830a51ea9dc3 Mon Sep 17 00:00:00 2001
From: Jeff Wong <awole20@gmail.com>
Date: Wed, 17 Oct 2018 15:36:25 -0700
Subject: [PATCH] Change box category view to use flexbox

---
 .../templates/components/categories-boxes.hbs | 51 ++++++++++---------
 .../common/base/category-list.scss            | 19 ++++---
 2 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs b/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs
index 16aeaf6195..623191149b 100644
--- a/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs
+++ b/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs
@@ -1,35 +1,38 @@
 {{#each categories as |c|}}
   <div class='category-box category-box-{{unbound c.slug}}' style={{border-color c.color}} data-url={{c.url}}>
     <div class='category-box-inner'>
-      <div class='category-box-heading'>
+      <div class="category-logo">
         {{#if c.uploaded_logo.url}}
           {{cdn-img src=c.uploaded_logo.url class="logo"}}
         {{/if}}
-
-        <h3>
-          {{#if c.read_restricted}}
-            {{d-icon 'lock'}}
-          {{/if}}
-          {{c.name}}
-        </h3>
       </div>
-
-      <div class='description'>
-        {{{text-overflow class="overflow" text=c.description_excerpt}}}
-      </div>
-
-      {{#if c.subcategories}}
-        <div class='subcategories'>
-          {{#each c.subcategories as |sc|}}
-            <a class="subcategory" href={{sc.url}}>
-              <span class="subcategory-image-placeholder">
-                {{cdn-img src=sc.uploaded_logo.url class="logo"}}
-              </span>
-              <span class="subcategory-link">{{sc.name}}</span>
-            </a>
-          {{/each}}
+      <div class="category-details">
+        <div class='category-box-heading'>
+          <h3>
+            {{#if c.read_restricted}}
+              {{d-icon 'lock'}}
+            {{/if}}
+            {{c.name}}
+          </h3>
         </div>
-      {{/if}}
+
+        <div class='description'>
+          {{{text-overflow class="overflow" text=c.description_excerpt}}}
+        </div>
+
+        {{#if c.subcategories}}
+          <div class='subcategories'>
+            {{#each c.subcategories as |sc|}}
+              <a class="subcategory" href={{sc.url}}>
+                <span class="subcategory-image-placeholder">
+                  {{cdn-img src=sc.uploaded_logo.url class="logo"}}
+                </span>
+                <span class="subcategory-link">{{sc.name}}</span>
+              </a>
+            {{/each}}
+          </div>
+        {{/if}}
+      </div>
     </div>
   </div>
 {{/each}}
diff --git a/app/assets/stylesheets/common/base/category-list.scss b/app/assets/stylesheets/common/base/category-list.scss
index b1d0210f88..8a6a395452 100644
--- a/app/assets/stylesheets/common/base/category-list.scss
+++ b/app/assets/stylesheets/common/base/category-list.scss
@@ -55,6 +55,8 @@
   .category-box-inner {
     width: 100%;
     padding: 0;
+    display: flex;
+    flex-direction: column;
 
     border-width: 2px;
     border-left-width: 0;
@@ -78,6 +80,14 @@
       width: 100%;
       padding: 0;
     }
+    .category-box-inner {
+      padding: 1em;
+
+      .category-logo {
+        float: none;
+        margin: 0;
+      }
+    }
   }
 
   &.no-logos {
@@ -86,12 +96,8 @@
     }
   }
 
-  .category-box-heading {
-    padding: 1em 1em 0 1em;
-  }
-
   .description {
-    padding: 0 1em 1em 1em;
+    padding-bottom: 1em;
     text-align: center;
     font-size: $font-0;
     color: dark-light-choose($primary-medium, $secondary-high);
@@ -114,7 +120,6 @@
   }
 
   .subcategories {
-    margin-left: 1em;
     display: flex;
     flex-flow: wrap;
     .subcategory {
@@ -127,8 +132,6 @@
       margin-bottom: 0.6em;
       .subcategory-image-placeholder {
         display: inline-block;
-        width: 20px;
-        height: 20px;
         margin-right: 0.6em;
       }
       .logo {