FEATURE: explain which badges can be titles

app/assets/javascripts/discourse/templates/badges/show.js.handlebars

@@ -11,6 +11,8 @@
         <td class='badge'>{{user-badge badge=this}}</td>
         <td class='description'>{{displayDescription}}</td>
         <td class='grant-count'>{{i18n badges.granted count=grant_count}}</td>
+        <td class='info'>{{i18n badges.allow_title}} {{{view.allowTitle}}}<br>{{i18n badges.multiple_grant}} {{{view.multipleGrant}}}
+        </td>
       </tr>
     </tbody>
   </table>

app/assets/javascripts/discourse/views/badges-show.js.es6

@@ -8,4 +8,10 @@
 **/
 export default Discourse.View.extend(Discourse.LoadMore, {
   eyelineSelector: '.badge-user',
+  tickOrX: function(field){
+    var icon = this.get('controller.model.' + field) ? "fa-check" : "fa-times";
+    return "<i class='fa " + icon + "'></i>";
+  },
+  allowTitle: function() { return this.tickOrX("allow_title"); }.property(),
+  multipleGrant: function() { return this.tickOrX("multiple_grant"); }.property()
 });

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

@@ -69,6 +69,7 @@
 table.badges-listing {
   margin: 20px 0;
   border-bottom: 1px solid scale-color-diff();
+  width: 90%;
 
   .user-badge {
     font-size: $base-font-size;
@@ -79,8 +80,6 @@ table.badges-listing {
   }
 
   td.grant-count {
-    font-size: 0.8em;
-    color: $primary;
     text-align: right;
   }
 
@@ -88,6 +87,14 @@ table.badges-listing {
     white-space: nowrap;
   }
 
+  td.info {
+    font-size: 0.9em;
+    text-align: right;
+  }
+
+  td.description {
+  }
+
   tr {
     border-top: 1px solid scale-color-diff();
   }

config/locales/client.en.yml

@@ -1935,6 +1935,8 @@ en:
 
     badges:
       title: Badges
+      allow_title: "allow badge as title?"
+      multiple_grant: "awarded multiple times?"
       badge_count:
         one:   "1 Badge"
         other: "%{count} Badges"