15

foobar

Currently, badges are aligned by their icon (good), but their class doesn't matter. This makes it slightly harder to see how many of which class of badge you have per site.

Can we place each badge class in their own column, so my silver (now silvers) can rest in its higher-class column?

  • 1
    In making this request, consider someone with a variety of rep/badge combinations. For example, here's a view of Shog's. Would you right-align the rep as well? Something to consider... – Werner Apr 29 '15 at 23:37
  • Then it'd still look better if it aligned the badge images themselves. – boxspah Apr 29 '15 at 23:40
  • 1
    My suggestion is to use a more general view to support your case, that's all. – Werner Apr 29 '15 at 23:41
  • Yes, I think this is a great idea! – ʇolɐǝz ǝɥʇ qoq Apr 30 '15 at 2:56
  • @DominatorX Can you make an image of how Shog9's badges would look "better" with your proposal? I can only see bad alignment, and a huge dev/css/designer task for little ROI – James Apr 30 '15 at 3:56
  • I mentioned Shog because Werner linked to an image of his badges and it seems like a potential thing to resolve. How would you handle it when there's more of a mixture than your current example (ie 2 on some lines, 3 on others etc). Shog aint hard to find, he's at the top of most list ;) - meta.stackexchange.com/users/811/shog9?tab=topactivity – James May 2 '15 at 16:29
  • @James I see your point. Then just align the badge icons! If the number is long enough to overlap the badge icon, then just nudge column of icons a little further to the right. – boxspah Jan 4 '16 at 2:42
3
+50

I've made a userscript to do this.

Examples:

Shog:

enter image description here goes to.... enter image description here

Me:

enter image description here goes to... enter image description here

It also adds the spacing back.

Install it from GitHub Gist


The code is, admittedly, messy and some of it could probably be changed and made shorter, but it works! :P

It basically rewrites the badges section, adding in blank badge spans if they don't exist.

// ==UserScript==
// @name         User Profile Badge alignment
// @namespace    http://stackexchange.com/users/4337810/
// @version      1.0
// @description  A userscript that aligns badges by class on user profile pages
// @author       ᔕᖺᘎᕊ (http://stackexchange.com/users/4337810/)
// @match        *://*.stackexchange.com/users/*
// @match        *://*.stackoverflow.com/users/*
// @match        *://*.superuser.com/users/*
// @match        *://*.serverfault.com/users/*
// @match        *://*.askubuntu.com/users/*
// @match        *://*.stackapps.com/users/*
// @match        *://*.mathoverflow.net/users/*
// @grant        none
// ==/UserScript==

var numbers = {
    'gold': 0,
    'silver': 0,
    'bronze': 0
}
var classes = ['gold', 'silver', 'bronze'];
var acs = {};

setTimeout(function() {   
    $('.user-accounts tr .badges').each(function(i, o) {
        var b, s, g;
        if($(this).find('>span[title*="bronze badge"]').length) { 
            b = $(this).find('>span[title*="bronze badge"] .badgecount').text();
        }
        if($(this).find('>span[title*="silver badge"]').length) { 
            s = $(this).find('>span[title*="silver badge"] .badgecount').text();
        }
        if($(this).find('>span[title*="gold badge"]').length) { 
            g = $(this).find('>span[title*="gold badge"] .badgecount').text();
        }
        acs[i] = {'bronze': b, 'silver': s, 'gold': g};
    });
    $.each(acs, function(k, v) {
        $badgesTd = $('.user-accounts tr .badges').eq(k);
        $badgesTd.html('');
        if(acs[k]['gold']) {
            $badgesTd.append('<span title="' + acs[k]['gold'] + ' gold badges"><span class="badge1"></span><span class="badgecount">'+acs[k]['gold']+'</span></span>');
        } else {
            $badgesTd.append('<span><span class="badge1" style="background-image:none"></span><span class="badgecount">&nbsp;&nbsp;</span></span>');            
        }
        if(acs[k]['silver']) {
            $badgesTd.append('<span title="' + acs[k]['silver'] + ' silver badges"><span class="badge2"></span><span class="badgecount">'+acs[k]['silver']+'</span></span>');            
        } else {
            $badgesTd.append('<span><span class="badge1" style="background-image:none"></span><span class="badgecount">&nbsp;&nbsp;</span></span>');            
        }
        if(acs[k]['bronze']) {
            $badgesTd.append('<span title="' + acs[k]['bronze'] + ' bronze badges"><span class="badge3"></span><span class="badgecount">'+acs[k]['bronze']+'</span></span>');
        } else {
            $badgesTd.append('<span><span class="badge1" style="background-image:none"></span><span class="badgecount">&nbsp;&nbsp;</span></span>');            
        }
    });

    for(var c = 0; c < 3; c++) {
        var className = classes[c];
        var $thisClassSpan = $('.user-accounts .badges span[title*="' + className  + '"]');
        if($thisClassSpan.length) {
            $thisClassSpan.each(function() {
                text = $(this).text();
                if(text.length>numbers[className]) {
                    numbers[className] = text.length;
                }
            });
        }
        $thisClassSpan.each(function() {
            len = $(this).text().length;
            if(len < numbers[className]) {
                for(var i = 0; i<numbers[className]-len; i++) {
                    $(this).append('&nbsp;&nbsp;');
                }
            }
        });
    }
    $('.user-accounts .badges span').css('margin-right', '3px');
}, 1000);
  • 1
    Great userscript! Won't be marking as answer though as its not a vanilla solution, but hopefully you won't mind taking the bounty instead ;) – boxspah Mar 30 '16 at 17:54

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .