Merge pull request #1727 from openjck/profile-icons-fontawesome

Fix bug 942370: Use Font Awesome for profile links
mdn · Dec 5, 2013 · 91074ee · 91074ee
2 parents af9cc75 + 267ff86
commit 91074ee
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 4 deletions.
diff --git a/apps/devmo/models.py b/apps/devmo/models.py
@@ -64,36 +64,43 @@ class UserProfile(ModelBase):
             label=_(u'Website'),
             prefix='http://',
             regex='^https?://',
+            fa_icon='icon-link',
         )),
         ('twitter', dict(
             label=_(u'Twitter'),
             prefix='https://twitter.com/',
             regex='^https?://twitter.com/',
+            fa_icon='icon-twitter',
         )),
         ('github', dict(
             label=_(u'GitHub'),
             prefix='https://github.com/',
             regex='^https?://github.com/',
+            fa_icon='icon-github',
         )),
         ('stackoverflow', dict(
-            label=_(u'StackOverflow'),
+            label=_(u'Stack Overflow'),
             prefix='https://stackoverflow.com/users/',
             regex='^https?://stackoverflow.com/users/',
+            fa_icon='icon-stackexchange',
         )),
         ('linkedin', dict(
             label=_(u'LinkedIn'),
             prefix='https://www.linkedin.com/in/',
             regex='^https?://www.linkedin.com/in/',
+            fa_icon='icon-linkedin',
         )),
         ('mozillians', dict(
             label=_(u'Mozillians'),
             prefix='https://mozillians.org/u/',
             regex='^https?://mozillians.org/u/',
+            fa_icon='icon-group',
         )),
         ('facebook', dict(
             label=_(u'Facebook'),
             prefix='https://www.facebook.com/',
             regex='^https?://www.facebook.com/',
+            fa_icon='icon-facebook',
         ))
     ]
 

diff --git a/apps/devmo/templates/devmo/profile_redesign.html b/apps/devmo/templates/devmo/profile_redesign.html
@@ -38,7 +38,7 @@
             {% set site_meta = site[1] %}
             {% set href = profile.websites[site_name] %}
             {% if href %}
-                <li class="{{site_name}}"><a href="{{href}}" rel="me external" class="url">{{site_meta['label']}}</a></li>
+                <li class="{{site_name}}"><i class="{{site_meta['fa_icon']}}" aria-hidden="true"></i><a href="{{href}}" rel="me external" class="url">{{site_meta['label']}}</a></li>
             {% endif %}
           {% endfor %}
         </ul>

diff --git a/media/redesign/stylus/profile.styl b/media/redesign/stylus/profile.styl
@@ -45,6 +45,31 @@
       width: auto;
       margin-left: 150px;
     }
+
+    .links {
+      display: table;
+      border-spacing: (grid-spacing / 2);
+      margin: -(@border-spacing); // Offset outer border
+
+      li {
+        display: table-row;
+      }
+
+      i, a {
+        display: table-cell;
+        vertical-align: middle;
+      }
+
+      i {
+        font-size: 14px;
+        text-align: center;
+      }
+
+      a {
+        compat-only(background, none);
+        padding: 0;
+      }
+    }
   }
 }
 
@@ -79,5 +104,3 @@
     }
   }
 }
-
-