From c684843c53660a13567c574a30d7a99cded990b0 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Fri, 2 Mar 2018 16:15:31 -0500
Subject: [PATCH] Improving title selection on badge pages

---
 .../discourse/templates/badges/index.hbs      |  9 ++--
 .../stylesheets/common/base/user-badges.scss  | 44 ++++++++++++-------
 2 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/badges/index.hbs b/app/assets/javascripts/discourse/templates/badges/index.hbs
index 12adeb3d06f..b0e2c030f96 100644
--- a/app/assets/javascripts/discourse/templates/badges/index.hbs
+++ b/app/assets/javascripts/discourse/templates/badges/index.hbs
@@ -8,10 +8,11 @@
           <div class='title'>
             <h3>{{bg.badgeGrouping.displayName}}</h3>
           </div>
-
-          {{#each bg.badges as |b|}}
-            {{badge-card badge=b filterUser=b.has_badge username=currentUser.username}}
-          {{/each}}
+          <div class="badge-group-list">
+            {{#each bg.badges as |b|}}
+              {{badge-card badge=b filterUser=b.has_badge username=currentUser.username}}
+            {{/each}}
+          </div>
         </div>
       {{/each}}
     </div>
diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss
index d38849429da..63a31d2a15e 100644
--- a/app/assets/stylesheets/common/base/user-badges.scss
+++ b/app/assets/stylesheets/common/base/user-badges.scss
@@ -206,7 +206,7 @@
     vertical-align: top;
     flex: 0 0 32%;
     margin-right: calc(2% - 3px);
-    &:nth-of-type(3n+1) {
+    &:nth-of-type(3n) {
       margin-right: 0;
     }
     @include small-width {
@@ -228,8 +228,10 @@
   }
   &.large {
     width: 100%;
+    align-self: flex-start;
     @media screen and (min-width: 767px) {
       max-width: calc(#{$large-width} / 2);
+      margin-right: 1.5em;      
     }
     .badge-contents {
       .badge-link {
@@ -251,7 +253,6 @@
   }
 }
 
-
 .badge-groups {
   margin: 20px 0;
   color: dark-light-choose($primary-medium, $secondary-medium);
@@ -260,7 +261,13 @@
   }
 }
 
-.badge-grouping {
+.badge-title {
+  .user-content {
+    padding: 0;
+  }
+}
+
+.badge-group-list {
   margin-bottom: 1.5em;
   display: flex;
   flex-wrap: wrap;
@@ -282,20 +289,11 @@
   margin-top: 1em;
 
   .badge-grant-info {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    @media screen and (max-width: 500px) {
-      flex-wrap: wrap;
-    }
-    div:not(.grant-info-item) {
-      display: flex;
-    }
-
     &.hidden {
       display: none;
     }
   }
+
   .grant-info-item {
     margin-bottom: 1em;
     color: dark-light-choose($primary-medium, $secondary-medium);
@@ -304,12 +302,24 @@
     }
   }
 
-  .badge-title .form-horizontal .controls {
-    margin-left: 20px;
+  .badge-set-title {
+    padding: 1.5em;
+    border: 1px solid $primary-low;
+    
+    .user-content {
+      padding: 0;
+      .control-group {
+        margin-bottom: 1em;
+      }
+    }
   }
 
-  .close-btn {
-    margin: -20px 0 0 20px;
+  .badge-title .form-horizontal .controls {
+    margin-left: 0;
+  }
+
+  .form-horizontal {
+    margin-bottom: 0;
   }
 }