From 6e5bfa62d3cce27e19f6567369bd4bf3e952fb16 Mon Sep 17 00:00:00 2001
From: Sam Saffron <sam.saffron@gmail.com>
Date: Thu, 5 Nov 2015 20:51:05 +1100
Subject: [PATCH] UX: improve show badge page on mobile

---
 .../discourse/templates/badges/show.hbs       | 21 +++---
 .../stylesheets/common/base/user-badges.scss  | 73 ++++++++++++-------
 2 files changed, 57 insertions(+), 37 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/badges/show.hbs b/app/assets/javascripts/discourse/templates/badges/show.hbs
index 42a13208c2..4b245ee2f4 100644
--- a/app/assets/javascripts/discourse/templates/badges/show.hbs
+++ b/app/assets/javascripts/discourse/templates/badges/show.hbs
@@ -5,17 +5,16 @@
     {{model.displayName}}
   </h1>
 
-  <table class='badges-listing'>
-    <tbody>
-      <tr>
-        <td class='badge'>{{user-badge badge=model}}</td>
-        <td class='description'>{{{model.displayDescriptionHtml}}}</td>
-        <td class='grant-count'>{{i18n 'badges.granted' count=model.grant_count}}</td>
-        <td class='info'>{{i18n 'badges.allow_title'}} {{{view.allowTitle}}}<br>{{i18n 'badges.multiple_grant'}} {{{view.multipleGrant}}}
-        </td>
-      </tr>
-    </tbody>
-  </table>
+  <div class='badges-listing'>
+    <div class='row'>
+      <div class='badge'>{{user-badge badge=model}}</div>
+      <div class='description'>{{{model.displayDescriptionHtml}}}</div>
+      <div class='grant-count'>{{i18n 'badges.granted' count=model.grant_count}}</div>
+      <div class='info'>{{i18n 'badges.allow_title'}} {{{view.allowTitle}}}<br>{{i18n 'badges.multiple_grant'}} {{{view.multipleGrant}}}
+      </div>
+    </div>
+  </div>
+
 
   {{#if showLongDescription}}
   <div class='long-description banner'>
diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss
index 9f812fa899..01f25c4d7f 100644
--- a/app/assets/stylesheets/common/base/user-badges.scss
+++ b/app/assets/stylesheets/common/base/user-badges.scss
@@ -65,57 +65,73 @@
 }
 
 /* Badge listing in /badges. */
-table.badges-listing {
+.badges-listing {
   margin: 20px 0;
   border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
   width: 90%;
+  padding: 10px;
+  display: table;
+
+  .row {
+    display: table-row;
+    > div {
+      display: table-cell;
+      vertical-align: middle;
+    }
+  }
 
   .user-badge {
     font-size: $base-font-size;
   }
 
-  tr.title td {
-    padding-top: 30px;
-    padding-bottom: 15px;
-  }
-
-  tr.title {
-    border-top: 0px solid;
-  }
-
-  td {
-    padding: 10px 0px;
-  }
-
-  td.granted{
-   color: $success;
-   font-size: 120%;
-  }
-
-  td.grant-count {
+  .grant-count {
     text-align: center;
     color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 60%));
     font-size: 120%;
   }
 
-  td.badge, td.grant-count {
+  .badge, .grant-count {
     white-space: nowrap;
-    padding-right: 10px;
   }
 
-  td.info {
+  .info {
     font-size: 0.9em;
     text-align: right;
   }
 
-  td.description {
+  .description {
   }
 
-  tr {
-    border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+}
+
+@media all and (max-width: 750px) {
+  .show-badge .user-badge-with-posts .badge-user a.post-link {
+    width: auto;
+  }
+  .show-badge div.badge-user {
+    padding: 0;
+  }
+  .badges-listing {
+    display: block;
+
+    .info, .grant-count {
+      text-align: left;
+    }
+
+    .row > div.info { display: none; }
+
+    .row {
+      display: block;
+      > div {
+        display: block;
+        margin-top: 10px;
+      }
+    }
   }
 }
 
+
 /* /badges/:id/:slug page styling. */
 .show-badge {
   .badge-user {
@@ -124,6 +140,7 @@ table.badges-listing {
     padding: 5px 10px;
     margin-bottom: 10px;
     display: inline-block;
+    vertical-align: top;
 
     .details {
       margin: 0 10px;
@@ -131,6 +148,10 @@ table.badges-listing {
       color: $primary;
     }
 
+    .username {
+      word-wrap: break-word;
+    }
+
     .date {
       display: block;
       color: lighten($primary, 40%);