10

On both of my active sites the 'Earned Bounties' section header layout is broken:

enter image description here

It affects the header and the sorter.

(Tested on Chrome and IE, confirmed by others on Safari, FireFox)

  • 1
    Also affects Firefox 32.0.1 – JonK Sep 15 '14 at 18:03
  • Okay. Good to know. It should affect Opera too, since it uses Chromium. Nicael reported FireFox to be affected too. – Patrick Hofman Sep 15 '14 at 18:04
  • 1
    And Safari, yes. – nicael Sep 15 '14 at 18:18
  • 1
    The header seems to be missing the <h1> tags entirely, which is why it ends up looking like plain body text. – Ilmari Karonen Sep 15 '14 at 20:17
6

The panel was mistakenly using the mobile layout. This is fixed and it will be out in the next build (#2568)

3

This seems to be several bugs in one:

  1. The title of the "bounties" section is missing the <h1> tags, causing it to be formatted as body text. Fixing the code to generate proper <h1> tags should fix this.

  2. The sorter works only the first time it's clicked. This is a bug in the client-side code, which attaches the event handler directly to the <select> element, and does not reattach it after the section is reloaded via AJAX. The most straightforward fix is to replace this line in the StackExchange.user.init method:

    $('.user-panel-subtabs select').on('change', function() {
    

    with:

    $('.user-panel-subtabs select').live('change', function() {
    
  3. If the sorter is changed several times between page reloads, its default value on subsequent page loads can get out of sync with the actual content shown in the section. (This is normally masked by the previous bug, but becomes obvious if it's fixed.) Apparently, what happens is that the section correctly shows whatever content was last requested, but the sorter instead remembers the first choice selected after the most recent page load.

  4. If any actual bounties are shown in the section, there's an ugly gap between the header and the bounties. This happens because the bounty list is formatted as a table, and the floating sorted pushes the table downwards. Alas, fixing this part properly is likely to require redesigning the HTML structure entirely.

Anyway, I just wrote a quick client-side workaround for this bug for SOUP. It fixes the first two sub-bugs above, by wrapping the title in <h1> tags and moving the event handler where it belongs, and sort of fixes the latter two issues by re-setting the sorter based on the section title, and by restyling the sorter to overlap the table instead of pushing it down (which can look ugly, too, but generally not as bad as the alternative).

For the curious, here's what the code for the first three fixes looks like:

// fix #1: wrap header in <h1> tags
SOUP.hookAjax( /^\/ajax\/users\/panel\//, function () {
    $('body.user-page .user-panel .subheader > a').wrap('<h1></h1>');
} ).code();

// fix #2: make the change event handler live
var selector = '.user-panel-subtabs select'; var matches = $(selector);
if ( ! matches.length ) return;
$._data( matches[0], 'events' ).change.forEach( function ( h ) {
    if ( h.selector || ! /"div\[class='subheader'\]"/.test( h.handler.toString() ) ) return;
    $('body').on( 'change', selector, h.handler );
    matches.off( 'change', h.handler );
} );

// fix #3: sync the selector with the visible content
// XXX: this will only work on English sites, and may break if the title text is changed
matches.each( function () {
    var title = $(this).closest('.user-panel').find('div.subheader').text().toLowerCase();
    for (var i = 0; i < this.options.length; i++ ) {
        if ( title.indexOf( this.options[i].value ) < 0 ) continue;
        this.options[i].selected = true;
    }
} )

The fix for the fourth issue is pure CSS, and looks like this:

.user-show-new .user-panel .user-panel-subtabs.sorter {
    margin-bottom: -100%;
    position: relative;
    background: white;
    padding: 1px;
}

If you'd like to test this fix, you can install the unstable development branch of SOUP. The less adventurous can wait for the next stable release (v1.24), which should include this fix.

You must log in to answer this question.

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