User:CannonProductions/monacobookbeta.js: Difference between revisions

From MediaWiki
Jump to navigationJump to search
← Older editNewer edit →
CannonProductions (talk | contribs)
91 edits
No edit summary
No edit summary
Line 1: Line 1:
/* ===== TFWiki Mobile Fix Pack (MonacoBookBeta-ish) ===== */
/* User:CannonProductions/monacobookbeta.js
@media (max-width: 720px) {
  - Dynamically scales #top-ad iframe banner to fit available width on mobile
  - Locks background scroll when the sidebar (#column-one) is open on mobile
  - Adds html.tf-nav-open while the sidebar is open (for CSS styling)
  - Removes the redundant mobile logo portlet (#p-m-logo) so it doesn’t waste space
*/


  /* --- Base layout: full width, no weird centering --- */
(function () {
  html, body {
   "use strict";
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: visible !important;
  }
 
  #globalWrapper,
  #column-content,
  #content,
  #bodyContent {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
   }
 
  /* breathing room for article text */
  #content, #bodyContent {
    padding-left: 10px !important;
    padding-right: 10px !important;
    overflow-x: hidden !important;
  }
 
  /* keep "more" / action menus able to overflow */
  #p-cactions,
  #p-cactions .pBody,
  #column-content {
    overflow: visible !important;
  }
  #p-cactions {
    position: relative !important;
    z-index: 10000 !important;
  }
 
  /* Main Page columns stack */
  #mw-content-text .mainleft,
  #mw-content-text .mainright {
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    text-align: center;
  }
 
  /* Media in the ARTICLE never forces overflow */
  #mw-content-text img,
  #mw-content-text video,
  #mw-content-text iframe {
    max-width: 100% !important;
    height: auto !important;
  }
 
  .thumb, .thumbinner {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
 
  /* Wide tables/navboxes scroll */
  #mw-content-text table.wikitable,
  #mw-content-text .navbox,
  #mw-content-text table.navbox {
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
 
  /* long text doesn't blow width */
  .mw-parser-output {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  pre, code {
    white-space: pre-wrap !important;
    word-break: break-word !important;
  }
 
  /* --- Full-screen sidebar overlay --- */
  #column-one {
    position: fixed !important;
    left: 0 !important;
 
    width: 100vw !important;
    max-width: 100vw !important;
 
    margin: 0 !important;
    padding: 0 !important;
 
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
 
    z-index: 999999 !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }


   /* Make sidebar contents stretch full width */
   // === SETTINGS ===
   #column-one .portlet,
   var DEBUG_BADGE = false;
  #column-one .pBody,
   var MOBILE_MAX_WIDTH = 720;
  #column-one ul,
  #column-one form,
   #column-one fieldset {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
  }


   #column-one ul {
   // Banner creative’s native size
    list-style: none !important;
  var BASE_W = 468;
   }
   var BASE_H = 60;
  #column-one li a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 16px !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    border-bottom: 1px solid rgba(0,0,0,0.10) !important;
    text-decoration: none !important;
  }


   /* Search area padding + full-width controls */
   // Banner scale limits
   #p-search .pBody { padding: 12px 16px !important; }
   var MIN_SCALE = 0.55;
  var MAX_SCALE = 1.0;


   #column-one #searchInput,
   function onReady(fn) {
  #column-one input[type="text"],
    if (document.readyState === "loading") {
  #column-one input[type="search"] {
      document.addEventListener("DOMContentLoaded", fn);
    width: 100% !important;
     } else {
     max-width: 100% !important;
      fn();
    font-size: 18px !important;
     }
     padding: 12px 12px !important;
    box-sizing: border-box !important;
   }
   }


   #column-one input[type="submit"],
   function addBadge() {
  #column-one input[type="button"],
     if (!DEBUG_BADGE) return;
  #column-one button {
     if (!document.body) return;
     width: 100% !important;
     if (document.getElementById("js-test-badge")) return;
     max-width: 100% !important;
     display: block !important;
    font-size: 18px !important;
    padding: 14px 12px !important;
    margin: 10px 0 0 0 !important;
    box-sizing: border-box !important;
  }


  /* --- Banner ad: DO NOT let CSS fight the scaling JS --- */
    var d = document.createElement("div");
  #top-ad {
    d.id = "js-test-badge";
     width: 100% !important;
     d.textContent = "User JS RUNNING";
     overflow: hidden !important;
     d.style.cssText =
  }
      "position:fixed;top:0;left:0;z-index:999999;" +
  #top-ad iframe {
      "padding:6px 10px;background:#e11;color:#fff;" +
    max-width: none !important; /* key */
      "font:12px sans-serif";
    height: 60px !important;
     document.body.prepend(d);
    border: 0 !important;
     display: block !important;
   }
   }


   /* ===== The ACTUAL GOAL: menu shifts under hamburger bar when open ===== */
   function isMobileWidth() {
  :root { --tf-hamburger-h: 52px; } /* tweak if needed */
     return window.matchMedia("(max-width: " + MOBILE_MAX_WIDTH + "px)").matches;
 
  html.tf-nav-open #column-one {
    top: var(--tf-hamburger-h) !important;
     height: calc(100vh - var(--tf-hamburger-h)) !important;
   }
   }


   /* When nav is open, hide banner ad entirely */
   // ===== Remove the redundant mobile logo portlet =====
   html.tf-nav-open #top-ad {
   function removeMobileLogoPortlet() {
    display: none !important;
    var p = document.getElementById("p-m-l
  }
}

Revision as of 13:01, 30 December 2025

/* User:CannonProductions/monacobookbeta.js
   - Dynamically scales #top-ad iframe banner to fit available width on mobile
   - Locks background scroll when the sidebar (#column-one) is open on mobile
   - Adds html.tf-nav-open while the sidebar is open (for CSS styling)
   - Removes the redundant mobile logo portlet (#p-m-logo) so it doesn’t waste space
*/

(function () {
  "use strict";

  // === SETTINGS ===
  var DEBUG_BADGE = false;
  var MOBILE_MAX_WIDTH = 720;

  // Banner creative’s native size
  var BASE_W = 468;
  var BASE_H = 60;

  // Banner scale limits
  var MIN_SCALE = 0.55;
  var MAX_SCALE = 1.0;

  function onReady(fn) {
    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", fn);
    } else {
      fn();
    }
  }

  function addBadge() {
    if (!DEBUG_BADGE) return;
    if (!document.body) return;
    if (document.getElementById("js-test-badge")) return;

    var d = document.createElement("div");
    d.id = "js-test-badge";
    d.textContent = "User JS RUNNING";
    d.style.cssText =
      "position:fixed;top:0;left:0;z-index:999999;" +
      "padding:6px 10px;background:#e11;color:#fff;" +
      "font:12px sans-serif";
    document.body.prepend(d);
  }

  function isMobileWidth() {
    return window.matchMedia("(max-width: " + MOBILE_MAX_WIDTH + "px)").matches;
  }

  // ===== Remove the redundant mobile logo portlet =====
  function removeMobileLogoPortlet() {
    var p = document.getElementById("p-m-l
Retrieved from "https://tfwiki.duckdns.org/index.php?title=User:CannonProductions/monacobookbeta.js&oldid=1882039"