☰

Fextralife Remove Twitch and Fix Layout

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

  1. // ==UserScript==
  2. // @name         Fextralife Remove Twitch and Fix Layout
  3. // @namespace    https://gitlab.com/Dwyriel
  4. // @version      1.3.1
  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, maxMargin = 73.5 - minMargin, formMinMargin = 8, formMaxMargin = 60 - formMinMargin;
  16.     const snapWidth = 480, desktopWidth = 1200, largeMobile = 768, buggyNavbarBreakpoint = 1218;
  17.  
  18.     const wrapper = document.getElementById("wrapper");
  19.     const fexMain = document.querySelector(".fex-main");
  20.     const navbar = document.querySelector(".navbar");
  21.     const pageChunk = document.querySelector(".page-chunk");
  22.     const form = document.getElementById("form-header");
  23.     const discussionNew = document.getElementById("discussions-new").parentNode;
  24.  
  25.     const removeStreamAndSidebar = () => {
  26.         document.getElementById("sidebar-wrapper")?.remove();
  27.         document.getElementById("fextrastream")?.remove();
  28.     };
  29.  
  30.     //makes the main content look good on bigger screens and remove the giant spacing on the upper part
  31.     const desktopFix = () => {
  32.         fexMain.style = "max-width: 1024px;";
  33.         form.style = "max-height: 60px; margin-top: 0px;";
  34.     };
  35.  
  36.     //navbar won't show up when width is between 1200 and 1218 otherwise
  37.     const navbarFix = (windowWidth) => {
  38.         navbar.style = windowWidth > desktopWidth && windowWidth < buggyNavbarBreakpoint ? "display: block !important" : "";
  39.     };
  40.  
  41.     //Bunch of small changes to make it look more consistent
  42.     const smallSpacingFixes = (windowWidth) => {
  43.         wrapper.style.paddingLeft = "0px";
  44.         discussionNew.style.setProperty("padding", "0px", "important");
  45.         let marginSize = "0px";
  46.         if (windowWidth > desktopWidth) {
  47.             marginSize = "auto";
  48.             pageChunk.style.marginLeft = "0px";
  49.             form.style.height = `${formMaxMargin}px`;
  50.         }
  51.         else if (windowWidth >= largeMobile) {
  52.             marginSize = `${((windowWidth - largeMobile) / (desktopWidth - largeMobile) * maxMargin) + minMargin}px`;
  53.             form.style.height = `${((windowWidth - largeMobile) / (desktopWidth - largeMobile) * formMaxMargin) + formMinMargin}px`;
  54.         }
  55.         else if (windowWidth > snapWidth) {
  56.             marginSize = `${minMargin}px`;
  57.             form.style.height = `${formMinMargin}px`;
  58.         }
  59.         fexMain.style.marginLeft = marginSize;
  60.         fexMain.style.marginRight = marginSize;
  61.     };
  62.  
  63.     //function to be called every 'resize' event
  64.     const fixLayout = () => {
  65.         let windowWidth = window.innerWidth;
  66.         navbarFix(windowWidth);
  67.         smallSpacingFixes(windowWidth);
  68.     };
  69.  
  70.     removeStreamAndSidebar();
  71.     desktopFix();
  72.     fixLayout();
  73.     window.addEventListener('resize', () => fixLayout());
  74. })();