☰

Wide Github

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

目前为 2018-05-16 提交的版本。查看 最新版本。

  1. "use strict";
  2.  
  3. // ==UserScript==
  4. // @name        Wide Github
  5. // @namespace   https://github.com/xthexder/wide-github
  6. // @description Change all Github repository and gist pages to be full width and dynamically sized.
  7. // @author      xthexder
  8. // @copyright   2013+, xthexder (https://github.com/xthexder)
  9. // @contributor Jason Frey (https://github.com/Fryguy)
  10. // @contributor Marti Martz (https://github.com/Martii)
  11. // @contributor Paul "Joey" Clark (https://github.com/joeytwiddle)
  12. // @license     MIT; https://raw.githubusercontent.com/xthexder/wide-github/master/LICENSE
  13. // @version     1.2.0-joey6
  14. // @icon        https://raw.githubusercontent.com/xthexder/wide-github/master/icon.png
  15. // @homepageURL https://github.com/xthexder/wide-github
  16. // @supportURL  https://github.com/xthexder/wide-github/issues
  17. // @include     *github.com*
  18. // @grant       none
  19. //// Added by Joey:
  20. // @run-at      document-start
  21. // ==/UserScript==
  22.  
  23. // @todo I like the 1500px limit for normal usage, but I want to go much wider when doing side-by-side diffs.
  24. // Options for detection: Guess from the URL, or look for telltale elements in the HTML.
  25. // 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.
  26.  
  27. var styleSheet = "" +
  28. "header .container," +
  29. "header .container-lg {" +
  30.   "width: auto !important;" +
  31.   "margin-left: 20px !important;" +
  32.   "margin-right: 20px !important;" +
  33.   "min-width: 980px;" +
  34.   "max-width: initial;" +
  35. "}" +
  36. // This id ensures our CSS is more specific, so it overrides the site's CSS, regardless of which order they are loaded
  37. "#js-repo-pjax-container .container {" +
  38.   "width: auto !important;" +
  39.   //"margin-left: 20px !important;" +
  40.   //"margin-right: 20px !important;" +
  41.   "min-width: 980px;" +
  42.   // 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.
  43.   "max-width: 1499px;" +
  44.   "margin-left: auto !important;" +
  45.   "margin-right: auto !important;" +
  46.   "padding-left: 20px;" +
  47.   "padding-right: 20px;" +
  48. "}" +
  49. // But our specific rule above should not apply to wide pages
  50. // (This ensures that pages showing split diffs use all the available width)
  51. "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 {" +
  52.   "max-width: 100% !important;" +
  53. "}" +
  54. ".full-width .container {" +
  55.   "padding-left: auto !important;" +
  56.   "padding-right: auto !important;" +
  57. "}" +
  58.  
  59. // New PR split diff
  60. ".full-width .new-pr-form {" +
  61.   "max-width: none !important;" +
  62. "}" +
  63.  
  64. // Repository Issues
  65. "#js-repo-pjax-container .repository-content .discussion-timeline {" +  // Issue body
  66.   "margin-left: -220px;" +
  67.   "padding-left: 220px;" +
  68.   "width: 100% !important;" +
  69. "}" +
  70. // On PRs there is a pretty vertical line that runs through all the commits
  71. // But the rule above pushes it out to the left, so we need to push it back into place
  72. ".discussion-timeline::before {" +
  73.   "margin-left: 220px;" +
  74. "}" +
  75. ".repository-content .discussion-sidebar {" +
  76.   "width: 200px !important;" +
  77. "}" +
  78. ".repository-content .timeline-new-comment {" + // New Issue / issue comment form
  79.   "max-width: 100% !important;" +
  80. "}" +
  81. ".repository-content .inline-comments .comment-holder {" + // Diff / code comments
  82.   "max-width: 960px !important;" +
  83. "}" +
  84. ".repository-content .inline-comments .inline-comment-form-container {" +
  85.   "max-width: 960px !important;" +
  86. "}" +
  87. ".repository-content .inline-comments .inline-comment-form {" +
  88.   "max-width: 960px !important;" +
  89. "}" +
  90.  
  91. // Repository pulse page
  92. ".repository-content .authors-and-code .section {" + // Contributors bar graph
  93.   "width: 50%;" +
  94.   "height: 180px;" +
  95. "}" +
  96. ".repository-content .authors-and-code .section svg {" +
  97.   "height: 180px;" +
  98. "}" +
  99.  
  100. // Repository graph page
  101. ".repository-content .capped-card {" + // Graph cards on contributors / graph list
  102.   "margin:10px 10px 0 0 !important;" +
  103. "}" +
  104.  
  105. // Gists
  106. ".gist-content-wrapper .container {" +
  107.   "width: auto !important;" +
  108.   "margin-left: 20px !important;" +
  109.   "margin-right: 20px !important;" +
  110.   "min-width: 980px;" +
  111. "}" +
  112.  
  113. "";
  114.  
  115. (function () {
  116.   var s = document.createElement('style');
  117.   s.type = "text/css";
  118.   s.innerHTML = styleSheet;
  119.   (document.head || document.documentElement).appendChild(s);
  120. })();