adds proper css badging to admins. Fixes #198

kandanapp · Mar 14, 2013 · 5a99802 · 5a99802
1 parent f086bac
commit 5a99802
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 3 deletions.
diff --git a/app/assets/javascripts/backbone/plugins/user_list.js.coffee b/app/assets/javascripts/backbone/plugins/user_list.js.coffee
@@ -5,10 +5,12 @@ class Kandan.Plugins.UserList
   @pluginNamespace: "Kandan.Plugins.UserList"
 
   @template: _.template '''
-    <div class="user clearfix">
+    <div class="user clearfix">  
       <img class="avatar" src="<%= avatarUrl %>"/>
       <span class="name"><%= name %></span>
-      <span class="name">&nbsp;<%= admins %></span>
+      <% if(admin){ %>
+          &nbsp;<span class="badge badge-important">Admin</span>
+      <% } %>  
     </div>
   '''
 
@@ -24,7 +26,7 @@ class Kandan.Plugins.UserList
 
       $users.append @template({
         name: displayName,
-        admins: isAdmin,
+        admin: isAdmin,
         avatarUrl: Kandan.Helpers.Avatars.urlFor(user, {size: 25})
       })
     $el.html($users)

diff --git a/app/assets/stylesheets/lib/font-awesome.css b/app/assets/stylesheets/lib/font-awesome.css
@@ -1,3 +1,108 @@
+.label,
+.badge {
+  display: inline-block;
+  margin-top: 2.5px;
+  margin-left: 5px;
+  padding: 2px 4px;
+  font-size: 12px;
+  font-weight: bold;
+  line-height: 12px;
+  color: #ffffff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  white-space: nowrap;
+  vertical-align: baseline;
+  background-color: #999999;
+}
+
+.label {
+  -webkit-border-radius: 3px;
+     -moz-border-radius: 3px;
+          border-radius: 3px;
+}
+
+.badge {
+  padding-right: 9px;
+  padding-left: 9px;
+  -webkit-border-radius: 9px;
+     -moz-border-radius: 9px;
+          border-radius: 9px;
+}
+
+.label:empty,
+.badge:empty {
+  display: none;
+}
+
+a.label:hover,
+a.label:focus,
+a.badge:hover,
+a.badge:focus {
+  color: #ffffff;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.label-important,
+.badge-important {
+  background-color: #b94a48;
+}
+
+.label-important[href],
+.badge-important[href] {
+  background-color: #953b39;
+}
+
+.label-warning,
+.badge-warning {
+  background-color: #f89406;
+}
+
+.label-warning[href],
+.badge-warning[href] {
+  background-color: #c67605;
+}
+
+.label-success,
+.badge-success {
+  background-color: #468847;
+}
+
+.label-success[href],
+.badge-success[href] {
+  background-color: #356635;
+}
+
+.label-info,
+.badge-info {
+  background-color: #3a87ad;
+}
+
+.label-info[href],
+.badge-info[href] {
+  background-color: #2d6987;
+}
+
+.label-inverse,
+.badge-inverse {
+  background-color: #333333;
+}
+
+.label-inverse[href],
+.badge-inverse[href] {
+  background-color: #1a1a1a;
+}
+
+.btn .label,
+.btn .badge {
+  position: relative;
+  top: -1px;
+}
+
+.btn-mini .label,
+.btn-mini .badge {
+  top: 0;
+}
+
 /*!
  *  Font Awesome 3.0.2
  *  the iconic font designed for use with Twitter Bootstrap