Improve the badge page to filter by badge type

Question

Today I looked at https://stackoverflow.com/badges and wanted to see just Gold Badges, so I clicked on Gold Badge on the right side under the Legend heading. Nothing happened.

My suggestion is to make the buttons in the legend show only the type of badge you selected.

Answer 1

Starting with the next build, we'll have filters on the badges page for "all", "gold", "silver" and "bronze" (defaulting to "all", same as the current view).

These filters will look/function like all other "sub-tabs" on other parts of the site (e.g. /users, your activity/reputation/responses profile views, etc.).

Answer 2

I wrote a blog post with some JavaScript to rearrange the badges in to Gold, Silver & Bronze sections.

_{Crappy code disclaimer: I know the JavaScript is nasty and I know my blog looks ..erm... different. Blog is a WIP and the JS works so I haven't bothered changing it :)}

You might want to look at this question posted by Waffles about the Badges page.

Answer 3

The legend already appears to be active as a hover over Gold, Silver, or Bronze will highlight the badge. However clicking does nothing.

I suggest that either the badges don't respond to the mouse (other than a tooltip), or to implement fl00r's suggestion.

Answer 4

I like the idea of improving the badges page, if someone wants to target a specific badge I think it's useful to see which ones are most likely within grasp, so sorting by count sounds like a useful way to view the badges, I've created a bookmarklet for viewing them this way using the tablesorter plugin for jQuery...

(function() {
    $.ajax({
        url: "http://yourls.googlecode.com/svn-history/r332/trunk/js/jquery.tablesorter.min.js",
        dataType: "script",
        success: function() {
            $("table .badge-cell").each(function() {
                $(this).before("<td class=\"count-cell\">" + ($(this).find(".item-multiplier").length > 0 ? $(this).find(".item-multiplier").html().replace(/[^\d.]/g, "") : "0") + "</td>")
            });
            $("#mainbar div table").prepend("<thead><tr><th></th><th class=\"count-cell\">Count</th><th class=\"badge-cell\">Badge</th><th>Description</th></tr></thead>").tablesorter({
                sortList: [[1, 1]]
            });
            $(".count-cell").css("width", "50px");
        }
    });
})();

results in a sortable table with headers (can click on the header to sort by that column):