User:CannonProductions/monacobookbeta.css: 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:
/* User:CannonProductions/monacobookbeta.js
/* ===== TFWiki Mobile Fix Pack (MonacoBookBeta-ish) ===== */
  - Dynamically scales #top-ad iframe banner to fit available width on mobile
@media (max-width: 720px) {
  - 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 () {
  /* --- Base layout: full width --- */
   "use strict";
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: visible !important;
   }


   // === SETTINGS ===
   #globalWrapper,
   var DEBUG_BADGE = false;
   #column-content,
   var MOBILE_MAX_WIDTH = 720;
  #content,
  #bodyContent {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
   }


   // Banner creative’s native size
   #content, #bodyContent {
  var BASE_W = 468;
    padding-left: 10px !important;
   var BASE_H = 60;
    padding-right: 10px !important;
    overflow-x: hidden !important;
   }


   // Banner scale limits
   /* keep "more" / action menus able to overflow */
   var MIN_SCALE = 0.55;
  #p-cactions,
   var MAX_SCALE = 1.0;
   #p-cactions .pBody,
  #column-content {
    overflow: visible !important;
   }
  #p-cactions {
    position: relative !important;
    z-index: 10000 !important;
  }


   function onReady(fn) {
   /* Main Page columns stack */
     if (document.readyState === "loading") {
  #mw-content-text .mainleft,
      document.addEventListener("DOMContentLoaded", fn);
  #mw-content-text .mainright {
     } else {
     float: none !important;
      fn();
    width: auto !important;
     }
    max-width: 100% !important;
     margin: 0 !important;
    box-sizing: border-box !important;
     text-align: center;
   }
   }


   function addBadge() {
   /* Article media responsive (DON'T touch all iframes globally) */
     if (!DEBUG_BADGE) return;
  #mw-content-text img,
     if (!document.body) return;
  #mw-content-text video,
    if (document.getElementById("js-test-badge")) return;
  #mw-content-text iframe {
     max-width: 100% !important;
     height: auto !important;
  }


    var d = document.createElement("div");
  /* Wide tables/navboxes scroll */
    d.id = "js-test-badge";
  #mw-content-text table.wikitable,
     d.textContent = "User JS RUNNING";
  #mw-content-text .navbox,
     d.style.cssText =
  #mw-content-text table.navbox {
      "position:fixed;top:0;left:0;z-index:999999;" +
     display: block !important;
      "padding:6px 10px;background:#e11;color:#fff;" +
     max-width: 100% !important;
      "font:12px sans-serif";
    overflow-x: auto !important;
    document.body.prepend(d);
    -webkit-overflow-scrolling: touch;
   }
   }


   function isMobileWidth() {
   /* long text doesn't blow width */
     return window.matchMedia("(max-width: " + MOBILE_MAX_WIDTH + "px)").matches;
  .mw-parser-output {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  pre, code {
     white-space: pre-wrap !important;
    word-break: break-word !important;
   }
   }


   // ===== Remove the redundant mobile logo portlet =====
   /* --- Banner ad: do NOT fight the JS scaler --- */
   function removeMobileLogoPortlet() {
   #top-ad {
     var p = document.getElementById("p-m-logo");
     width: 100% !important;
     if (p && p.parentNode) p.parentNode.removeChild(p);
     overflow: hidden !important;
   }
   }
 
   #top-ad iframe {
   // ===== Banner scaling =====
     max-width: none !important;
  function resetBannerStyles(ad, iframe) {
     height: 60px !important;
     if (ad) {
    border: 0 !important;
      ad.style.height = "";
    display: block !important;
      ad.style.overflow = "";
      ad.style.width = "";
     }
    if (iframe) {
      iframe.style.transform = "";
      iframe.style.transformOrigin = "";
      iframe.style.width = "";
      iframe.style.height = "";
      iframe.style.border = "";
      iframe.style.display = "";
    }
   }
   }


   function rescaleBanner() {
   /* --- Full-screen sidebar overlay (ALWAYS when visible) --- */
     var ad = document.getElementById("top-ad");
  #column-one {
     if (!ad) return;
     position: fixed !important;
    top: 0 !important;
    left: 0 !important;
     right: 0 !important;


     var iframe = ad.querySelector("iframe");
     width: 100vw !important;
     if (!iframe) return;
    min-width: 100vw !important;
     max-width: none !important;


     if (!isMobileWidth()) {
     height: 100vh !important;
      resetBannerStyles(ad, iframe);
      return;
    }


     iframe.style.width = BASE_W + "px";
     margin: 0 !important;
     iframe.style.height = BASE_H + "px";
     padding: 0 !important;
    iframe.style.border = "0";
    iframe.style.display = "block";
    iframe.style.transformOrigin = "top left";


     var available = ad.getBoundingClientRect().width || window.innerWidth;
     overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;


     var scale = available / BASE_W;
     z-index: 999999 !important;
     if (scale > MAX_SCALE) scale = MAX_SCALE;
     background: #fff !important;
     if (scale < MIN_SCALE) scale = MIN_SCALE;
     box-sizing: border-box !important;
 
    iframe.style.transform = "scale(" + scale.toFixed(4) + ")";
 
    ad.style.width = "100%";
    ad.style.overflow = "hidden";
    ad.style.height = (BASE_H * scale) + "px";
   }
   }


   // ===== Nav open detection =====
   /* Stretch sidebar contents full width */
   function isNavOpen() {
   #column-one .portlet,
    var nav = document.getElementById("column-one");
  #column-one .pBody,
     if (!nav) return false;
  #column-one ul,
 
  #column-one form,
     var cs = window.getComputedStyle(nav);
  #column-one fieldset {
     if (!cs || cs.display === "none" || cs.visibility === "hidden") return false;
    width: 100% !important;
 
     max-width: 100% !important;
     var r = nav.getBoundingClientRect();
     margin: 0 !important;
     return r.width > 40 && r.height > 40;
     padding: 0 !important;
     float: none !important;
     box-sizing: border-box !important;
   }
   }


   // ===== Nav scroll locking + html class =====
   #column-one ul { list-style: none !important; }
   function setScrollLocked(locked) {
   #column-one li a {
     if (locked) {
     display: block !important;
      document.documentElement.style.overflow = "hidden";
    width: 100% !important;
      document.body.style.overflow = "hidden";
    box-sizing: border-box !important;
      document.body.setAttribute("data-nav-locked", "1");
     padding: 14px 16px !important;
     } else {
    font-size: 18px !important;
      if (document.body.getAttribute("data-nav-locked") === "1") {
    line-height: 1.2 !important;
        document.documentElement.style.overflow = "";
    border-bottom: 1px solid rgba(0,0,0,0.10) !important;
        document.body.style.overflow = "";
    text-decoration: none !important;
        document.body.removeAttribute("data-nav-locked");
      }
    }
   }
   }


   function updateNavLockAndClass() {
   /* Search controls full width */
    if (!isMobileWidth()) {
  #p-search .pBody { padding: 12px 16px !important; }
      setScrollLocked(false);
      document.documentElement.classList.remove("tf-nav-open");
      return;
    }
 
    var open = isNavOpen();
    setScrollLocked(open);


    if (open) {
  #column-one #searchInput,
      document.documentElement.classList.add("tf-nav-open");
  #column-one input[type="text"],
     } else {
  #column-one input[type="search"] {
      document.documentElement.classList.remove("tf-nav-open");
    width: 100% !important;
     }
     max-width: 100% !important;
    font-size: 18px !important;
    padding: 12px 12px !important;
     box-sizing: border-box !important;
   }
   }


   // ===== Plumbing =====
   #column-one input[type="submit"],
   var t = null;
   #column-one input[type="button"],
   function scheduleAll() {
   #column-one button {
     if (t) clearTimeout(t);
     width: 100% !important;
     t = setTimeout(function () {
    max-width: 100% !important;
      removeMobileLogoPortlet();
     display: block !important;
      rescaleBanner();
    font-size: 18px !important;
      updateNavLockAndClass();
    padding: 14px 12px !important;
     }, 60);
    margin: 10px 0 0 0 !important;
     box-sizing: border-box !important;
   }
   }


   function installObservers() {
   /* Hide the redundant mobile logo portlet (JS also removes it) */
    // Do ASAP
  #column-one #p-m-logo { display: none !important; }
    removeMobileLogoPortlet();


    // Run once now
  /* ===== Goal: menu shifts down under hamburger bar WHEN OPEN ===== */
    rescaleBanner();
  :root { --tf-hamburger-h: 52px; } /* tweak if needed */
    updateNavLockAndClass();


    // Re-run on resize/rotate
  html.tf-nav-open #column-one {
     window.addEventListener("resize", scheduleAll);
     top: var(--tf-hamburger-h) !important;
     window.addEventListener("orientationchange", scheduleAll);
     height: calc(100vh - var(--tf-hamburger-h)) !important;
 
  }
    // MediaWiki dynamic content hook
    if (window.mw && mw.hook) {
      mw.hook("wikipage.content").add(function () {
        scheduleAll();
      });
    }
 
    // Watch for DOM changes
    var obs = new MutationObserver(function () {
      scheduleAll();
    });
    obs.observe(document.documentElement, { childList: true, subtree: true, attributes: true });


    // Click safety
  /* When nav is open, hide banner ad completely */
    document.addEventListener("click", function () {
  html.tf-nav-open #top-ad {
      setTimeout(updateNavLockAndClass, 0);
     display: none !important;
     });
   }
   }
 
}
  onReady(function () {
    addBadge();
    installObservers();
  });
})();

Revision as of 13:02, 30 December 2025

/* ===== TFWiki Mobile Fix Pack (MonacoBookBeta-ish) ===== */
@media (max-width: 720px) {

  /* --- Base layout: full width --- */
  html, body {
    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;
  }

  #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;
  }

  /* Article media responsive (DON'T touch all iframes globally) */
  #mw-content-text img,
  #mw-content-text video,
  #mw-content-text iframe {
    max-width: 100% !important;
    height: auto !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;
  }

  /* --- Banner ad: do NOT fight the JS scaler --- */
  #top-ad {
    width: 100% !important;
    overflow: hidden !important;
  }
  #top-ad iframe {
    max-width: none !important;
    height: 60px !important;
    border: 0 !important;
    display: block !important;
  }

  /* --- Full-screen sidebar overlay (ALWAYS when visible) --- */
  #column-one {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100vw !important;
    min-width: 100vw !important;
    max-width: none !important;

    height: 100vh !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;
  }

  /* Stretch sidebar contents full width */
  #column-one .portlet,
  #column-one .pBody,
  #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 { list-style: none !important; }
  #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 controls full width */
  #p-search .pBody { padding: 12px 16px !important; }

  #column-one #searchInput,
  #column-one input[type="text"],
  #column-one input[type="search"] {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 18px !important;
    padding: 12px 12px !important;
    box-sizing: border-box !important;
  }

  #column-one input[type="submit"],
  #column-one input[type="button"],
  #column-one button {
    width: 100% !important;
    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;
  }

  /* Hide the redundant mobile logo portlet (JS also removes it) */
  #column-one #p-m-logo { display: none !important; }

  /* ===== Goal: menu shifts down under hamburger bar WHEN OPEN ===== */
  :root { --tf-hamburger-h: 52px; } /* tweak if needed */

  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 completely */
  html.tf-nav-open #top-ad {
    display: none !important;
  }
}
Retrieved from "https://tfwiki.duckdns.org/index.php?title=User:CannonProductions/monacobookbeta.css&oldid=1882041"