DEV: Make badges grid a `grid` (#13719)

Even grid gaps, more space for text, removed on-hover shadow

Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>

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

@@ -23,10 +23,8 @@
   {{/if}}
 {{/if}}
 
-<div class="badge-contents" >
+<div class="badge-contents">
-  <div class="badge-icon {{badge.badgeTypeClassName}}">
+  <a href={{url}} class="badge-icon {{badge.badgeTypeClassName}}">{{icon-or-image badge}}</a>
-    <a href={{url}}>{{icon-or-image badge}}</a>
-  </div>
   <div class="badge-info">
     <div class="badge-info-item">
       <h3><a href={{url}} class="badge-link">{{badge.name}}</a></h3>

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

@@ -121,12 +121,9 @@
 }
 
 .badge-card {
-  position: relative;
-  display: inline-block;
   background-color: var(--primary-very-low);
   border: 1px solid var(--primary-low);
-  margin-bottom: 2vh;
+  position: relative;
-  transition: box-shadow 0.25s;
 
   .check-display {
     position: absolute;
@@ -151,9 +148,8 @@
 
   .badge-contents {
     display: flex;
-    min-height: 128px;
+    min-height: 8em;
-    height: 100%;
+    padding: 0 1.5em;
-    padding: 0 10%;
 
     .badge-link {
       color: var(--primary);
@@ -161,19 +157,20 @@
 
     .badge-icon {
       display: flex;
-      flex: 0 0 auto;
+      flex-shrink: 0;
-      width: 1.23em;
+      margin-right: 1.5em;
-      margin-right: 5%;
       align-items: center;
       justify-content: center;
-      font-size: 3.5em;
+      width: 64px;
-      a {
+
-        width: 100%;
+      svg {
+        font-size: 3.5em;
       }
+
       img {
         width: 100%;
-        max-width: 65px;
+        max-width: 64px;
-        max-height: 80px;
+        max-height: 64px;
       }
 
       &.badge-type-gold .fa {
@@ -193,11 +190,8 @@
       display: flex;
       flex: 1 1 auto;
       align-items: center;
-      padding: 1em 1.5em 1em 0;
+      padding: 1em 0;
       color: var(--primary);
-      @media screen and (max-width: 600px) {
-        padding-right: 0;
-      }
 
       h3 {
         margin-bottom: 0.25em;
@@ -209,38 +203,15 @@
     }
   }
 
-  &.medium {
-    flex: 0 0 auto;
-    width: 32%;
-    margin-right: 1.63%;
-    @media screen and (min-width: 851px) {
-      &:nth-of-type(3n) {
-        margin-right: 0;
-      }
-    }
-    @include breakpoint(medium) {
-      width: 48.5%;
-      &:nth-of-type(2n) {
-        margin-right: 0;
-      }
-    }
-    @include breakpoint(mobile-extra-large) {
-      flex: 0 0 100%;
-    }
-    &:hover {
-      box-shadow: shadow("card");
-    }
-    &:active {
-      box-shadow: none;
-    }
-  }
   &.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 {
       padding: 0 5%;
       h3 {
@@ -273,15 +244,20 @@
 }
 
 .badge-group-list {
+  display: grid;
+  grid: auto-flow / repeat(3, 1fr);
+  grid-gap: 1em;
   margin-bottom: 1.5em;
-  display: flex;
+
-  flex-wrap: wrap;
   @include breakpoint(medium) {
-    justify-content: space-between;
+    grid: auto-flow / repeat(2, 1fr);
+  }
+
+  @include breakpoint(mobile-extra-large) {
+    grid: auto-flow / 1fr;
   }
 
   .title {
-    width: 100%;
     font-size: $font-up-1;
   }
 }