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. })();