☰

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.

// ==UserScript==
// @name        booru.io full height images
// @namespace   abdrool
// @match       https://booru.io/*
// @grant       GM_addStyle
// @version     1.1
// @author      abdrool
// @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.
// @require     http://code.jquery.com/jquery-latest.js
// @require     https://cdn.jsdelivr.net/npm/[email protected]/jquery.initialize.min.js
// ==/UserScript==


let customCss = `
#navbar {
  transform: translateY(-100%);
  transition: transform .5s cubic-bezier(.4,0,.2,1) .5s;
}

#navbar-wrapper:hover #navbar {
  transform: translateY(0%);
  transition-delay: 0s;
}

#navbar-wrapper {
  position: absolute;
  top: 0%;
  width: 100%;
}

.card, body {
  margin-top: 0px !important;
}
`
GM_addStyle(customCss);

function updateCardSize() {
  let card = $(".card");
  let img = $(".card img")
  let aspect = img.width() / img.height();
  
  let new_height = $(window).height();
  let new_width = aspect * new_height;
  if (new_width > $(window).width()) {
    new_width = $(window).width();
    new_height = new_width / aspect;
  }
  
  let sheet = document.styleSheets[0];
  let rules = sheet.cssRules || sheet.rules;
  if (rules[0].selectorText == ".card") {
    sheet.deleteRule(0);
  }
  if (window.location.pathname.startsWith("/p/")){
    console.log("updating card " + new_width + "x" + new_height);
    sheet.insertRule(".card{width: " + new_width + "px !important; height: " + new_height + "px !important}", 0);
  }
}


$(document).ready(function() {
  let navbar = $("#app-root > :first-child > :first-child");
  navbar.attr("id", "navbar");
  navbar.wrap("<div id='navbar-wrapper'></div>");
  let wrapper = $("#navbar-wrapper");
  wrapper.height(navbar.height());
    
  $.initialize(".card img", function(){
    updateCardSize();
    const o = new MutationObserver(updateCardSize);
    o.observe(document.querySelector(".card"), { attributes: true, attributeFilter: ["style"] });
  });
  
});