☰

Fextralife Remove Twitch and Fix Layout

Removes twitch stream and fix layout for better readability and usability.

当前为 2023-11-28 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Fextralife Remove Twitch and Fix Layout
  3. // @namespace    https://gitlab.com/Dwyriel
  4. // @version      1.2
  5. // @description  Removes twitch stream and fix layout for better readability and usability.
  6. // @author       Dwyriel
  7. // @license      MIT
  8. // @match        https://*.fextralife.com/*
  9. // @grant        none
  10. // @homepageURL  https://gitlab.com/Dwyriel/Greasyfork-Scripts
  11. // ==/UserScript==
  12.  
  13. (function () {
  14.     'use strict';
  15.     const minMargin = 16, snapWidth = 480, desktopWidth = 1200, largeMobile = 768, maxMargin = 73.5 - minMargin, buggyNavbarBreakpoint = 1218;
  16.  
  17.     const wrapper = document.getElementById("wrapper");
  18.     const fexMain = document.querySelector(".fex-main");
  19.     const navbar = document.querySelector(".navbar");
  20.  
  21.     const removeStreamAndSidebar = () => {
  22.         document.getElementById("sidebar-wrapper")?.remove();
  23.         document.getElementById("fextrastream")?.remove();
  24.     };
  25.  
  26.     //makes the main content look good on bigger screens and remove the giant spacing on the upper part
  27.     const desktopFix = () => {
  28.         fexMain.style = "max-width: 1024px;";
  29.         document.getElementById("form-header").style = "max-height: 60px; margin-top: 0px;";
  30.     };
  31.  
  32.     //navbar won't show up when width is between 1200 and 1218 otherwise
  33.     const navbarFix = (windowWidth) => {
  34.         navbar.style = windowWidth > desktopWidth && windowWidth < buggyNavbarBreakpoint ? "display: block !important" : "";
  35.     };
  36.  
  37.     //Bunch of small changes to make it look more consistent
  38.     const smallSpacingFixes = (windowWidth) => {
  39.         wrapper.style.paddingLeft = windowWidth > snapWidth ? "4px" : "0px";
  40.         let marginSize = "0px";
  41.         if (windowWidth > desktopWidth)
  42.             marginSize = "auto";
  43.         else if (windowWidth >= largeMobile)
  44.             marginSize = `${((windowWidth - largeMobile) / (desktopWidth - largeMobile) * maxMargin) + minMargin}px`;
  45.         else if (windowWidth > snapWidth)
  46.             marginSize = `${minMargin}px`;
  47.         fexMain.style.marginLeft = marginSize;
  48.         fexMain.style.marginRight = marginSize;
  49.     };
  50.  
  51.     //function to be called every 'resize' event
  52.     const fixLayout = () => {
  53.         let windowWidth = window.innerWidth;
  54.         navbarFix(windowWidth);
  55.         smallSpacingFixes(windowWidth);
  56.     };
  57.  
  58.     removeStreamAndSidebar();
  59.     desktopFix();
  60.     fixLayout();
  61.     window.addEventListener('resize', () => fixLayout());
  62. })();