Keep issue right sidebar visible

This is the opposite request to #2128147: Waste of valuable horizontal space

...coming from #1991500: Blocks in sidebar on issue pages forces the rest of the page to 2/3 width and other places where this feature request originated from.

Now, with the D7 d.o upgrade where the issue metadata are not available close to the last comments added (the ones marked with the "new" tag) I find myself having to scroll to the top of the page to see them. Also, when typing a reply these metadata used to be close at view. This issue becomes even more obvious and irritating when the issue has a lot of comments like 100+. Having the sidebar be sticky would be perfect.

...and do note in the screenshot above that I'm at comment number #138. Oh, all the scrolling!! :(

I agree - it would be very helpful if the metadata was visible all the time, no matter where you scrolled to. An alternative way to do this, which also meets the needs of #1991500: Blocks in sidebar on issue pages forces the rest of the page to 2/3 width and #2128147: Waste of valuable horizontal space is to have the metadata in a full-width horizonal block across the top of the issue. Make it sticky so that it remains at the top of the screen (like we can do for table headers). Then we can remove the sidebar completely and let the comments flow full width. We have shorter page depth and reduced scrolling.

Jonathan

Please don't tag issues with 'Drupal.org 7.1', this is D7 team way to manage our to-do list.

Sorry, I thought I was doing the right thing. I didn't realise that tag was only for use by the D7 team.

+1 for this. Can we get a screenshot of the patch in action halfway down a long comment thread or such?

Paste this into your JS console while viewing any issue (like this one) to try it out:

(function($) {
    var $sidebar   = $(".node-type-project-issue #aside-region"),
        $window    = $(window),
        offset     = $sidebar.offset()
    $sidebar.prepend('<h3 class="sidebar-title">' + jQuery('h1#page-subtitle').text() + '</h3>');
    $('.sidebar-title').hide();
    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $('.sidebar-title').show();
            $sidebar.css({
                position: 'fixed', top: '10px', width: '300px'
            });
        } else {
            $('.sidebar-title').hide();
            $sidebar.css({
                position: 'static'
            });
        }
    });
})(jQuery);

Or you could always install it as a userscript using Greasemonkey or Tampermonkey, using something like:

// ==UserScript==
// @name       Drupal.org sticky sidebar
// @namespace  http://drupal.org/
// @version    0.1
// @description  Make Drupal.org project issue sidebars scroll as you do
// @include       http://drupal.org/*
// @include       https://drupal.org/*
// @include       http://*.drupal.org/*
// @include       https://*.drupal.org/*
// @copyright  2012+, Mike Crittenden
// ==/UserScript==

(function($) {
    var $sidebar   = $(".node-type-project-issue #aside-region"),
        $window    = $(window),
        offset     = $sidebar.offset()
    $sidebar.prepend('<h3 class="sidebar-title">' + jQuery('h1#page-subtitle').text() + '</h3>');
    $('.sidebar-title').hide();
    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $('.sidebar-title').show();
            $sidebar.css({
                position: 'fixed', top: '10px', width: '300px'
            });
        } else {
            $('.sidebar-title').hide();
            $sidebar.css({
                position: 'static'
            });
        }
    });
})(jQuery);

Bug: if you scroll all the way to the bottom of the page then it can overlap the footer, but meh.

Bug: if an issue has a lot of related issues, it might not all fit on the same page. Hopefully #2098115: Move "Related issues" out of the sidebar will land to address that.

Alternately, the sidebar could scroll separately? I'm thinking of the way the D8 toolbar works. We definitely don't want critical content getting stuck under the bottom of the browser window, no matter what size your window is.

Here's an updated version which addresses #14 and also makes an OK attempt at fixing the footer overlap issue.

// ==UserScript==
// @name       Drupal.org sticky sidebar
// @namespace  http://drupal.org/
// @version    0.1
// @description  Make Drupal.org project issue sidebars scroll as you do
// @include       http://drupal.org/*
// @include       https://drupal.org/*
// @include       http://*.drupal.org/*
// @include       https://*.drupal.org/*
// @copyright  2012+, Nobody
// ==/UserScript==

(function($) {
    var $sidebar   = $(".node-type-project-issue #aside-region"),
        $window    = $(window),
	$footer    = $('#footer'),
        offset     = $sidebar.offset(),
        startPos   = offset.top,
        startHeight = $sidebar.height()
    $sidebar.prepend('<h3 class="sidebar-title">' + jQuery('h1#page-subtitle').text() + '</h3>');
    $('.sidebar-title').hide();
    $window.scroll(function() {
        if ($window.scrollTop() + startHeight > $footer.offset().top) {
            $('.sidebar-title').show();
            $sidebar.css({
                position: 'relative', top: $footer.offset().top - $sidebar.height() - startPos - 30
            });
        } else if ($window.scrollTop() > offset.top) {
            $('.sidebar-title').show();
            $sidebar.css({
                position: 'fixed', top: '10px', width: '300px', bottom: '10px', overflow: 'auto'
            });
        } else {
            $('.sidebar-title').hide();
            $sidebar.css({
                position: 'static'
            });
        }
    });
})(jQuery);

This looks awesome!

The comment-number-in-the-same-line-as-author-info thing is already implemented by either dreditor or the drupal.org unleashed userstyle, so most users already using those might ignore the fact that this is not an out-of-the-box d.o feature. We should definitely implement this as a native/default thing for all users.

The title addition at the top of the sidebar is a very helpful thing, but still the eye needs to "travel" a long distance to see it when typing a comment. My browser is set to always show the full page title at the top of the window anyways (which is only a bit higher than where it would be after implementing this design), so yes this would surely improve things by placing the title a bit closer but we should not stop there. The title needs to be placed near the comment textbox along with other meta-data (see #2125287: Add issue metadata (besides related issues) above the comment textarea).

The list of related issues might get really long for some issues, so I suggest we should split the sidebar into two tabs, keep issue meta in the first one that will be shown by default and move the related issues in a second tab.

Good ideas @klonos. I probably won't implement them in my crappy little userscript but anyone else can of course feel free, and I'd like to see them make it into drupal.org proper.

Should this just include the metadata box or also the Follow, Jump to & Related Links boxes?

Well the related links & referenced by can be problematic as it can easily make the sidebar taller than the screen.
I also think that info is less important.

Follow button I think should always be visible.

Jump to I'm not fussed either way. Depends if there is room enough.

Project issue module shouldn't specify this.

If we are really forward-looking, I think position: sticky; could be used. http://caniuse.com/css-sticky

If we need some JS, then it should go in drupalorg's general.js.

Support for position: sticky isn't quite as bad as it looks from that link.
Firefox does actually support it: https://developer.mozilla.org/en-US/docs/Web/CSS/position#Browser_compat...

I dont think this issue is relevant anymore, most of the important info is already at the bottom.

I agree. I would much rather focus on getting full width back in the main container.