☰

booru.io full height images

Use your full viewport to view images on booru.io. The navbar only displays on hover, while the bottom elements are pushed down the page a bit.

  1. // ==UserScript==
  2. // @name        booru.io full height images
  3. // @namespace   abdrool
  4. // @match       https://booru.io/*
  5. // @grant       GM_addStyle
  6. // @version     1.1
  7. // @author      abdrool
  8. // @description Use your full viewport to view images on booru.io. The navbar only displays on hover, while the bottom elements are pushed down the page a bit.
  9. // @require     http://code.jquery.com/jquery-latest.js
  10. // @require     https://cdn.jsdelivr.net/npm/jquery.initialize@1.3.0/jquery.initialize.min.js
  11. // ==/UserScript==
  12.  
  13.  
  14. let customCss = `
  15. #navbar {
  16.   transform: translateY(-100%);
  17.   transition: transform .5s cubic-bezier(.4,0,.2,1) .5s;
  18. }
  19.  
  20. #navbar-wrapper:hover #navbar {
  21.   transform: translateY(0%);
  22.   transition-delay: 0s;
  23. }
  24.  
  25. #navbar-wrapper {
  26.   position: absolute;
  27.   top: 0%;
  28.   width: 100%;
  29. }
  30.  
  31. .card, body {
  32.   margin-top: 0px !important;
  33. }
  34. `
  35. GM_addStyle(customCss);
  36.  
  37. function updateCardSize() {
  38.   let card = $(".card");
  39.   let img = $(".card img")
  40.   let aspect = img.width() / img.height();
  41.   
  42.   let new_height = $(window).height();
  43.   let new_width = aspect * new_height;
  44.   if (new_width > $(window).width()) {
  45.     new_width = $(window).width();
  46.     new_height = new_width / aspect;
  47.   }
  48.   
  49.   let sheet = document.styleSheets[0];
  50.   let rules = sheet.cssRules || sheet.rules;
  51.   if (rules[0].selectorText == ".card") {
  52.     sheet.deleteRule(0);
  53.   }
  54.   if (window.location.pathname.startsWith("/p/")){
  55.     console.log("updating card " + new_width + "x" + new_height);
  56.     sheet.insertRule(".card{width: " + new_width + "px !important; height: " + new_height + "px !important}", 0);
  57.   }
  58. }
  59.  
  60.  
  61. $(document).ready(function() {
  62.   let navbar = $("#app-root > :first-child > :first-child");
  63.   navbar.attr("id", "navbar");
  64.   navbar.wrap("<div id='navbar-wrapper'></div>");
  65.   let wrapper = $("#navbar-wrapper");
  66.   wrapper.height(navbar.height());
  67.     
  68.   $.initialize(".card img", function(){
  69.     updateCardSize();
  70.     const o = new MutationObserver(updateCardSize);
  71.     o.observe(document.querySelector(".card"), { attributes: true, attributeFilter: ["style"] });
  72.   });
  73.   
  74. });