Add JS helper to make sure that user names don't go below card avatars

WasabiFan · WasabiFan · commit 18c8ee2c8695 · 2016-04-24T13:43:52.000-07:00
diff --git a/javascripts/cards.js b/javascripts/cards.js
@@ -7,10 +7,22 @@ $(document).ready(function () {
             $cardDiv = $cardDiv.children(':last-child')
 
             $cardDiv.append('<div class="user-card-avatar"><img src="' + userData.avatar_url + '"/></div>');
+            var $avatarDiv = $cardDiv.children(':last-child');
             $cardDiv.append('<div class="user-card-text"></div>');
             var $textDiv = $cardDiv.children(':last-child');
+            
             $textDiv.append('<div class="user-card-name">' + (userData.name || userData.login) + '</div>');
             $textDiv.append('<div class="user-card-login">@' + userData.login + '</div>');
+            
+            // Give the text a margin to make sure it does not go below the avatar
+            $avatarDiv.resize(function() {
+                $textDiv.css({
+                    width: 'auto',
+                    "margin-left": $avatarDiv.width()
+                });
+            });
+            
+            $avatarDiv.resize();
         });        
     });
 });
