☰

Wide Github [fork]

Change all Github repository and gist pages to be full width and dynamically sized.

"use strict";

// ==UserScript==
// @name        Wide Github [fork]
// @namespace   https://github.com/xthexder/wide-github
// @description Change all Github repository and gist pages to be full width and dynamically sized.
// @author      xthexder
// @copyright   2013+, xthexder (https://github.com/xthexder)
// @contributor Jason Frey (https://github.com/Fryguy)
// @contributor Marti Martz (https://github.com/Martii)
// @contributor Paul "Joey" Clark (https://github.com/joeytwiddle)
// @license     MIT; https://raw.githubusercontent.com/xthexder/wide-github/master/LICENSE
// @version     1.2.0-joey8
// @icon        https://raw.githubusercontent.com/xthexder/wide-github/master/icon.png
// @homepageURL https://github.com/xthexder/wide-github
// @supportURL  https://github.com/xthexder/wide-github/issues
// @include     *github.com*
// @grant       none
//// Added by Joey:
// @run-at      document-start
// ==/UserScript==

// @todo I like the 1500px limit for normal usage, but I want to go much wider when doing side-by-side diffs.
// Options for detection: Guess from the URL, or look for telltale elements in the HTML.
// Options for live updates: Apply new CSS when a change is detected (slow memory leak), or add a toggling class to the root of the page.

var styleSheet = "" +
"header .container," +
"header .container-lg {" +
  "width: auto !important;" +
  "margin-left: 20px !important;" +
  "margin-right: 20px !important;" +
  "min-width: 980px;" +
  "max-width: initial;" +
"}" +
// This id ensures our CSS is more specific, so it overrides the site's CSS, regardless of which order they are loaded
"#js-repo-pjax-container .container {" +
  "width: auto !important;" +
  //"margin-left: 20px !important;" +
  //"margin-right: 20px !important;" +
  "min-width: 980px;" +
  // I use zoom 90% in Chrome.  But that causes the left border of the file list to disappear, if I use an even max-width.  So I have to use an odd max-width.
  "max-width: 1499px;" +
  "margin-left: auto !important;" +
  "margin-right: auto !important;" +
  "padding-left: 20px;" +
  "padding-right: 20px;" +
"}" +
// But our specific rule above should not apply to wide pages
// (This ensures that pages showing split diffs use all the available width)
"body.split-diff #js-repo-pjax-container .container, body.split-diff #js-repo-pjax-container .container-lg, body.full-width #js-repo-pjax-container .container, body.full-width #js-repo-pjax-container .container-lg {" +
  "max-width: 100% !important;" +
"}" +
".full-width .container {" +
  "padding-left: auto !important;" +
  "padding-right: auto !important;" +
"}" +

// New PR split diff
".full-width .new-pr-form {" +
  "max-width: none !important;" +
"}" +

// Repository Issues
"#js-repo-pjax-container .repository-content .discussion-timeline {" +  // Issue body
  "margin-left: -220px;" +
  "padding-left: 220px;" +
  "width: 100% !important;" +
"}" +
// On PRs and issues there is a pretty vertical line that runs through all the commits and references.
// But the rule above pushes it out to the left, so we need to push it back into place.
"#js-repo-pjax-container .repository-content .discussion-timeline::before {" +
  "margin-left: 220px;" +
"}" +
".repository-content .discussion-sidebar {" +
  "width: 200px !important;" +
"}" +
".repository-content .timeline-new-comment {" + // New Issue / issue comment form
  "max-width: 100% !important;" +
"}" +
".repository-content .inline-comments .comment-holder {" + // Diff / code comments
  "max-width: 960px !important;" +
"}" +
".repository-content .inline-comments .inline-comment-form-container {" +
  "max-width: 960px !important;" +
"}" +
".repository-content .inline-comments .inline-comment-form {" +
  "max-width: 960px !important;" +
"}" +

// Repository pulse page
".repository-content .authors-and-code .section {" + // Contributors bar graph
  "width: 50%;" +
  "height: 180px;" +
"}" +
".repository-content .authors-and-code .section svg {" +
  "height: 180px;" +
"}" +

// Repository graph page
".repository-content .capped-card {" + // Graph cards on contributors / graph list
  "margin:10px 10px 0 0 !important;" +
"}" +

// Gists
".gist-content-wrapper .container {" +
  "width: auto !important;" +
  "margin-left: 20px !important;" +
  "margin-right: 20px !important;" +
  "min-width: 980px;" +
"}" +

"";

(function () {
  var s = document.createElement('style');
  s.type = "text/css";
  s.innerHTML = styleSheet;
  (document.head || document.documentElement).appendChild(s);
})();