UX: Improving badge page layout

app/assets/javascripts/discourse/templates/badges/show.hbs

@@ -37,6 +37,7 @@
   {{#if userBadges}}
     <div class="user-badges {{model.slug}}">
       {{#load-more selector=".badge-info" action="loadMore"}}
+      <div class="badges-granted">
         {{#each userBadges as |ub|}}
           {{#user-info user=ub.user size="medium" class="badge-info" date=ub.granted_at}}
             <div class="granted-on">{{i18n 'badges.granted_on' date=(inline-date ub.granted_at)}}</div>
@@ -45,6 +46,7 @@
             {{/if}}
           {{/user-info}}
         {{/each}}
+        </div>
       {{/load-more}}
 
       {{#unless canLoadMore}}

app/assets/javascripts/discourse/templates/components/badge-card.hbs

@@ -5,13 +5,15 @@
   <span class='check-display status-checked'>{{d-icon "check"}}</span>
 {{/if}}
 <div class='badge-contents'>
-  <div class='badge-icon {{badge.badgeTypeClassName}}'>
+  <a href={{url}} class="badge-link">
-    {{icon-or-image badge.icon}}
+    <div class='badge-icon {{badge.badgeTypeClassName}}'>
-  </div>
+      {{icon-or-image badge.icon}}
-  <div class='badge-info'>
-    <div class='badge-info-item'>
-      <h3><a href={{url}}>{{badge.name}}</a></h3>
-      <div class='badge-summary'>{{{summary}}}</div>
     </div>
-  </div>
+    <div class='badge-info'>
+      <div class='badge-info-item'>
+        <h3>{{badge.name}}</h3>
+        <div class='badge-summary'>{{{summary}}}</div>
+      </div>
+    </div>
+  </a>
 </div>

app/assets/stylesheets/common/base/user-badges.scss

@@ -121,9 +121,10 @@
 .badge-card {
   position: relative;
   display: inline-block;
-  background-color: $primary-low;
+  background-color: $primary-very-low;
-  margin-right: 5px;
+  border: 1px solid $primary-low;
-  margin-bottom: 10px;
+  margin-bottom: 2vh;
+  transition: box-shadow .25s;
   
   .check-display {
     position: absolute;
@@ -142,17 +143,26 @@
 
   .badge-contents {
     display: flex;
-    flex-direction: row;
     min-height: 128px;
     height: 100%;
     
-    .badge-icon {
+    .badge-link {
-      min-width: 90px;
       display: flex;
+      flex: 1 1 auto;
+      padding: 0 10%;
+      @media screen and (max-width: 550px) {
+        padding: 0 5%;
+      }
+    }
+
+    .badge-icon {
+      display: flex;
+      flex: 0 0 auto; 
+      width: 1.23em;
+      margin-right: 5%;
       align-items: center;
       justify-content: center;
-      background-color: $primary-low;
+      font-size: 3.5em;
-      font-size: 3em;
 
       img {
         max-width: 80px;
@@ -174,32 +184,73 @@
 
     .badge-info {
       display: flex;
+      flex: 1 1 auto;
       align-items: center;
-      justify-content: center;
+      padding: 1em 1.5em 1em 0;
-      padding: 15px;
       color: $primary;
+      @media screen and (max-width: 600px) {
+        padding-right: 0;
+      }
 
       h3 {
-        margin-bottom: 0.4em;
+        margin-bottom: 0.25em;
+        font-size: $font-up-1;
+        @media screen and (min-width: 900px) {
+          font-size: $font-up-2;
+        }
+      }
+    }
+  }
+
+  &.medium {
+    vertical-align: top;
+    flex: 0 0 32%;
+    margin-right: calc(2% - 3px);
+    &:nth-of-type(3n+1) {
+      margin-right: 0;
+    }
+    @include small-width {
+      flex: 0 0 49%;
+      margin-right: 0;
+    }
+    @media screen and (max-width: 550px) {
+      flex: 0 0 100%;
+    }
+    &:hover {
+      box-shadow: shadow("card");
+    }
+    &:active {
+      box-shadow: none;
+    }
+    @media all and (max-width: 320px) {
+      width: 100%;
+    }
+  }
+  &.large {
+    width: 100%;
+    @media screen and (min-width: 767px) {
+      max-width: calc(#{$large-width} / 2);
+    }
+    .badge-contents {
+      .badge-link {
+        padding: 0 5%;
+        width: 90%;
+        h3 {
+          font-size: $font-up-3;
+        }
       }      
     }
   }
 }
 
-.badge-card.medium {
+.badges-granted {
-  width: 350px;
+  display: flex;
-  vertical-align: top;
+  flex-wrap: wrap;
-}
+  @media screen and (max-width: $small-width) {
-
+    justify-content: space-between;
-@media all and (max-width: 320px) {
-  .badge-card.medium {
-    width: 100%;
   }
 }
 
-.badge-card.large {
-  width: 750px;
-}
 
 .badge-groups {
   margin: 20px 0;
@@ -211,6 +262,16 @@
 
 .badge-grouping {
   margin-bottom: 1.5em;
+  display: flex;
+  flex-wrap: wrap;
+  @include small-width {
+    justify-content: space-between;    
+  }
+
+  .title {
+    width: 100%;
+    font-size: $font-up-1;
+  }
 }
 
 .show-badge-details {
@@ -222,7 +283,6 @@
   .badge-grant-info {
     display: flex;
     align-items: center;
-    margin-left: 1em;
     &.hidden {
       display: none;
     }

app/assets/stylesheets/common/components/user-info.scss

@@ -13,7 +13,9 @@
     float: left;
     width: 70%;
     padding-left: 5px;
-    font-size: $font-down-1;
+    @media screen and (max-width: 600px) {
+      font-size: $font-down-1;
+    }
 
     .name-line {
       white-space: nowrap;
@@ -57,6 +59,7 @@
 
     &.badge-info {
       min-height: 80px;
+      min-width: 250px;
 
       .granted-on {
         color: dark-light-choose($primary-medium, $secondary-medium);

app/assets/stylesheets/desktop/components/user-info.scss

@@ -1,14 +1,17 @@
 .user-info {
   &.medium {
-    width: 480px;
+    flex: 0 0 32%;
-
+    margin-right: 2%;
+    display: flex;
+    &:nth-of-type(3n) {
+      margin-right: 0;
+    }
+    @media screen and (max-width: $small-width) {
+      flex: 0 0 48%;
+      margin-right: 0;
+    }
     .user-image {
       width: 55px;
     }
-
-    .user-detail {
-      width: 380px;
-    }
-
   }
 }

app/assets/stylesheets/mobile/components/user-info.scss

@@ -1,14 +0,0 @@
-// Mobile styles for "user-info" component
-.user-info {
-  &.medium {
-    width: 300px;
-
-    .user-image {
-      width: auto;
-    }
-
-    .user-detail {
-      width: 240px;
-    }
-  }
-}