Custom Nav: (Feature Request) Allow shifting right to provide better Octotree compatibility

[CollinChaffin]

Hey @Mottie Rob!

For those using Octotree, the pinned left content bar almost completely overlaps the GH search box in the custom NAV bar, even when used with the very handy GH Fixed Header style.

Would it be possible to, either via a new static option or a custom CSS option, to have the custom NAV style/userscript provide the mechanism to right-shift the entire custom nav bar items (up to the right-most options button) into the vast space present on most wide displays between that options button and the default GH notification bell and avatar menu?

This would be an awesome addition and I'm sure very welcomed as the Octotree extension is gaining more and more traction and otherwise seems to work very well with every other GH style/script of yours I've used! Thanks!

[Mottie]

Hi @CollinChaffin!

Hmm, I have Octotree installed, but I'm not seeing the overlap you're describing (while pinned).

I did see that with GitHub Dark turned off, all of the svg icons were too dark. GitHub changed all their nav class names a while back. I'll get that fixed in the next update.

[Mottie]

Ok, I found the issue you're describing. It's a bit complicated. Octotree is adding a padding-left to the header when the side panel is pinned and resized; but it completely removes that padding once the side panel width equals the margin left value (GitHub sets the margin to auto). Because of this, the fixed header (applied by the GitHub-FixedHeader user style) jumps back to the left when Octotree removes the padding-left value. I hope that makes sense.

A solution would not involve changing the fixed header style since we can't use dynamic values in CSS.
Using the custom navigation userscript to modify the header padding would work, but only for this one userscript. I guess I could write a separate userscript to patch the GitHub-FixedHeader issue...

The ideal solution would be to have Octotree not remove the padding.

[Mottie]

Try this userscript, for now:

Outdated code

// ==UserScript==
// @name        GitHub FixHeader Adjust
// @version     0.1.0
// @description A userscript that adjusts the header position for Octotree & GitHub-FixedHeader
// @license     MIT
// @author      Rob Garrison
// @namespace   https://github.com/Mottie
// @include     https://github.com/*
// @include     https://gist.github.com/*
// @run-at      document-idle
// @grant       none
// @icon        https://github.githubassets.com/pinned-octocat.svg
// ==/UserScript==
(() => {
  "use strict";

  const html = document.querySelector("html");

  function checkOctotreeWidth() {
    if (html.classList.contains("octotree-show")) {
      const size = html.style.marginLeft || 0;
      document.querySelector(".Header").style.marginLeft = size ? size : "";
    }
  }

  if (html.classList.contains("octotree")) {
    new MutationObserver(checkOctotreeWidth).observe(html, {
      attributes: true
    });
  }
})();

[CollinChaffin]

Hey @Mottie Rob!

This is awesome I'll work to test it now - thanks! I should have known better and added that this is also with the Github-Wide userscript in use (along with GH dark you mentioned and most of yours). I recently had to do several fixes and still have a PR open with GH wide due to Octotree overlap issues when using that script (which I no longer suffer from) and I believe their last update made attempts (unneeded, IMO to fix the overlap issue) to also change that padding-left. So, let me try this new script and also do a bit more testing since now that I think about it, this whole issue very well is again probably an issue with the GH wide script. :)

Thanks!

[CollinChaffin]

Quick update I think my terminology was off the "shifting" is working perfectly albeit I have to scroll a bit to see the shift occur. But, the shift then loses the right-hand avatar/etc. "Squeezing" to reduce the middle blank space is a more accurate description of what is needed.

I have confirmed my last guess is correct - 100% of this is actually again due to that GH wide userscript. Without any checking, it applies the "wide" to the top nav bar (along with other elements) and even I force it to apply after this new script you provided, it simply stretches the dimensions (now offscreen) due to the lack of any logic. This is about the sixth major issue caused by it recently so I apologize for not checking it sooner.

After experiencing a bit of questionable interaction with the GH wide developer myself I already wound up just forking it and having to apply several recent fixes myself and I think in the end I just need to work on rewriting much of it from the ground up. It's not my 1st choice CSS is not really my strength but I'll try to figure it out.

I'm surprised that you being by far the top GH site pro have written enhancements for just about everything else but not a "wide" one. Either a new proper "wide" style/uscript in your collection, or even as a new added "wide" option in the larger GH Dark would of course be the utopia option. 😉 😉

[Mottie]

LOL, I never bothered making a "wide" style because there were already so many... that, and I kinda like keeping the width of the content fixed - at least for GitHub. I can look into it when I get a chance.

[CollinChaffin]

I have yet to see a GH wide style that actually works well despite all the commonly used styles and extensions other than your styles/scripts which, even with just about all of them together plus octotree/refinedGH/others, work well without issues. Even if you ever get a few min to evaluate Octotree (since they still do have an open-source offering) to try to assist that project on the best ways specific to GH to do certain things - like that expanding left bar - I'm certain would be vastly welcomed from anyone familiar with all your GH experience.

[Mottie]

Let me know what you think of this userscript... it slides all content to the right when the Octotree side panel opens. I did this in case someone with a narrow screen (or using GitHub wide) still wanted to see the content which would normally end up under the side panel.

// ==UserScript==
// @name        GitHub Octotree Slide
// @version     0.1.0
// @description A userscript that slides content to the right when Octotree's sidepanel opens
// @license     MIT
// @author      Rob Garrison
// @namespace   https://github.com/Mottie
// @include     https://github.com/*
// @include     https://gist.github.com/*
// @run-at      document-idle
// @grant       none
// @icon        https://github.githubassets.com/pinned-octocat.svg
// ==/UserScript==
(() => {
  "use strict";

  const html = document.querySelector("html");
  const style = document.createElement("style");
  const octotreeNav = document.querySelector(".octotree-sidebar");

  if (html.classList.contains("octotree")) {
    document.body.appendChild(style);
    [html, octotreeNav].forEach(el => {
      new MutationObserver(checkOctotreeWidth).observe(el, {
        attributes: true
      });
    });
  }

  function checkOctotreeWidth() {
    const offset = octotreeNav.style.width;
    style.textContent = `
			html body > div:not(.js-header-wrapper),
			.Header {
				transform: translate3d(0px, 0px, 0px);
				transition: transform 0.2s ease 0.1s;
			}
			html.octotree-show body > div:not(.js-header-wrapper),
			html.octotree-show .Header:not([style]) {
				transform: translate3d(${offset}, 0px, 0px);
			}`;
  }
})();