☰

Сделайте панель навигации GitHub всегда видимой, используя локальный JS/CSS, например GreaseMonkey

tag-icon • tag-icon script html github greasemonkey
Сделайте панель навигации GitHub всегда видимой, используя локальный JS/CSS, например GreaseMonkey

Недавний редизайн GitHub сделал его гораздо менее удобным, поскольку 2/3 площади экрана больше не используются: Редизайн GitHub с неиспользуемым пространством

Если нажать кнопку меню-гамбургера, появится полезная боковая панель, но она исчезнет, ​​если щелкнуть в любом месте за ее пределами: GitHub с боковой панелью

Я хотел бы использовать плагин Chromium для изменения дерева DOM/CSS GitHub, чтобы эта боковая панель всегда отображалась на всех страницах, как показано на снимке экрана GIMP ниже:

введите описание изображения здесь

Буду благодарен за инструкции, как это сделать. Думаю, достаточно переместить его в другое место дерева DOM и сделать видимым.

решение1

Левая боковая панель как бы не загружает данные до нажатия на кнопку-гамбургер, и я понятия не имею, как вообще работает сайт, но я сделал что-то немного безвкусное.

// ==UserScript==
// @name         GitHub - Left sidebar always visible
// @namespace    http://tampermonkey.net/
// @version      4
// @description  superuser.com/questions/1794556
// @match        https://github.com/*
// ==/UserScript==

(function() {
  'use strict';

  const css = `

  @media only screen and (min-width: 1300px) {

    .application-main {
      display: flex;
      flex-direction: row-reverse !important;
      width: 100%;
    } .application-main deferred-side-panel > div {
      display: flex !important;
      position: sticky;
      padding-top: 1em;
    } .application-main modal-dialog {
      max-height: 96vh !important;
      display: flex !important;
    }

    .application-main > div[class=""],
    .application-main main {
      width: 100%;
    }

    .application-main .Overlay-backdrop--side {
      background-color: transparent;
      display: flex !important;
      z-index: 1;
    }

    .application-main > div > div > aside.team-left-column,
    .AppHeader-globalBar-start > deferred-side-panel,
    .application-main deferred-side-panel > button[id],
    .application-main deferred-side-panel > div[class] .Overlay-actionWrap {
      display: none !important;
    }

  }
  `;

  const styleElement = document.createElement('style');

  styleElement.textContent = css;

  document.head.appendChild(styleElement);

  var openButton = document.querySelector("deferred-side-panel > include-fragment > button[id]");
  var closeButton = document.querySelector(".Overlay-actionWrap > .close-button");

  function trigMenu() {

    setTimeout(function() {

      if (openButton === null) {
        openButton = document.querySelector("deferred-side-panel > include-fragment > button[id]");
        return;
      }

      if (openButton.isConnected) {
          openButton.click();
      } else {
          openButton = document.querySelector("deferred-side-panel > include-fragment > button[id]");
      }

      if (closeButton.isConnected) {
          closeButton.click();
      } else {
          closeButton = document.querySelector(".Overlay-actionWrap > .close-button");
      }

      setTimeout(function() {

        const main = document.querySelector(".application-main");

        const leftPanel = document.querySelector(".AppHeader-globalBar-start > deferred-side-panel");

        if (leftPanel) {
          main.appendChild(leftPanel);
        }

      }, 750);

    }, 1);

  }

  const observer = new MutationObserver(function(m) {
    for (const mutation of m) {
      if (mutation.target.tagName === 'DIV') {
        if (window.location.pathname.match(/\/(users|orgs)\/.*?\/projects\/.*/g)) { return }
        trigMenu();
      }
    }
  });

  observer.observe(document.body, { childList: true, subtree: true });

})();

Все, что делает код, это внедряет CSS, который заставляет панель меню следовать за видом экрана. Затем, когда изменяется DOM, он перемещает отрисованный элемент боковой панели в другой узел, когда нажимает кнопку переключения меню, чтобы динамические данные загрузились.

Большая часть работы сделана в CSS. Я не исследовал каждую страницу на предмет вопиющих столкновений элементов, но пока что на обычных страницах все в порядке. Я также уверен, что есть лучшие способы обработки/оптимизации этого кода.

Связанный контент